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

m

mercator

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.

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

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

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

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

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

3

3 revs, 2 users 93%

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.

ICO also allows alpha channel

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

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

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 why would it particularly pick a non-transparent ico instead of a transparent ico?

K

KyleMit

.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="http://sstatic.net/so/favicon.ico"> 
<link rel="apple-touch-icon" href="http://sstatic.net/so/apple-touch-icon.png">

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

PNG can also provide alpha channel

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.

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" />

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 ;)

Á

Álvaro González

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.

Related to this is the fact that IE9 also uses those large icons to pin to the win7 taskbar see: stackoverflow.com/questions/3723715/…

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?

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

p

pmoleri

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.

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

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

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

C

Chris Forrence

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.

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.

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

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.

A

Adria

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

s

s3c

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.

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.

a

aehlke

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

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.

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.

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

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

@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

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

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US