536

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.

0

9 Answers 9

416

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.

18
  • 7
    Great hint this Dynamic Drive tool! Instantly bookmarked. Thanks! Commented Feb 19, 2010 at 3:01
  • 4
    re tools, it is largely untrue; there are several icon designing tools. I wrote a simple one myself in the past.
    – Christian
    Commented Nov 2, 2010 at 10:39
  • 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
    Commented Feb 15, 2012 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
    Commented Oct 13, 2012 at 21:48
  • 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
    Commented Feb 27, 2014 at 1:50
277

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.

6
  • 83
    ICO also allows alpha channel Commented Aug 24, 2010 at 9: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
    Commented Nov 2, 2010 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
    Commented Feb 4, 2011 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
    Commented Jun 17, 2011 at 11:26
  • @lode why would it particularly pick a non-transparent ico instead of a transparent ico?
    – Rob Grant
    Commented Feb 6, 2015 at 10:48
65

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

4
  • 25
    PNG can also provide alpha channel Commented Aug 24, 2010 at 9:24
  • 15
    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. Commented Aug 26, 2010 at 23:31
  • 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" />
    – frankster
    Commented Apr 30, 2011 at 20:07
  • 5
    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 ;)
    – nanobar
    Commented Nov 16, 2018 at 23:17
29

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.

3
  • Related to this is the fact that IE9 also uses those large icons to pin to the win7 taskbar see: stackoverflow.com/questions/3723715/…
    – GazB
    Commented Jun 26, 2012 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
    Commented Oct 14, 2012 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. Commented Apr 1, 2020 at 10:48
18

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.

3
  • 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... Commented Jan 7, 2012 at 0:26
  • 1
    We are talking about favicons so the issue of support is in fact the opposite of what you say Commented Feb 8, 2015 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
    Commented Jul 20, 2016 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.

3
  • 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. Commented Oct 18, 2012 at 9:40
  • 2
    I know this from work at telly.com, -via paul lindner who is on the google plus team. plus.google.com/117259934788907243749/about
    – jdavid.net
    Commented Nov 1, 2012 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. Commented Jul 31, 2017 at 8: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)".

9

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. There's a million tools for converting PNG to ICO out there. I use PNG2ICO.

Additional tool I use is Derivv. For input I use any square image that is at least 228px * 228px big, and I want to use for the favicon. I name it "favicon.png", so the output is always named as in the HTML snippet above. To avoid typing all of the sizes manually I exported the CSV once, and then I reuse the same one every time. It's contents:

width,height
32,32
57,57
76,76
96,96
128,128
192,192
228,228
196,196
120,120
152,152
180,180
,
0
5

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

9
  • 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 <link> in the page code for modern browsers.
    – Amber
    Commented Aug 27, 2009 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
    Commented Apr 27, 2011 at 14:45
  • 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
    Commented Feb 24, 2017 at 0:42
  • 3
    @aehike you have a fair point, my bad for not checking the timestamp.
    – Orcra
    Commented Feb 24, 2017 at 9:30
  • 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
    Commented Jan 11, 2019 at 16:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.