favicon png vs favicon ico - why should I use PNG instead of ICO

Question

Other than the fact that PNG is a more common image format  is there any technical reason to favor favicon png vs  favicon ico   I m supporting modern browsers which all support PNG favorite icons

User · Answer

Avoid PNG in any case if you want reliable IE6 compatibility

User · Answer

PNG has 2 advantages  it has smaller size and it s more widely used and supported  except in case favicons   As mentioned before ICO  can have multiple size icons  which is useful for desktop applications  but not too much for websites  I would recommend you to put a favicon ico in the root of your application  An if you have access to the Head of your website pages use the  tag to point to a png file  So older browser will show the favicon ico and newer ones the png   To create Png and Icon files I would recommend The Gimp

User · Answer

png files are nice  but  ico files provide alpha-channel transparency  too  plus they give you backwards compatibility  Have a look at which type StackOverflow uses for example  note that it s transparent    lt link rel  quot shortcut icon quot  href  quot http   sstatic net so favicon ico quot  gt    lt link rel  quot apple-touch-icon quot  href  quot http   sstatic net so apple-touch-icon png quot  gt    The apple-itouch thingy is for iphone users that make a shortcut to a website

User · Answer

Answer replaced  and turned Community Wiki  due to numerous updates and notes from various others in this thread    ICOs and PNGs both allow full alpha channel based transparency ICO allows for backwards compatibility to older browsers  e g  IE6  PNG probably has broader tooling support for transparency  but you can find tools to create alpha-channel ICOs as well  such as the Dynamic Drive tool and Photoshop plugin mentioned by  mercator    Feel free to consult the other answers here for more details

User · Answer

All modern browsers  tested with Chrome 4  Firefox 3 5  IE8  Opera 10 and Safari 4  will always request a favicon ico unless you ve specified a shortcut icon via  lt link gt   So if you don t explicitly specify one  it s best to always have a favicon ico file  to avoid a 404  Yahoo  suggests you make it small and cacheable   And you don t have to go for a PNG just for the alpha transparency either  ICO files support alpha transparency just fine  i e  32-bit color   though hardly any tools allow you to create them  I regularly use Dynamic Drive s FavIcon Generator to create favicon ico files with alpha transparency  It s the only online tool I know of that can do it   There s also a free Photoshop plug-in that can create them

User · Answer

The theoretical advantage of   ico files is that they are containers than can hold more than one icon  You could for instance store an image with alpha channel and a 16 colour version for legacy systems  or you could add 32x32 and 48x48 icons  which would show up when e g  dragging a link to Windows explorer    This good idea  however  tends to clash with browser implementations

User · Answer

For what it s worth  I do this        lt  -- Favicon - Generic -- gt       lt link rel  icon  href  path favicon-32 x 32 png  sizes  32x32  gt       lt link rel  icon  href  path favicon-57 x 57 png  sizes  57x57  gt       lt link rel  icon  href  path favicon-76 x 76 png  sizes  76x76  gt       lt link rel  icon  href  path favicon-96 x 96 png  sizes  96x96  gt       lt link rel  icon  href  path favicon-128 x 128 png  sizes  128x128  gt       lt link rel  icon  href  path favicon-192 x 192 png  sizes  192x192  gt       lt link rel  icon  href  path favicon-228 x 228 png  sizes  228x228  gt       lt  -- Favicon - Android -- gt       lt link rel  shortcut icon  href  path favicon-196 x 196 png  sizes  196x196  gt       lt  -- Favicon - iOS -- gt       lt link rel  apple-touch-icon  href  path favicon-120 x 120 png  sizes  120x120  gt       lt link rel  apple-touch-icon  href  path favicon-152 x 152 png  sizes  152x152  gt       lt link rel  apple-touch-icon  href  path favicon-180 x 180 png  sizes  180x180  gt    And I still keep the favicon ico in root

User · Answer

Some social tools like Google  use a simple method to get a favicon for external links  fetching http   your domainname com favicon ico  Since they don t prefetch the HTML content  the  lt link gt  tag will not work  In this case  you might want to use a mod rewrite rule or just place the file in the default location

User · Answer

An ico can be a png     More precisely  you can store one or more png inside this minimal container format  instead of the usual bitmap alpha that everyone strongly associates with ico   Support is old  appearing in Windows Vista  2007  and is well supported by browsers  though not necessarily by icon editing software   Any valid png  whole including header  can be prepended by a 6 byte ico header and 16 byte image directory  GIMP has native support  Simply export as ico and tick  Compressed  PNG

[png] favicon.png vs favicon.ico - why should I use PNG instead of ICO?

Examples related to png

Examples related to favicon

Examples related to ico