Which Versions of Ie Support Png Favicons

Which versions of IE support PNG favicons?

The short answer:

IE11 is the first version of Internet Explorer to support the direct usage of .png and .gif file format favicons.

Why the confusion?

As you mentioned, some seem to have implied that .png favicons are supported in IE7+, while others have stated the opposite.

I believe the confusion is caused by the fact that .png images can be used inside .ico files (.ico files are just image container files after all) as of IE7, which is true .

However, previously, direct .png favicons were only ever compatible with the other major browsers (Chrome, Firefox etc).

Proof of direct .png Favicon compatibility in IE11 and beyond:

The File Format support section on the Favicon wikipedia page resembles the following:

[20] points to an article called Fun with Favicons written by Eric Law, an ex-Microsoft employee and 2013 Microsoft MVP.

The article includes the following:

IE11 shows some significant improvements in Favicon support:

• Favicons may be changed dynamically using script.
• The Favicon URL may point directly at a GIF file.
• The Favicon URL may point directly at a PNG file.

Note though, that it may not be the best idea to use direct .png favicons due to compatibility issues with older versions of IE, as mentioned by Eric in the same blog post:

"Of course, just because you can point at a .png or .gif doesn't mean
you should-- for both compatibility and experience reasons (remember
.ico can hold multiple image sizes to best suit the display context)
you should continue to use a .ico as your favicon."

Another article written by Mr.Law, called IE11 Changes, also briefly mentions IE11's support for direct .png and .gif file format favicons.

Proof of .png Favicon incompatibility in IE10 and before:

There are many official and non official sources proving that IE10 and before only support .ico Favicons.

As of 13/10/2013, the 'file format support' section of the Favicon Wikipedia page resembles the following:

A 2012 article on MSDN called How to Add a Shortcut Icon to a Web Page contains the following snippet:

"Note that shortcut icons in image formats other than .ico — for
instance, .bmp, .gif, or .png — cannot be displayed in Internet
Explorer."

A few quotes from non-official sources:

"First, IE requires an actual icon file. Not just a jpg or png renamed
with an ico extension." - Greg Hostetler, Setting up Favicons in IE7..

"It must be windows icon format instead of PNG or GiF, IE8 just
supports ICO." - xyberbit, MSDN..

"On the other hand, Internet Explorer does not support PNG favicons,
but it will ignore the PNG favicon and use the ICO favicon, regardless
of the order in which they are declared." - Jonathon T.Neal.

"One. Big. Problem. IE10 does not support conditional comments, and it
does not support PNG favicons." - Jonathon T.Neal

Other queries answered:

Can I just re-name the filetype from .png to .ico and vice-versa to
get around this incompatibility issue?

Sadly not (tested by @Truerror on the 17/06/2013 in IE10). IE10 and before requires an actual icon (.ico) file.

Should it be an 16x16 .ico?

Here's what Microsoft have to say about that:

"Consider creating both a 16x16-pixel icon as well as a 32x32-pixel
icon (and larger, bandwidth permitting), since on high-DPI displays,
Internet Explorer may stretch the icon to fit the available space."

internet explorer 9 not showing .png favicon

The W3C method does not seem to agree with IE9:

» W3C method here

Not sure what's going on here. Can't get an icon to show up in IE9 regardless of method, and I've tried them all, emptied the cache, etc. Mainly responding to this thread to point out that the W3C method differs from what jacktheripper posted in February.

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

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.

favicon not working in IE

Right you've not been that helpful (providing source would be have been really useful!) but here you go... Some things to check:

Is the code like this:

<link rel="icon" href="http://www.example.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.example.com/favicon.ico" type="image/x-icon" />

Is it in the <head>?

Is the image a real ico file? (renaming a bitmap is not a real .ico! Mildly different format)

Does it work when you add the page as a bookmark?

Favicon Standard - 2022 - svg, ico, png and dimensions?

Disclaimer: I'm the author of RealFaviconGenerator, which I expect to be up-to-date (mostly, see below). So don't be surprised if this answer matches what RFG generates.

The one-size-fits-all myth

There is no "one size fits all" icon. You can't create a single SVG icon and expect it to work everywhere.

From a technical point of view, a single SVG icon would be a good thing. But from a UI and UX point of view, this is not a desirable outcome. Compare iOS and Android. On iOS, all home screen icons are squares with rounded corners (iOS fills transparent regions of Touch icons with black). On Android, home screen icons often use non-square shapes and transparency (including Google app icons). Submit a single touch icon and Android Chrome will use it. But you won't be able to match Android icon guidelines, whereas a dedicated icon could.

So I advice to deliberately avoid using a single icon. Rather target each platform individually, when possible (this is not always the case).

Icons, platform per platform

iOS Safari

iOS Safari expects a touch icon. As of today, this is a 180x180 PNG image. This image should not use transparency and its corners will be automatically rounded when added to home screen. Declared with:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

Over the years, this icon has become the "default high resolution icon" for many browsers. So you will find it elsewhere, when adding to bookmark, etc.

Android Chrome

Android Chrome relies on the Web App Manifest. Although this manifest is not dedicated to Android Chrome, it is currently its main supporter. So at the moment, it is still quite safe to consider the icons from the Web App Manifest to be for Android Chrome.

As the name suggests, the Web App Manifest is for, well, web apps. But any web site can use it as a way to reference some icons.

Android expects a 192x192 PNG icon, transparency allowed and encouraged.

The manifest is declared with:

<link rel="manifest" href="/icons/site.webmanifest">

Edge and IE 12

Microsoft introduced the browserconfig, an XML document which lists various icons that fit the Metro UI.

The file and background color are declared with:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

Classic desktop browsers

Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE... This is were things are a little more blurry. Historically, there was a single favicon.ico file, still supported. However, most recent browsers rather pick PNG icons, which are lighter. Plus some browsers are not able to select the proper icon in the ICO file (this format can embed several versions of an icon), leading a low resolution icon being wrongly used.

One could be tempted to drop the old favicon.ico entirely. Although I would like to make this leap in RFG, I didn't run the necessary tests to evaluate the impact on the old browsers.

Thus the combo I still recommend today, with favicon.ico embedding 16x16, 32x32 and 48x48 icons:

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

Other browsers

Other browsers may have dedicated icons. For example Coast by Opera is looking for a 228x228 icon. The need to focus on these browsers is not obvious. They usually use the touch icon or other icons when they cannot find "their" icon.

Conclusion

As announced at the beginning, this is exactly what RealFaviconGenerator creates.

Favicon: .ico or .png / correct tags?

For compatibility with all browsers stick with .ico.

.png is getting more and more support though as it is easier to create using multiple programs.

for .ico

<link rel="shortcut icon" href="http://example.com/myicon.ico" />

for .png, you need to specify the type

<link rel="icon" type="image/png" href="http://example.com/image.png" />

Cakephp Favicon on Internet Explorer

Thanks everybody for the answers

Fixed the problem with routes

Router::redirect(
    '/favicon.ico',
   'url.ico', array('status' => 302)
);

Favicon format GIF or ICO?

Browsers started supporting it. Also, ICO files are an old image file format for icons in Microsoft Windows. Since ICO is vendor specific, some choose to go with GIF.

Not to mention that there is an abundance of .gif editors, and few ICO editors.

After reviewing supported formats, your best bet is to go with PNG files if you are trying to get away from ICO.

---

Related Topics