Favicon Standard – 2023 – svg, ico, png and dimensions? [duplicate]

by

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 180×180 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="https://stackoverflow.com/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 192×192 PNG icon, transparency allowed and encouraged.

The manifest is declared with:

<link rel="manifest" href="https://stackoverflow.com/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 16×16, 32×32 and 48×48 icons:

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

Other browsers

Other browsers may have dedicated icons. For example Coast by Opera is looking for a 228×228 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.

More Related Contents:

  1. Favicon: .ico or .png / correct tags? [duplicate]
  2. How to draw human body in html5 svg and roate it in 360degree [closed]
  3. Fill SVG path element with a background-image
  4. How to modify the fill color of an SVG image when being served as background image?
  5. SVG drop shadow using css3
  6. How to apply a style to an embedded SVG?
  7. Adding a favicon to a static HTML page
  8. SVGs not scaling properly in IE – has extra space
  9. Add a background image (.png) to a SVG circle shape
  10. Favicon not showing up in Google Chrome [duplicate]
  11. html/css hexagon with image inside
  12. What is currently the best way to get a favicon to display in all browsers that support Favicons? [duplicate]
  13. make an html svg object also a clickable link
  14. Using base tag on a page that contains SVG marker elements fails to render marker
  15. Do you have to include ?
  16. Linking to CSS in an SVG embedded by an IMG tag
  17. Creating a ‘New’ spiky label with 24 or above point burst
  18. Extracting SVG from Font Awesome
  19. How to cut a circular part from an image?
  20. Method to convert HTML5 canvas to SVG?
  21. SVG image inside circle
  22. Draw double curved item with beveled edges
  23. How to get ScrollBars in SVG?
  24. div with triangle at the bottom with background image
  25. How to set favicon.ico properly on vue.js webpack project?
  26. How to render svg elements with crisp edges while still keeping anti-aliasing?
  27. Create a Reverse Clip-Path – CSS or SVG
  28. How to curve the div from bottom with image background
  29. Resizing SVG in html?
  30. Emulate IE7 for IE8 but not for IE9 using “X-UA-Compatible”

Leave a Comment