Html 5 Favicon - Support?

Adjusting to browser eccentricities

It's vital to identify and navigate the peculiarities of various browsers. Let's dive into some crucial aspects:

Internet Explorer Vol. 11: The PNG Saga

Though Internet Explorer (IE) lagged behind in supporting PNG favicons, it caught up by Version 11. Make use of conditional comments for IE9 and prior, connecting a 32x32 .ico favicon, preferred by these legacy versions.

<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->


Microsoft Tile Story: A New Dawn

IE11 and Edge have introduced custom tiles for Windows 8.1+ . Design and link a .xml file for Windows to use, providing additional metadata for creating a mosaic of pinned tiles on the start screen.

<meta name="msapplication-TileColor" content="#fefefe">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">


Mobile pandering - an essential!

As the mobile web audience proliferates, it's vital to cater to devices with apple-touch icons and icons in manifest.json. These ensure smooth visuals when your site is saved to home screens. The apple-touch-icon should not have the rel="apple-touch-icon-precomposed" as it’s been given the iOS pink slip (deprecated); devices now automatically deal with gloss, effects, and your taxes (not really, but almost).

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">


The niche browser notches

Opera’s Coast browser and Google TV also harbour specific favicon dimensions they look for, such as a 228x228 icon and a 96x96 icon, respectively. It's always hack-o-clock, so please check documentation for niche browser specifics.

Favicon Strategy for the Wide Web

To deliver the most holistic favicon experience, consider these action points:

Favicon for every browser

By providing a native .ico file for backward compatibility and a .png version for modern browsers, you ensure all browsers eat from your plate.

<link rel="icon" href="path/to/favicon.ico" sizes="32x32">
<link rel="icon" href="path/to/favicon.png" sizes="192x192">


Gearing up for niche devices

Devices like Windows Phone are pickier, requesting a 768x768 square image when your site is pinned on the start screen:

<meta name="msapplication-TileImage" content="path/to/zzz-768x768.png">


Stay tuned to evolving best practices - much like your favorite thriller show, the web standards screenplay is always changing! The story arch of apple-touch-icon-precomposed is an apt illustration.

Ensure you specify the size of every favicon; for browsers without solid size attribute support, this assists them in picking the perfect favicon to display.