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.

Because

Answer 1

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.

Markmarkdown

ICO also allows alpha channel – Fleischer

-1 ICO supports multiple resolutions including full alpha channel. By the way, 1-bit alpha is known as "transparency". The only real limit ICO has had was with icons larger or equal to 256 in length (any direction), though it's been overcome several times. – Karlee

-1 .ico also allow multiple resolution in one file (16x16 and 32x32 for example). So the icone stay nice when you create a shortcut on a desktop. – Nels

Most browsers favor the favicon.ico in the root over the linked one. With your solution most browsers would pick the non-transparent .ico instead of the linked png. – Darr

@lode why would it particularly pick a non-transparent ico instead of a transparent ico? – Bewick

Can't help but notice that this accepted answer doesn't actually answer the question. – Meuser

Answer 2

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 <link>. 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.

Dissert

Great hint this Dynamic Drive tool! Instantly bookmarked. Thanks! – Eggshell

Adding my thanks for the Dynamic Drive FavIcon. Very very cool! – Fortitude

re tools, it is largely untrue; there are several icon designing tools. I wrote a simple one myself in the past. – Karlee

@Christian, I know there are plenty dedicated icon tools that can do it; there's nothing really special about 32-bit color. But the only thing I ever really need an .ico for is for a favicon, so I tend to rely on free, online tools... I've also used this Photoshop plug-in, though: telegraphics.com.au/sw/#icoformat. I think I stopped using that for some reason, but I can't remember why. It works fine too. – Dissert

Don't use photoshop for small icons...don't ask why, just don't. It dirties icon's format reputation. :) – Karlee

For those that don't have $650 bucks for Photoshop, you can use pixlr.com (for free) to create, edit and save .png files with full layering and transparency :) – Fan

@Pacerier It's incredibly difficult to get .ico editing in PS. And even if you do, the end result is soo bad, you'd think .bmp was a better format (it adds a lot of meta-data making re-editing a huge pain). – Karlee

The Dynamic Drive favicon generator doesn't seem to be all that great. I tried creating a favicon from a png file and it made the whole image more transparent than it was before; furthermore, if the extra size options are marked, the 48x48 layer has a white border between opaque and transparent regions. Maybe they changed the code somehow? – Gregoriagregorian

@Waldir Is your PNG image by any chance an 8-bit PNG with alpha transparency? If you're on Linux you can use the file command to find out (among other things, it'll say 8-bit/color RGBA for 32-bit or 8-bit colormap for 8-bit). Or try using e.g. pngcrush (pngcrush -c 6 input.png output.png) to force it to 32-bit to see if Dynamic Drive can handle it then. – Dissert

@Dissert it was 32-bit. For reference, here's the original and Dynamic Drive's 48px icon. Both were put in a with a black background to make the transparency change and white "border" more visible. – Gregoriagregorian

Another tool that I mostly use to create favicons is FavIcon (htmlkit). From the readme: "package has 2 image formats in a single file: 16*16-pixel 256-color and 32*32-pixel 256-color." - I made a test the generator from the answer above gave me a file of 2KB, the tool I mentioned gave me a 6KB file. – Nowhither

Call me crazy, but I've made favicons by creating .png (full transparency) and just renaming the extension. No problems so far. Thoughts? – Gecko

@mikevoermans: It's still read as a PNG; most modern browsers don't care so much about file extensions. BTW, this is the best answer and should be the accepted one. – Bikaner

I use icoconverter, which supports 32-bit (transparent) ico files. Note that it checks 48x48 by default, but that's probably unnecessary. 32x32 is fine. icoconverter.com – Taipan

@Gecko You are crazy. But the people that allow it to work are crazier. – Foreyard

realfavicongenerator.net tool looks promising too. I have just used it once though. – Weatherproof

This is a great tool, I use to generate my favicons in https:://favicon.cc but this one you suggested is better, thanks! – Affecting

If you're on a Mac, I highly recommend Image2Icon. It creates beautiful folder icons too. Pro version has a one time fee but I use it almost everyday and the pro version is not too pricy. img2icnsapp.com – Findlay

Answer 3

.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):

<link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"> 
<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png">

The apple-itouch thingy is for iphone users that make a shortcut to a website.

Nu

PNG can also provide alpha channel – Fleischer

yeah, my point was that ico's can do everything that png's can do (alpha-transparency) as a favicon, and additionally they are supported by all browsers since year 0. – Nu

according to wikipedia internet explorer will fail to support a line like this: <link rel="icon" type="image/vnd.microsoft.icon" href="example.com/image.ico" /> – Heuristic

Chances are the website doesn't support browsers since year 0 so why bother? Try and load a modern website in IE6 and see what happens ;) – Girondist

Answer 4

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.

Portaltoportal

Related to this is the fact that IE9 also uses those large icons to pin to the win7 taskbar see: #3724215 – Bedazzle

Uhm, theoretical? The same icon shipped with Windows 7 can be used in Windows 95 in 8bit color mode. I think that's quite practical, no? – Karlee

Please note that this answer was written on 2009. The browser scene at the time was vastly different than it's now. – Fleischer

Answer 5

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.

Pimental

Not so much for websites? Wait till everyone starts using retina-like displays; suddenly there will be a very good reason why one might to include a 32x32 or larger size in their favicon... – Embankment

We are talking about favicons so the issue of support is in fact the opposite of what you say – Aorangi

+1 Addresses the original question and doesn't get bogged down in transparency. Also mentions an app which does support .ico format. – Mckinley

Answer 6

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 <link> 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.

Resee

Don't know whether it is true or false but it was the deciding argument for me to go and create favicon.ico in root in addition to png i have. – Poi

I know this from work at telly.com, -via paul lindner who is on the google plus team. plus.google.com/117259934788907243749/about – Resee

Placing the favicon in the root is the de facto standard, so I would adhere to it for reasons such as mentioned in this answer. – Tsarina

Answer 7

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)".

Bannerman

Answer 8

For what it's worth, I do this:

    <!-- Favicon - Generic -->
    <link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
    <link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
    <link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
    <link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
    <link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
    <link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
    <link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
    <!-- Favicon - Android -->
    <link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
    <!-- Favicon - iOS -->
    <link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">

And I still keep the favicon.ico in root.

Mitman

Also I use derivv.com to get all sizes from the oversized square favicon.png. Set all sizes once, then export CSV and have it somewhere for quick access. – Mitman

Answer 9

Avoid PNG in any case if you want reliable IE6 compatibility.

Einsteinium

There's no reason why you can't use both - an ico in the directory tree for IE6 and a PNG specified via a <link> in the page code for modern browsers. – Markmarkdown

Why would you use both? If you're going to bother making an ico what benefit would using a png as well have? Surely it's just extra work and extra code. – Linzer

@Linzer because png is an open standard and more forward-looking? It's one extra line of markup. – Linet

Hi @Orcra - I think you would not find it so funny had you been reading this ~8 years ago when I wrote this answer, and had to consider things like IE6 :) StackOverflow allows editing answers so please feel free to update it yourself to something relevant today – Einsteinium

@aehike you have a fair point, my bad for not checking the timestamp. – Vanvanadate

@aehike, might I suggest you delete this answer? It is not really relevant today - and, you can earn the 'Disciplined' badge from SO! :) – Moleskin

hi @CFPSupport - thanks for the suggestion. I don't actively maintain my old StackOverflow answers. I believe SO has features to let you flag an answer for deletion. – Einsteinium

@Einsteinium - yes, I could flag it, but that is for a 'serious problems' sort of thing - that would give a negative strike, I think..... Well, anyway, you have a good rep and I'm just getting started.... - was looking through how to get more badges and then I ran across this post. I won't flag it (but I'd take that badge if I could! :) Someday I'll have enough good answers to afford deleting one! See you around SO..... – Moleskin

@CFPSupport apologies for the pushback - I could manage this specific answer, but I categorically feel no ongoing responsibility for actively managing and grooming all the content I posted here nearly a decade ago so I'm hoping for a better systemic solution – Einsteinium