Favicon dimensions

Question

I have a favicon with the dimensions of height 26px   width 20px named favicon png   lt link href http   www example com images favicon png rel  shortcut icon    gt    However  in my browser  my favicon png is all distorted   Question  Is my favicon png supposed to be a particular size  Also  can I use a non-standard size dimension and if so  how

User · Answer

the format for the image you have chosen must be 16x16 pixels or   32x32 pixels  using either 8-bit or 24-bit colors  The format of the   image must be one of PNG  a W3C standard   GIF  or ICO  - How to Add a Favicon to your Site - QA   W3C

User · Answer

2020 standards thanks to faviconit  I use faviconit com for the best browser and device support possible  You upload an image and this site gives you the code  the converted images and a browserconfig file     We could simply upload a favicon manually to our website of 16x16 and it will probably show up in almost any browser   But when you will mark it as one of your favorites on your smartphone or tablet  we will need larger images  60x60 to 144x144    And lets say one of our users creates a shortcut on their desktop  In that case a 196x196 looks better        Example code of what faviconit would give you  next to all the converted images    lt  -- place this in your  lt head gt  lt  head gt  -- gt   lt link rel  shortcut icon  href   favicon ico  gt   lt link rel  icon  sizes  16x16 32x32 64x64  href   favicon ico  gt   lt link rel  icon  type  image png  sizes  196x196  href   favicon-192 png  gt   lt link rel  icon  type  image png  sizes  160x160  href   favicon-160 png  gt   lt link rel  icon  type  image png  sizes  96x96  href   favicon-96 png  gt   lt link rel  icon  type  image png  sizes  64x64  href   favicon-64 png  gt   lt link rel  icon  type  image png  sizes  32x32  href   favicon-32 png  gt   lt link rel  icon  type  image png  sizes  16x16  href   favicon-16 png  gt   lt link rel  apple-touch-icon  href   favicon-57 png  gt   lt link rel  apple-touch-icon  sizes  114x114  href   favicon-114 png  gt   lt link rel  apple-touch-icon  sizes  72x72  href   favicon-72 png  gt   lt link rel  apple-touch-icon  sizes  144x144  href   favicon-144 png  gt   lt link rel  apple-touch-icon  sizes  60x60  href   favicon-60 png  gt   lt link rel  apple-touch-icon  sizes  120x120  href   favicon-120 png  gt   lt link rel  apple-touch-icon  sizes  76x76  href   favicon-76 png  gt   lt link rel  apple-touch-icon  sizes  152x152  href   favicon-152 png  gt   lt link rel  apple-touch-icon  sizes  180x180  href   favicon-180 png  gt      Since Windows 8  But that is not all  Since windows 8 we are able to create shortcuts to websites with tiles    lt  -- place this in your  lt head gt  lt  head gt  -- gt   lt meta name  msapplication-TileColor  content   FFFFFF  gt   lt meta name  msapplication-TileImage  content   favicon-144 png  gt   lt meta name  msapplication-config  content   browserconfig xml  gt      Browserconfig xml  Upload a file named browserconfig xml  to enable the tiles in windows  8    lt browserconfig gt       lt msapplication gt           lt tile gt               lt square70x70logo src   favicon-70 png   gt               lt square150x150logo src   favicon-150 png   gt               lt square310x310logo src   favicon-310 png   gt               lt TileColor gt  FFFFFF lt  TileColor gt           lt  tile gt       lt  msapplication gt   lt  browserconfig gt

User · Answer

Short answer The favicon is supposed to be a set of 16x16  32x32 and 48x48 pictures in ICO format  ICO format is different than PNG  Non-square pictures are not supported  To generate the favicon  for many reasons explained below  I advise you to use this favicon generator  Full disclosure  I m the author of this site  Long  comprehensive answer Favicon must be square  Desktop browsers and Apple iOS do not support non-square icons  The favicon is supported by several files   A favicon ico icon  Some other PNG icons   In order to get the best results across desktop browsers  Windows IE  MacOS Safari  etc    you need to combine both types of icons  favicon ico Although all desktop browsers can deal with this icon  it is primarily for older version of IE  The ICO format is different of the PNG format  This point is tricky because some browsers are smart enough to process a PNG picture correctly  even when it was wrongly renamed with an ICO extension  An ICO file can contain several pictures and Microsoft recommends to put 16x16  32x32 and 48x48 versions of the icon in favicon ico  For example  IE will use the 16x16 version for the address bar  and the 32x32 for a task bar shortcut  Declare the favicon with   lt link rel  quot icon quot  href  quot  path to icons favicon ico quot  gt   However  it is recommended to place favicon ico in the root directory of the web site and to not declare it at all and let the modern browsers pick the PNG icons  PNG icons Modern desktop browsers  IE11  recent versions of Chrome  Firefox     prefer to use PNG icons  The usual expected sizes are 16x16  32x32 and  quot as big as possible quot   For example  MacOS Safari uses the 196x196 icon if it is the biggest it can find  What are the recommended sizes  Pick your favorite platforms   Most desktop browsers  16x16  32x32   quot as big as possible quot  Android Chrome  192x192 Google TV  96x96     and others that are more or less documented   The PNG icons are declared with   lt link rel  quot icon quot  type  quot image png quot  href  quot  path to icons favicon-16x16 png quot  sizes  quot 16x16 quot  gt   lt link rel  quot icon quot  type  quot image png quot  href  quot  path to icons favicon-32x32 png quot  sizes  quot 32x32 quot  gt       Beware  Firefox does not support the sizes attribute and uses the last PNG icon it finds  Make sure to declare the 32x32 picture last  it is good enough for Firefox  and that will prevent it from downloading a big picture it does not need  edit  fixed in 2016  Also note that Chrome does not support the sizes attribute and tends to load all declared icons  Better not declare too many icons  edit  fixed in 2018  Mobile platforms This question is about desktop favicon so there is no need to delve too much in this topic  Apple defines touch icon for the iOS platform  iOS does not support non-square icon  It simply rescales non-square pictures to make them square  look for the Kioskea example   Android Chrome relies on the Apple touch icon and also defines a 192x192 PNG icon  Microsoft defines the tile picture and the browserconfig xml file  Conclusion Generating a favicon that works everywhere is quite complex  I advise you to use this favicon generator  Full disclosure  I m the author of this site

User · Answer

16x16 pixels    ico format

User · Answer

The simplest solution in 2021 is to use one    PNG image Simply add this to the head of your document   lt link rel  quot shortcut icon quot  type  quot image png quot  href  quot  img icon-192x192 png quot  gt   lt link rel  quot shortcut icon quot  sizes  quot 192x192 quot  href  quot  img icon-192x192 png quot  gt   lt link rel  quot apple-touch-icon quot  href  quot  img icon-192x192 png quot  gt   The last link is for Apple  home screen   the second one for Android  home screen  and the first one for the rest  Note that this solution does not support  quot tiles quot  in Windows 8 10  It does  however  support images in shortcuts  bookmarks and browser-tabs  The size is exactly the size the Android home screen uses  The Apple home screen icon size is 60px  3x   so 180px and will be scaled down  Other platforms use the default shortcut icon  which will be scaled down too

User · Answer

Seems like your file should be  ico type   Check this post about favicons   http   www html-kit com support favicon image-size

User · Answer

The format of favicon must be square otherwise the browser will stretch it  Unfortunatelly  Internet Explorer  lt  11 do not support  gif  or  png filetypes  but only Microsoft s  ico format  You can use some  favicon generator  app like  http   favicon-generator org

User · Answer

favicon ico is 16x16   lt link rel  shortcut icon  href  favicon ico   gt    And I use these ones to be beautiful in mobile and tablet    lt link rel  apple-touch-icon-precomposed  sizes  144x144  href  img ico144 png  gt   lt link rel  apple-touch-icon-precomposed  sizes  114x114  href  img ico114 png  gt   lt link rel  apple-touch-icon-precomposed  sizes  72x72  href  img ico72 png  gt   lt link rel  apple-touch-icon-precomposed  href  img ico57 png  gt    It s important to use the name  favicon ico  in the root because many browsers will try to find there first

User · Answer

Wikipedia has this to say       Additionally  such icon files can be   either 16  16 or 32  32 pixels in size    and either 8-bit or 24-bit in color   depth  note that GIF files have a   limited  256 color palette entries     I think the best way is to use a 32x32 gif and test it with different browsers

User · Answer

No  you can t use a non-standard size or dimension  as it d wreak havoc on peoples  browsers wherever the icons are displayed  You could make it 12x16  with four pixels of white transparent padding on the 12 pixel side  to preserve your aspect ratio  but you can t go bigger  well  you can  but the browser ll shrink it

[html] Favicon dimensions?

Examples related to html

Examples related to favicon