Masa Kudamatsu

Posted on Jan 27, 2021 • Edited on Aug 11, 2023 • Originally published at Medium

Definitive edition of "How to Favicon" in 2023

#favicon #html

TL;DR

In the <head> element of your HTML document, insert

<link rel="icon" href="/favicon.ico" sizes="48x48" ><!-- REVISED (Aug 11, 2023)! -->
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"><!-- REVISED (Aug 11, 2023)! -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="manifest" href="/site.webmanifest" />

where site.webmanifest is a JSON file with the content like this:

{
    "name": "Your website name",
    "short_name": "A shorter version of your website name",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#4a4a4a",
    "background_color": "#4a4a4a",
    "display": "standalone"
}

Change the values of "theme_color" and "background_color" to your favicon design specification

Then create a favicon in the SVG format.

Convert this SVG image into favicon.ico, apple-touch-icon.png, android-chrome-192x192.png, and android-chrome-512x512.png with RealFaviconGenerator.

Finally, make sure that the favicon.ico file is named as it is (don’t change it) and saved in the root directory. (Otherwise MacOS Safari and IE won’t recognize the favicon.)

That’s all! :-)

Motivation

I thought adding a favicon to my website was a simple thing: create a file called favicon.ico, save it in the root directory, and add to the <head> section of the HTML file the following code:

<link rel="icon" href="/favicon.ico" type="image/x-icon">

I was wrong.

In the 2020s, the use of a favicon is a lot more advanced, partly because we need to take care of shortcut icons on iOS and Android home screens. Today a favicon’s color scheme also needs to be responsive to the dark theme.

However, there is no consensus on exactly how we should use favicons. Adam, Nathan and Patrick (2021) show how diverse (and often wrong) the favicons of the top 100,000 most popular sites are, in terms of image size, image formats, and how <link rel="icon"> is written in the HTML code.

It’s a nightmare for any web developer who wants to add a favicon to the site they’re developing.

One source of confusion is that people don’t back up their claims. It turns out that quite a few claims on favicons are simply wrong.

In this article, I do my best to back up each piece of argument by citing the sources of information extensively. Hopefully, what’s written below is the definitive answer to "How to Favicon in 2023".

Literature Review

(Skip this little subsection if you just want to learn the recommended HTML code.)

In the past few years, different people suggested different solutions on how to use favicons. Gant (2019), Schwarz (2020), RealFaviconGenerator (n.d.), Bailey (2020), and Boulanger (2020) did not agree with each other.

Disagreement is not limited to the blogsphere. Major websites do not seem to agree, either:

“Top websites are surprisingly inconsistent in the way they declare icons (via elements in the page’s head).” (Vidas 2019)

"But apple.com, as of this writing, has absolutely no markup for any favicon. They have a /favicon.ico file and nothing else—the old fashioned thing that still works everywhere." (Reamsnyder 2021).

More recently, Sitnik (2020), whose article was cited by Coyier (2021a), proposed the minimalist solution, cutting down to just 4 lines of code in HTML with one JSON file and five favicon files. However, this proposal was partly rejected by Reamsnyder (2021).

Sitnik (2020) then updated his proposed solution, in response to subzey (2021). In the previous version of this article, I adopted this solution as the recommended way of using favicons. As a record, this was the solution:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="manifest" href="/site.webmanifest" />

However, in 2023, this solution no longer works due to changes in how Chromium browsers behave (as reported by Waldron (2023) and Noakes (2023a), both of which are the comments to this article).

Thankfully, xcuses (2023a), another comment to this article, has proposed a work around. This solution, along with several alternatives, is tested against the latest versions of Chrome, Firefox and Safari and confirmed as the best solution by Noakes (2023b).

Accordingly, on August 11, 2023, I revised this article to recommend the solution by xcuses (2023a) as how to favicon in 2023.

Okay, a long introduction is finally over. Let’s get into the detail.

1. SVG favicon

1.1 Future-proof

One reason for the favicon nightmare is that, as the time passes, browsers and OS’s can handle higher resolution images. With PNG images, this means we need to prepare the same image in various dimensions (see Bernard 2019). With an SVG image, one single file takes care of all the dimensions, including the future ones. As a future-proof solution, we should use an SVG favicon.

To illustrate the future-proof aspect of an SVG favicon, go back in time to May 2019, when Google started showing the webpage’s favicon in its search results (Leach 2019):

Left: Google search results before May 2019; Right: after May 2019 (Image source: Leach (2019))

Google requires your favicon to be a multiple of 48px square (48x48, 96x96, 144x144, etc.) (Google Developers, n.d.). But if your favicon had been an SVG image, you wouldn’t have had to create another version of the favicon image file after hearing the news that Google search results would start showing favicons.

1.2 HTML code

To use an SVG image as your site’s favicon, add the following to the <head> element of your HTML file:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Boulanger (2020) claims that the type attribute is unnecessary. But Can I Use (2021a) says all the browsers that support SVG favicons (Chrome 80+, Edge 80+, Firefox 41+, Opera 67+) require "the served mime-type to be image/svg+xml". (Well, my understanding is limited on this issue: Robinson (2022), a comment to this article, says that the type attribute is indeed unnecessary.)

1.3 Other benefits of SVG favicons

One additional benefit of SVG favicons is that you can toggle its color scheme for the dark mode. Sitnik (2020) shows the following example code for an SVG image file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <style>
    @media (prefers-color-scheme: dark) {
     .a { fill: #f0f0f0 } 
    }
  </style>
  <path class="a" fill="#0f0f0f" d="…" />
</svg>

This way, the fill color changes from #0f0f0f to #f0f0f0 if the user sets the dark theme on their browser. (For detail on the prefers-color-scheme media query, see Kravets 2021.)

For other benefits of an SVG favicon, see Bailey (2020).

2. The `.ico` favicon (for Safari and IE)

2.1 Safari doesn’t support SVG favicons

In July 2023, the browsers fully compatible with SVG favicons account for 73.81% of global page views (Can I Use 2023a). Not surprisingly, IE doesn’t support SVG favicons. But Safari, even the latest version, doesn’t fully support SVG favicons, either. It only supports a colorless SVG image with one single color being specified in the <link> tag (see Section 5 below for detail). As pointed out by Reamsnyder (2021), such an SVG favicon prevents us from toggling the color scheme by the user’s choice of the dark mode, as mentioned above.

Therefore, we need a fallback for these “legacy” browsers, by using an .ico favicon that every browser supports, even IE 5.

2.2 Creating an `.ico` file

Creating an .ico file requires some dedicated software. RealFaviconGenerator makes life very easy. It allows you to upload an SVG favicon file and then download an .ico file version that corresponds to 16x16, 32x32, and 48x48 (an .ico file can contain multiple dimensions of the same PNG image). See RealFaviconGenerator (n.d.) for detail.

2.3 Referring to the `.ico` favicon

NOTE: This section is substantially revised on August 11, 2023 (equivalent of “breaking change” in semantic versioning terminology), to reflect the discussions in the comment section of this article.

To refer to the .ico version of a favicon, use the following HTML code (xcuses 2023a):

<link rel="icon" href="/favicon.ico" sizes="48x48">

Note the sizes="48x48" attribute. This is a trick to fool the latest versions of Chromium browsers (Chrome, Edge, Opera, etc.) so that they will pick the SVG favicon rather than the .ico version of the favicon.

What’s happening is as follows. If we don’t use sizes="48x48" as follows:

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Chromium browsers will then use favicon.ico instead of favicon.svg. It was reported as a “bug” (Anonymous 2020; see also RealFaviconGenerator 2020 and subzey 2021) though Chromium developers appear to think of it as expected behavior.

This effectively disables the above-mentioned SVG image’s capability of toggling the favicon color scheme by the user’s choice of the dark mode (Armadillo 2020). This is undesirable.

Reamsnyder (2021) explains the reason behind this behavior of Chrome:

.ico files typically contain a few different sizes of icons, one of which might be exactly the size the browser needs at that moment, so Chrome thinks that’s a great thing to use even if there’s a perfectly flexible .svg available. (Reamsnyder 2021)

To fully understand the issue, we need to know how browsers should behave when there are multiple <link rel="icon"> statements:

If there are multiple <link rel="icon">s, the browser uses their media, type, and sizes attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used. If the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. (MDN Contributors 2021a)

Now we understand the issue. What is a workaround? The answer is the sizes attribute for the <link> element, which does the following:

This attribute defines the sizes of the icons for visual media contained in the resource. It must be present only if the rel contains a value of icon or a non-standard type such as Apple’s apple-touch-icon. (MDN Contributors 2021b)

By setting sizes="48x48", Chromium browsers think it is too large to use because the browser tab favicon whose size is typically 16x16 (or 32x32 on retina displays) (Cardello 2023). Indeed, xcuses (2023b) reports that, with sizes="16x16" or sizes="32x32", some versions of Chrome choose to use the .ico file instead of the SVG one.

Given that “if several icons are equally appropriate, the last one is used” (MDN Contributors 2021a), it is best to declare the .ico favicon first:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Chromium browsers (and Firefox) will then choose to use the SVG favicon file, even when they consider both files equally appropriate. And Safari (and IE) uses the .ico favicon file.

This expected behavior of browsers is confirmed by Noakes (2023b), who extensively tested the favicon behavior of Chrome, Firefox, and Safari.

2.4 Adding `sizes="any"` for referring to the SVG favicon

In addition to adding sizes="48x48" for referring to the .ico favicon, both xcuses (2023a) and Noakes (2023b) recommend adding sizes="any" for referring to the SVG favicon. So the HTML code should be:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">

As of 2023, whether sizes="any" is included or not, browsers behave as expected (Noakes 2023b). However, if I understand correctly, the addition of sizes="any" makes it more likely in the future as well that the SVG favicon will be chosen over the .ico favicon by Chromiumm browsers.

Apparently, Chromium browsers has changed the way they interpret sizes="any" since December 15, 2022. According to Söderquist (2022), a commit message on the Chromium repo, Chromium browsers used to ignore <link rel="icon"> if it includes sizes="any".

This is why, back in 2021, the recommended way of fooling Chromium browsers to ignore the .ico favicon was:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

It was a hack discoverd by subzey (2021).

However, with the commit made on December 15, 2022 to fix a reported bug, Chromium browsers now regard sizes="any" as the indication of priority. Consequently, with the above hack, Chromium browers no longer ignore the .ico favicon.

To make sure Chromium browsers treat the SVG icon as the most desirable, therefore, adding sizes="any" is recommended. (This is my own interpretation. Correct me if you are an expert on favicon file selection algorithms).

2.5 Playground

I recommend playing with a favicon demo webpage by subzey (2021). Open it with DevTools of Chrome and Safari, respectively, and edit HTML. You’ll see which favicon is shown.

2.6 Other topics

(Skip this section if you are only interested in the recommended HTML code for favicons.)

Before closing Section 2, let me discuss three pieces of advice on favicons found on the web.

(1) PNG favicon for Safari?

Reamsnyder (2021) recommends creating a PNG version of the favicon image for Safari, and refer to it with the <link> tag:

<link rel="icon" href="/icon.png" type="image/png">
<link rel="icon" href="/icon.svg" type="image/svg+xml">

As explained above, browsers will pick the most appropriate favicon file if there are multiple <link rel="icon"> tags, and if there is a tie, they pick the last one. So SVG-compatible browsers will pick the SVG favicon with this HTML code.

Personally, however, I don’t really see the benefit of creating an PNG file for Safari. It is going to be used as a tiny image on the browser tab. It won’t pay off to have a higher resolution PNG image instead of a low resolution ICO image. RealFaviconGenerator (n.d.) argues that the 32x32px resolution is enough.

(2) The alternate attribute value

To prevent browsers from choosing the .ico file instead of the SVG file, Bailey (2020) suggests using the alternate attribute value, like so:

<link rel="alternate icon" href="/favicon.ico">

However, some people report that the alternate attribute value doesn’t work with Chrome 84 (Armadillo 2020). After all, the use of the alternate value together with icon is not in the spec (WHATWG 2021).

(3) The shortcut attribute value

Other people (including Google Developers, n.d.) suggest the use of rel="shortcut icon". But Bynens (2010) argues that it does more harm than good.

3. Apple Touch Icon

3.1 iOS/Android shortcut icons on home screen

An SVG favicon is great for desktop browser tabs and for Google search results (Leach 2019).

However, it has limitations when a mobile device user “installs” the website to create a shortcut icon on the home screen for both iOS and Android, because mobile devices require a different icon design (see Bernard (2018) for detail).

So we need to revise the original SVG favicon a bit to fit into the design requirements by iOS and Android. For iOS, we need an apple touch icon (which we discuss in this section). For Android, we need a web app manifest (see Section 4 below).

3.2 HTML code

For iOS, include the following <link> tag to the <head> element:

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>

Bernard (2019) mentions that we should include the link tag to refer to the apple touch icon image even though iOS devices will automatically find it, because other OS’s use the apple touch icon (including Windows 8+—more on this in Section 6 below).

3.3 Creating an Apple touch icon

Now the issue is a resolution of the image. RealFaviconGenerator (n.d.) argues that we should go with 180x180, to be compatible with iOS8+.

Sitnik (2020) recommends adding a 20px padding around the original favicon with some background color, to make the Apple touch icon look good.

RealFaviconGenerator makes it very easy to convert the original SVG favicon into an apple touch icon. It allows you to upload an SVG favicon file, graphically adjust the original image to fit into an iOS icon on the home screen, and download the 180x180 PNG file.

4. Web App Manifest

For the home screen icon on Android devices, we need a web manifest, which is originally meant for progressive web apps (see LePage, Beaufort, and Steiner 2018).

4.1 HTML code and JSON file

Add the following <link> tag to the <head> element:

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

with the text content of /site.webmanifest (a JSON file) being something like this:

{
    "name": "Triangulum Color Picker",
    "short_name": "Triangulum",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#4a4a4a",
    "background_color": "#4a4a4a",
    "display": "standalone"
}

The above code is what RealFaviconGenerator creates for a web tool that I built and named Triangulum Color Picker.
The file can also be called manifest.json. See W3C (2021) and Arseniy-II (2018).
Reamsnyder (2021) reports that omitting the name, short-name, theme_color, background_color, and display properties will make Lighthouse complain.

4.2 Creating PNG icons

The PNG image needs to be 192x192 and 512x512 if we follow what LePage, Beaufort, and Steiner (2018) suggest. Boulanger (2020) suggests we only need 512x512, though.

4.3 "Maskable" versions of the icon

Reamsnyder (2021) reports that, to pass the Lighthouse audit, these PNG images need to be "maskable" so that different Android devices can crop the icon to make it a circle, a squircle, etc. (Oakes and Steiner 2019). RealFaviconGenerator does not take care of this. Maskable.app can help you make your icon "maskable".

Then, add the reference to maskable PNG images with "property": "maskable" in the site.manifest as follows:

{
  …
  "icons": [
    …
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable" // <-- New property value `"maskable"`
    },
    …
  ],
  …
}

See Oakes and Steiner (2019) for more detail.

This is an extra work to do, and the gain is having an icon like these:

instead of

(both images are taken from Oakes and Steiner 2019).

If the use as a Progressive Web App on Android devices is a critical feature of your website, it is worth doing this extra image editing. Otherwise, I would say, skip it.

Now we are moving on to optional requirements for favicons. You can ignore them all.

5. MacOS Safari pinned tabs (optional)

Safari on MacOS allows the user to pin a webpage. This creates a tab with a favicon icon.

Until version 12 was released in September 2018 (according to Sitnik (2020)), Safari didn’t use the standard favicon but a single-colored SVG image for this pinned-tab functionality.

If you want to support those legacy versions of Safari on Mac OS (which accounts for 0.06% of global page views in June 2023, according to Can I Use (2023b)), add an additional <link> tag as follows:

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#4a4a4a" />

where the color attribute value should be changed to the desired color code.

It is quite tricky to create this version of a favicon, because it has to be single-colored with the color indicated in the link tag (#4a4a4a in the above code snippet), not in the SVG file itself. See Apple (2016) for the exact design requirement.

6. Windows Metro tiles (optional)

Windows 8 or later allows the user to create a shortcut icon to a webpage in the Start Menu (known as Windows Metro tiles). By default, Windows will use the apple touch icon for this purpose (Boulanger 2020). So we don’t need to create yet another version of favicon.

If you still want to customize your favicon for Windows Metro tiles, see Bernard (2019).

And RealFaviconGenerator takes care of everything.

7. Chrome tab color on Android (optional)

This is not really a favicon. But you can specify the color of Chrome tab bar on Android with

<meta name="theme-color" content="#4a4a4a" />

where the content attribute value should be changed to the desired color code.

According to Valkhof (2020), this theme color is also used by Discord for the border of shared links to the site.

That’s all!

After writing up this article, my mind clears up about favicons.

Hope this article saves you from turning mad about favicon nightmare. 🙂

Any feedback will be welcome. ;-)

Changelog

Aug 11, 2023 (v4.0.0): Revise Section 2 with a breaking change: I no longer recommend adding sizes="any" for referring to the .ico favicon due to the specification change of Chromium browsers in December 2022. Revise the title, the feature image, TL;DR, and the introduction accordingly. Add the alt text for the image in Section 1.1. Acknowledge possible misunderstanding of mine in Section 1.2. Fix typos in the references.

Nov 8, 2021 (v3.0.0): Revise Section 2.3 with a breaking change: I no longer recommend the deliberate omission of reference to the .ico favicon file in the HTML code. Revise the TL;DR and Introduction sections accordingly.

Oct 27, 2021 (v2.1.1): Fix a few mistakes in Markdown markup. No change in contents.

Oct 22, 2021 (v2.1.0): Mention the research results by Adam, Nathan, Patrick (2021) as evidence for the extent to which major websites do not agree on how to handle favicons.

Jul 15, 2021 (v2.0.1): Correct a few typos and to improve exposition.

Jul 7, 2021 (v2.0.0): Revise the entire article with a breaking change: (1) The <link> tag for favicon.ico is now removed; (2) The dedicated favicon file for Safari pinned tabs is now mentioned as optional, rather than mandatory. Change the title of the article to “Definitive edition of “How to Favicon in 2021”.

Jan 27, 2021 (v1.0.0): Publish the first version entitled “Favicon nightmare: how to maintain sanity :-)”.

References

Adam, Nathan, and Patrick (2021) "We Analyzed 425,909 Favicons", iconmap.io, Oct 20, 2021.

Anonymous (2020) "Issue 1162276: SVG favicon is not loading if atribute "sizes" is present, instead regular favicon loads", Chromium Bug Reports, Dec 30, 2020.

Apple (2016) "Creating Pinned Tab Icons", Safari Web Content Guide, Dec 12, 2016.

Armadillo (2020) "Chromium seems to display ico instead of svg favicon", Stack Overflow, Aug 15, 2020.

Arseniy-Il (2018) "There are no big difference rather than naming...", Stack OVerflow, Sep 3, 2018.

Bailey (2020) "SVG, Favicons, and All the Fun Things We Can Do With Them", CSS-Tricks, Apr 24, 2020.

Bernerd, Philippe (2018) "The United SVG Favicon Myth", Favicon’s Blog, Mar 13, 2018.

Bernard, Philippe (2019) "Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?", CSS-Tricks, Jan 11, 2019.

Blazak, Ben (2021) “Really appreciate this as well! Possible correction: just did a brief test (macos 10.14: safari 14, chrome 94) and the favicon wouldn’t show up...”, Dev, Oct 6, 2021.

Boulanger, Antoine (2020) "Are you using SVG favicons yet? A guide for modern browsers", Start It Up, Apr 20, 2020.

Bynens, Mathias (2010) "rel="shortcut icon" considered harmful", mathiasbynens.be, Apr 14, 2010.

Can I Use (2023a) "SVG favicons", Can I Use?, accessed on Jul 2, 2023.

Can I Use (2023b) "Browser Usage Table", Can I Use?, accessed on Jul 2, 2023.

Cardello, Jeff (2021) “Favicons: everything you need to know in 2021”, Webflow Blog, Sep 8, 2021.

Coyier, Chris (2021a) "How to Favicon in 2021", CSS-Tricks, Feb 10, 2021.

Coyier, Chris (2021b) “Favicons: How to Make Sure Browsers Only Download the SVG Version”, CSS-Tricks, Nov 5, 2021.

Gant, Greg (2019) "The 2020 Guide to FavIcons for Nearly Everyone and Every Browser", Emerge, Oct 28, 2019.

Google Developers (n.d.) "Define a favicon to show in search results", Google Search Central, accessed on Jul 7, 2021.

Kravets, Una (2021) "The new responsive: Web design in a component-driven world", web.dev, May 19, 2021.

Leach, Jamie (2019) "A new look for Google Search", The Keyword, May 22, 2019.

LePage, Pete, François Beaufort, and Thomas Steiner (2018) "Add a web app manifest", Nov 5, 2018.

MDN Contributors (2021a) "Link types", MDN Web Docs, Jun 22, 2021 (last updated).

MDN Contributors (2021b) “<link>: The External Resource Link element”, MDN Web Docs, Oct 24, 2021 (last updated).

Noakes, Darryl (2023a) “Seems that as of Chrome 113 at the latest, sizes="any" on the ICO isn’t working anymore...”, Dev Community, May 31, 2023.

Noakes, Darryl (2023b) “I tested this in Chrome with subzey’s test page and chrome-svg-favicon-bug.karlhorky.r..., and it appears to work fine!...”, Dev Community, Jun 20, 2023.

Oakes, Tiger, and Thomas Steiner (2019) "Adaptive icon support in PWAs with maskable icons", web.dev. Dec 19, 2019.

RealFaviconGenerator (n.d.) "FAQ", Real Favicon Generator, accessed on Jan 27, 2021.

RealFaviconGenerator (2020), "When it finds both SVG and ICO favicons...", Twitter, Apr 11, 2020.

Reamsnyder, Lee (2021) "How to Favicon in 2021", leereamsnyder.com, Apr 19, 2021.

Robinson, Mike (2022) “You're getting mixed up between the type attribute in the HTML and the served mime-type...”, Dev Community, May 16, 2022.

Schwarz, Daniel (2020) "What Are Favicons: A Comprehensive Guide", Sympli, Feb 5, 2020.

Sitnik, Andrey (2020) "How to Favicon in 2021: Six files that fit most needs", Evil Martins, Dec 23, 2020.

Söderquist, Fredrik (2022) “Consider the "any" size keyword in the initial favicon scoring...)”, Google Git, Dec 15, 2022.

subzey (2021) “Google Chrome may ignore your fancy SVG favicon...”, Twitter, Jul 19, 2021.

Valkhof, Kilian (2020) "I noticed you don’t have a theme color defined...", Twitter, Dec 29, 2020.

Vidas, Šime (2019) "Weekly Platform News: Favicon Guidelines, Accessibility Testing, Web Almanac", CSS-Tricks, May 31, 2019.

W3C (2021) Web Application Manifest. Jul 1, 2021.

Waldron, Doug (2023) “This is an amazing article and definitely the most thorough that I’ve found! I have some bad news though...”, Dev Community, Mar 27, 2023.

WHATWG (2021) HTML Living Standard, last updated on Jul 2, 2021.

xcuses (2023a) “Hi, this works for me: <link rel="icon" sizes="48x48" href="/favicon.ico">...”, Dev Community, May 1, 2023.

xcuses (2023b) “Yes there are reasons why I chose 48x48...”, Dev Community, Jun 23, 2023.

Top comments (34)

Rafael Pereira • Feb 27 '23

Thank you for all your research!

Doug Waldron • Mar 27 '23

This is an amazing article and definitely the most thorough that I've found!

I have some bad news though 🙁

It looks like Chromium has changed how it scores icons with the sizes="any" attribute and is now using the ICO file instead of the SVG file. See this code review: chromium-review.googlesource.com/c...

My best estimate is that started shipping with version 110.

xcuses • May 1 '23

Hi, this works for me:
<link rel="icon" sizes="48x48" href="/favicon.ico"> <link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg">

Like this, Chrome and Edge only load the SVG Icon.

Masa Kudamatsu • Jun 19 '23

Thanks a lot for your input! (Sorry for this belated reply...)

I myself tried your suggestion for the web app I'm developing, and I can confirm that Safari on Mac OS (and iOS browsers) does use the ICO favicon with this code!

I'm planning to update the article to incorporate your suggestion once a few more people post comments on their experiences with it.

Doug Waldron • May 3 '23

Cool, have you had a chance to see how it works on Safari? (I believe Safari is currently the only reason to still include the ".ico" link.)

xcuses • May 3 '23 • Edited

Yes, that's why I included the ".ico" link. I don't own any Apple device..... if someone wants to check out if this setup works in Safari, this is the site I'm working on: ciceroneberlino.com
If someone checks it out, please let us know :)

Masa Kudamatsu • Jun 19 '23

Hi Doug! Sorry for my late reply, but thank you for your comment! It has solicited the response from xcuses below, which I can confirm works with Safari.

Darryl Noakes • May 31 '23

Seems that as of Chrome 113 at the latest, sizes="any" on the ICO isn't working anymore.

The only solution I can think of is to only link to a PNG and an SVG, based on the fact that pretty much all browsers support PNG favicons.

Masa Kudamatsu • Jun 19 '23

Hi Darryl. Thanks for your input! Please see the "Important Notice" section at the top of this article (which is added today). And let me know if the solution it offers works for you.

If you and some other people give positive feedback, I'll update the whole article to reflect this as the 2023 solution.

Darryl Noakes • Jun 20 '23 • Edited

I tested this in Chrome with subzey's test page and chrome-svg-favicon-bug.karlhorky.r..., and it appears to work fine!

I experimented further, to be sure. I saved subzey's test page and icons locally and made six variations. The results are in the table below.

`sizes` (ICO, SVG)	Chrome 114	Firefox 114	Safari 16.3
none, none	ICO	SVG	ICO
none, `any`	ICO	SVG	ICO
`any`, none	ICO	SVG	ICO
`any`, `any`	ICO	SVG	ICO
`32x32`, none	SVG	SVG	ICO
`32x32`, `any`	SVG	SVG	ICO

Chrome uses the SVG if the ICO has an explicit size specified, else it uses the ICO.
Firefox always uses the SVG, and Safari always uses the ICO.
I tested with various different numbers for the sizes on the ICO, and they didn't seem to make a difference.

The upshot is to that setting an explicit size for the ICO is required for Chrome to use the SVG, no matter what is set on the SVG.
I recommend still setting sizes="any" on the SVG for when proper support is added (see the linked Chromium bugs, especially the second).

Two relevant Chromium bugs:

Masa Kudamatsu • Jun 23 '23

Wow, Darryl. This is amazing!!!

Whenever I have time, I'll update the article by referring to your comprehensive research. I'm sure many web developers appreciate your work!

Just one small question. In the table, why do you go for 32x32 for ICO, not 48x48? I'm aware you mention in your comment that it doesn't seem to matter. But I wonder whether the recommended HTML code for ICO should go with 48x48 or 32x32. Do you have any view on this?

Darryl Noakes • Jun 23 '23 • Edited

I used 32x32 because that was the size of my PNG favicon, and I was experimenting with that being included. No other reason.

16x16 + 32x32 + 48x48 is the second-most common combination of sizes in ICO favicons (stated in that study of thousands and thousands of favicons...).
I'd probably just put the resolution of the largest size in the ICO. Or 48x48 seems a reasonable value, just because.

Any reason you/@xcuses used 48x48?

On a slightly different line... I'm not sure what exactly Google uses to pick an icon for Google Search results, but the minimum is 48x48. I doubt specifying that size could bias Google toward the ICO instead of the SVG, but you never know. I don't know how anyone could check, other than talking to someone rather directly involved with Search.

xcuses • Jun 23 '23 • Edited

Yes there are reasons why I chose 48x48:

afaik, some versions of the Chrome browser used to pick the most appropriate size. If the browser tab needs 32x32 (which is likely), depending on the device and Chrome version, the browser might pick a 32 ico instead of the svg
at the time of writing the suggested code, with an ico size of 16 or 32, my Chrome sometimes loaded both the ICO and SVG, or just the ICO. In the newest version on my desktop (114.0.5735.134), this doesn't happen with a size of 16 or 32 any more. Haven't checked on Android this time.
last not least, afaik, Google uses the .ico for the web search results, so a bigger .ico might scale better

Darryl Noakes • Jun 23 '23

As a note, I am using 48x48 in my project.

Masa Kudamatsu • Jul 2 '23

Hi @darrylnoakes and @xcuses ! Thanks a lot for your contributions. I'm currently rewriting the article to reflect what you have discovered. Writing forces me to think hard about the reason behind the HTML code, and now I'm not very sure why we need sizes="any" for the SVG favicon. Darryl's test suggests it doesn't really matter (at least for now) whether SVG favicon has sizes="any" or not. So is it for making the HTML code future-proof? Why would the SVG favicon without sizes="any" not be chosen if Chromium browsers strictly followed the expected logic?

Code with Ayan • Jun 28 '22

Very helpful

Tim Torres • Jul 12 '21

This is an excellent article! Really appreciate the references and reasoning. I've found a few issues with sources like CSS Tricks that I normally trust and you've covered them all.

Ben Blazak • Oct 6 '21

Really appreciate this as well!

Possible correction: just did a brief test (macos 10.14: safari 14, chrome 94) and the favicon wouldn't show up when i only had links to the svg and apple-touch-icon. I added a link to the ico (before the svg) and it works now.

Masa Kudamatsu • Nov 9 '21

Thank you for your feedback, @benblazak ! On Nov 8, I've revised the article to recommend the inclusion of the reference to the ico file, with the attribute of sizes="any" (which prevents Chrome from picking the ico file). Given your experience, I've come to a conclusion that this method is better than omitting the reference to the ico file.

Ben Blazak • Nov 10 '21

Thanks! Tested, this does indeed work with my setup :)

Masa Kudamatsu • Nov 11 '21

Great to hear that! Thanks for your feedback again!

fiiv • Oct 28 '21

Beautiful article, thanks for writing it, @masakudamatsu!

Ross Angus • Jan 13 '22

I found this article because it was linked from CanIUse. Thank you so much for putting all of this together. It's clearly been a lot of work.

Mike Robinson • May 16 '22

Boulanger (2020) claims that the type attribute is unnecessary. But Can I Use (2021a) says all the browsers that support SVG favicons (Chrome 80+, Edge 80+, Firefox 41+, Opera 67+) require "the served mime-type to be image/svg+xml".

You're getting mixed up between the type attribute in the HTML and the served mime-type, which is returned by the server when making the request to retrieve the file. The type attribute in the HTML is not needed. However the server needs to respond with a Content-Type: image/svg+xml header when the request is made.

Sergey Ponomarev • Dec 13 '23 • Edited

After tests for all browsers on all platforms I came up with the solution:

<link rel="icon" href="/favicon_48.png" sizes="48x48">
<link rel="icon" href="/favicon.svg" sizes="any">

The png 48x8 is used by Safari on both iOS and macOS.
But also it's used by Chrome and Edge when adding the site as an app. Bigger image is not really needed because it will be downscaled.
If you don't care about apps then maybe you can use here just an .ico file. I didn't tested.

If you won't specify the sizes="48x48" then Chrome will download both png and svg but show only the svg.
The mime type="image/svg+xml" is not needed: all servers anyway return a valid mime type (even BusyBox httpd) but also browsers can sniff a correct type themselves.

You can use optipng to compress the PNG file but also you minimize SVG online and even compress it with gzip -kn9 favicon.svg and serve precompressed favicon.svg.gz.

View full discussion (34 comments)

DEV Community

Definitive edition of "How to Favicon" in 2023

TL;DR

Motivation

Literature Review

1. SVG favicon

1.1 Future-proof

1.2 HTML code

1.3 Other benefits of SVG favicons

2. The `.ico` favicon (for Safari and IE)

2.1 Safari doesn’t support SVG favicons

2.2 Creating an `.ico` file

2.3 Referring to the `.ico` favicon

2.4 Adding `sizes="any"` for referring to the SVG favicon

2.5 Playground

2.6 Other topics

3. Apple Touch Icon

3.1 iOS/Android shortcut icons on home screen

3.2 HTML code

3.3 Creating an Apple touch icon

4. Web App Manifest

4.1 HTML code and JSON file

4.2 Creating PNG icons

4.3 "Maskable" versions of the icon

5. MacOS Safari pinned tabs (optional)

6. Windows Metro tiles (optional)

7. Chrome tab color on Android (optional)

Changelog

References

Top comments (34)

Read next

HTML & CSS: The Underrated Skills That Made Learning JavaScript Easier ✔

5 Key Techniques to Create Responsive Layouts So That You Don’t Have to Relying On Heavy CSS Frameworks

Alvaro Montoro Presents: Fun with Flags… with CSS

Do You Need to SSR Your Web Components?

TL;DR

Motivation

Literature Review

1. SVG favicon

1.1 Future-proof

1.2 HTML code

1.3 Other benefits of SVG favicons

2. The .ico favicon (for Safari and IE)

2.1 Safari doesn’t support SVG favicons

2.2 Creating an .ico file

2.3 Referring to the .ico favicon

2.4 Adding sizes="any" for referring to the SVG favicon

2.5 Playground

2.6 Other topics

3. Apple Touch Icon

3.1 iOS/Android shortcut icons on home screen

3.2 HTML code

3.3 Creating an Apple touch icon

4. Web App Manifest

4.1 HTML code and JSON file

4.2 Creating PNG icons

4.3 "Maskable" versions of the icon

5. MacOS Safari pinned tabs (optional)

6. Windows Metro tiles (optional)

7. Chrome tab color on Android (optional)

Changelog

References

Read next

HTML & CSS: The Underrated Skills That Made Learning JavaScript Easier ✔

5 Key Techniques to Create Responsive Layouts So That You Don’t Have to Relying On Heavy CSS Frameworks

Alvaro Montoro Presents: Fun with Flags… with CSS

Do You Need to SSR Your Web Components?

2. The `.ico` favicon (for Safari and IE)

2.2 Creating an `.ico` file

2.3 Referring to the `.ico` favicon

2.4 Adding `sizes="any"` for referring to the SVG favicon