519

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.

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Jon Galloway
  • 52,327
  • 25
  • 125
  • 193

9 Answers9

403

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.

mercator
  • 28,290
  • 8
  • 63
  • 72
  • 7
    Great hint this Dynamic Drive tool! Instantly bookmarked. Thanks! – Marcos Buarque Feb 19 '10 at 03:01
  • 2
    Adding my thanks for the Dynamic Drive FavIcon. Very very cool! – macbutch Sep 21 '10 at 00:18
  • 4
    re tools, it is largely untrue; there are several icon designing tools. I wrote a simple one myself in the past. – Christian Nov 02 '10 at 10:39
  • @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: http://www.telegraphics.com.au/sw/#icoformat. I think I stopped using that for some reason, but I can't remember why. It works fine too. – mercator Nov 02 '10 at 12:37
  • 2
    Don't use photoshop for small icons...don't ask why, just don't. It dirties icon's format reputation. :) – Christian Nov 02 '10 at 19:57
  • 4
    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 :) – Scott B Feb 15 '12 at 23:09
  • 4
    @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). – Christian Oct 13 '12 at 21:48
  • 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? – waldyrious Feb 05 '13 at 13:02
  • @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](https://en.wikipedia.org/wiki/Pngcrush) (`pngcrush -c 6 input.png output.png`) to force it to 32-bit to see if Dynamic Drive can handle it then. – mercator Feb 05 '13 at 15:36
  • @mercator it was 32-bit. For reference, here's the [original](http://i.imgur.com/WZNRkcY.png) and Dynamic Drive's [48px icon](http://i.imgur.com/IDjksJE.png). Both were put in a with a black background to make the transparency change and white "border" more visible. – waldyrious Feb 08 '13 at 22:13
  • Another tool that I mostly use to create favicons is [FavIcon (htmlkit)](http://favicon.htmlkit.com/favicon/). 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. – Avatar Feb 14 '14 at 15:23
  • 2
    Call me crazy, but I've made favicons by creating .png (full transparency) and just renaming the extension. No problems so far. Thoughts? – mikevoermans Feb 15 '14 at 15:58
  • 4
    @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. – rvighne Feb 27 '14 at 01:50
  • 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. http://www.icoconverter.com/ – Lawrence Kesteloot Aug 20 '14 at 00:32
  • 2
    @mikevoermans You are crazy. But the people that allow it to work are crazier. – Pharap May 30 '15 at 15:13
  • https://realfavicongenerator.net/ tool looks promising too. I have just used it once though. – Ram Patra Sep 25 '17 at 20:33
  • This is a great tool, I use to generate my favicons in https:://favicon.cc but this one you suggested is better, thanks! – yehanny Mar 24 '20 at 20:28
270

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.

Amber
  • 507,862
  • 82
  • 626
  • 550
  • 82
    ICO also allows alpha channel – Álvaro González Aug 24 '10 at 09:25
  • 62
    -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. – Christian Nov 02 '10 at 10:37
  • 29
    -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. – gagarine Feb 04 '11 at 22:54
  • 4
    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. – Lode Jun 17 '11 at 11:26
  • @lode why would it particularly pick a non-transparent ico instead of a transparent ico? – Rob Grant Feb 06 '15 at 10:48
  • Can't help but notice that this accepted answer doesn't actually answer the question. – Graham Charles Jul 21 '22 at 18:23
66

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

Samathingamajig
  • 11,839
  • 3
  • 12
  • 34
Wouter van Nifterick
  • 23,603
  • 7
  • 78
  • 122
28

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.

Álvaro González
  • 142,137
  • 41
  • 261
  • 360
  • Related to this is the fact that IE9 also uses those large icons to pin to the win7 taskbar see: http://stackoverflow.com/questions/3723715/where-does-ie9-look-for-the-large-favicons – GazB Jun 26 '12 at 10:56
  • 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? – Christian Oct 14 '12 at 17:13
  • 3
    Please note that this answer was written on 2009. The browser scene at the time was vastly different than it's now. – Álvaro González Apr 01 '20 at 10:48
17

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.

pmoleri
  • 4,238
  • 1
  • 15
  • 25
  • 3
    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... – Roman Starkov Jan 07 '12 at 00:26
  • 1
    We are talking about favicons so the issue of support is in fact the opposite of what you say – David Heffernan Feb 08 '15 at 21:24
  • 1
    +1 Addresses the original question and doesn't get bogged down in transparency. Also mentions an app which *does* support .ico format. – kovacsbv Jul 20 '16 at 17:08
13

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.

Chris Forrence
  • 10,042
  • 11
  • 48
  • 64
jdavid.net
  • 741
  • 9
  • 16
  • 1
    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. – Alexei Tenitski Oct 18 '12 at 09:40
  • 2
    I know this from work at http://telly.com, -via paul lindner who is on the google plus team. https://plus.google.com/117259934788907243749/about – jdavid.net Nov 01 '12 at 20:48
  • 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. – Stijn de Witt Jul 31 '17 at 08:08
10

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

Adria
  • 8,651
  • 4
  • 37
  • 30
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.

s3c
  • 1,481
  • 19
  • 28
  • 1
    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. – s3c Jul 08 '20 at 10:23
5

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

aehlke
  • 15,225
  • 5
  • 36
  • 45
  • 21
    There's no reason why you can't use both - an ico in the directory tree for IE6 and a PNG specified via a `` in the page code for modern browsers. – Amber Aug 27 '09 at 22:47
  • 10
    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. – Mr_Chimp Apr 27 '11 at 14:45
  • @Mr_Chimp because png is an open standard and more forward-looking? It's one extra line of markup. – Wyatt Ward Oct 30 '16 at 19:51
  • 9
    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 – aehlke Feb 24 '17 at 00:42
  • 3
    @aehike you have a fair point, my bad for not checking the timestamp. – Orcra Feb 24 '17 at 09:30
  • @aehike, might I suggest you delete this answer? It is not really relevant today - and, you can earn the 'Disciplined' badge from SO! :) – Apps-n-Add-Ons Jan 09 '19 at 19:03
  • 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. – aehlke Jan 10 '19 at 20:13
  • @aehlke - 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..... – Apps-n-Add-Ons Jan 10 '19 at 20:45
  • 1
    @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 – aehlke Jan 11 '19 at 16:37