如何强制显示 favicon.ico 而不是 favicon.png？

Question

This is how I have set up the icon-links in my header.

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="/screen/favicon.png" sizes="192x192">

My 16x16 favicon.ico shows a simplified version of my logo, which looks much better than a downscaled version of a larger PNG. For the touch-icons on mobile devices I have created a 192x192 png of my original logo. Since I added that larger PNG to my header, it is not only used (correctly) as a touch-icon, but also replaces the 16x16 favicon.ico. Thus on the browsers the downscaled png-version is display. I dislike it, cause the ico-version looks better.

Is there any way, to force the display of the ico-version of my favicon in browsers?

Answer 1

If the reason of your high-resolution image/png icon is Android, then you should declare it via a web manifest .

This is what RealFaviconGenerator does: it only declares low-resolution image/png icons in the HTML. So desktop browsers only pick those, whereas Android get the high resolution icons it expects . Even if you don't plan to use the service, you can generate a fake set of icons and adapt the generated code and files to your needs.

Full disclosure: I'm the author of this service.