Definitive edition of "How to Favicon" in 2023
Tags: favicon, html
Published: 2021-01-27 13:48:28

## TL;DR

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

```html
<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:

```JSON
{
    "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](https://realfavicongenerator.net/). 

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:

```html
<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)](https://iconmap.io/blog) 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)](https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/), [Schwarz (2020)](https://sympli.io/blog/heres-everything-you-need-to-know-about-favicons-in-2020/), [RealFaviconGenerator (n.d.)](https://realfavicongenerator.net/faq), [Bailey (2020)](https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/), and [Boulanger (2020)](https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df) 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 <link> elements in the page’s head).” ([Vidas 2019](https://css-tricks.com/weekly-platform-news-favicon-guidelines-accessibility-testing-web-almanac/#google-posts-guidelines-for-defining-favicons))
>
> "But apple.com, as of this writing, has *absolutely no markup for any favicon*. They have a [`/favicon.ico` file](https://www.apple.com/favicon.ico) and nothing else—the old fashioned thing that still works everywhere." ([Reamsnyder 2021](https://www.leereamsnyder.com/blog/favicons-in-2021)).

More recently, [Sitnik (2020)](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs), whose article was cited by [Coyier (2021a)](https://css-tricks.com/how-to-favicon-in-2021/), 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)](https://www.leereamsnyder.com/blog/favicons-in-2021). 

[Sitnik (2020)](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) then updated his proposed solution, in response to [subzey (2021)](https://twitter.com/subzey/status/1417099064949235712). 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:
```html
<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)](https://dev.to/guitarzan/comment/25k7n) and [Noakes (2023a)](https://dev.to/darrylnoakes/comment/2724c), both of which are the comments to this article). 

Thankfully, [xcuses (2023a)](https://dev.to/xcuses/comment/26cak), 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)](https://dev.to/darrylnoakes/comment/27dgk).

Accordingly, on August 11, 2023, I revised this article to recommend the solution by [xcuses (2023a)](https://dev.to/xcuses/comment/26cak) 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](https://css-tricks.com/favicon-quiz/#question-which-sizes-should-the-png-icons-be)). 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](https://www.blog.google/products/search/new-design-google-search/)):

![Two smartphone screens are shown side by side, both showing Google search results for “hike yosemite”. On the left, each search result consists of text only. On the right, each search result starts with a little icon, followed by the site title.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nmrw3v212o5ymy4fkyb.jpg)

**Left: Google search results before May 2019; Right: after May 2019** (Image source: [Leach (2019)](https://www.blog.google/products/search/new-design-google-search/))

Google requires your favicon to be a multiple of 48px square (48x48, 96x96, 144x144, etc.) ([Google Developers, n.d.](https://developers.google.com/search/docs/advanced/appearance/favicon-in-search?visit_id=637612551778130156-3112088115&rd=1#guidelines)). 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:

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

- [Boulanger (2020)](https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df) claims that the `type` attribute is unnecessary. But [Can I Use (2021a)](https://caniuse.com/link-icon-svg) 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)](https://dev.to/multiwebinc/comment/1oedd), 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)](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) shows the following example code for an SVG image file:

```html
<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](https://web.dev/new-responsive/#prefers-color-scheme).)

For other benefits of an SVG favicon, see [Bailey (2020)](https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/#why-svg).

## 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](https://caniuse.com/link-icon-svg)). 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)](https://www.leereamsnyder.com/blog/favicons-in-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](https://realfavicongenerator.net/) 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.)](https://realfavicongenerator.net/faq) 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](https://dev.to/xcuses/comment/26cak)):

```html
<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.

<!-- A Twitter thread by [subzey (2021)](https://twitter.com/subzey/status/1417099064949235712) points out that this attribute prevents Chrome from picking the `.ico` favicon rather than the SVG favicon.  -->

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

```html
<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](https://bugs.chromium.org/p/chromium/issues/detail?id=1162276); see also [RealFaviconGenerator 2020](https://twitter.com/RealFavicon/status/1248635863078141953) and  [subzey 2021](https://twitter.com/subzey/status/1417099064949235712)) 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](https://stackoverflow.com/q/63429240/11847654)). This is undesirable.

[Reamsnyder (2021)](https://www.leereamsnyder.com/blog/favicons-in-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](https://www.leereamsnyder.com/blog/favicons-in-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](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types#icon))

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-sizes))

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](https://webflow.com/blog/favicon-guide)). Indeed, [xcuses (2023b)](https://dev.to/xcuses/comment/27f5i) 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types#icon)), it is best to declare the `.ico` favicon first:
```html
<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)](https://dev.to/darrylnoakes/comment/27dgk), 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)](https://dev.to/xcuses/comment/26cak) and [Noakes (2023b)](https://dev.to/darrylnoakes/comment/27dgk) recommend adding `sizes="any"` for referring to the SVG favicon. So the HTML code should be:
```html
<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](https://dev.to/darrylnoakes/comment/27dgk)). 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)](https://chromium.googlesource.com/chromium/src/+/434efd919b73f887d32d242d07594f4254899d4c), 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:
```html
<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)](https://twitter.com/subzey/status/1417099064949235712).

However, with the commit made on December 15, 2022 to fix [a reported bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1162276), 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](https://subzey.github.io/favicon-test/with-sizes.html) by [subzey (2021)](https://twitter.com/subzey/status/1417099064949235712). 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)](https://www.leereamsnyder.com/blog/favicons-in-2021) recommends creating a PNG version of the favicon image for Safari, and refer to it with the `<link>` tag:

```html
<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.)](https://realfavicongenerator.net/faq) 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)](https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/) suggests using the `alternate` attribute value, like so:

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

However, some people report that the `alternate` attribute value doesn’t work with Chrome 84 ([Armadillo 2020](https://stackoverflow.com/q/63429240/11847654)). After all, the use of the `alternate` value together with `icon` is not in the spec ([WHATWG 2021](https://html.spec.whatwg.org/multipage/links.html#rel-alternate)).

**(3) The `shortcut` attribute value**

Other people (including [Google Developers, n.d.](https://developers.google.com/search/docs/advanced/appearance/favicon-in-search?visit_id=637612551778130156-3112088115#implementation)) suggest the use of `rel="shortcut icon"`. But [Bynens (2010)](https://mathiasbynens.be/notes/rel-shortcut-icon) 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](https://www.blog.google/products/search/new-design-google-search/)). 

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)](https://realfavicongenerator.net/blog/the-united-svg-favicon-myth/) 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:

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

[Bernard (2019)](https://css-tricks.com/favicon-quiz/#question-is-it-necessary-to-declare-the-apple-touch-icons-in-the-html) 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.)](https://realfavicongenerator.net/faq) argues that we should go with 180x180, to be compatible with iOS8+.

[Sitnik (2020)](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs) recommends adding a 20px padding around the original favicon with some background color, to make the Apple touch icon look good.

[RealFaviconGenerator](https://realfavicongenerator.net/) 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](https://web.dev/add-manifest/)). 

### 4.1 HTML code and JSON file

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

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

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

```JSON
{
    "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](https://realfavicongenerator.net/) creates for [a web tool that I built and named Triangulum Color Picker](https://triangulum.netlify.app).
- The file can also be called `manifest.json`. See [W3C (2021)](https://www.w3.org/TR/appmanifest/#using-a-link-element-to-link-to-a-manifest) and [Arseniy-II (2018)](https://stackoverflow.com/a/52145041).
- [Reamsnyder (2021)](https://www.leereamsnyder.com/blog/favicons-in-2021) reports that omitting the `name`, `short-name`, `theme_color`, `background_color`, and `display` properties will make [Lighthouse](https://developers.google.com/web/tools/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)](https://web.dev/add-manifest/#splash-screen) suggest. [Boulanger (2020)](https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df) suggests we only need 512x512, though.

### 4.3 "Maskable" versions of the icon

[Reamsnyder (2021)](https://www.leereamsnyder.com/blog/favicons-in-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](https://web.dev/maskable-icon/)). [RealFaviconGenerator](https://realfavicongenerator.net/) does not take care of this. [Maskable.app](https://maskable.app/editor) can help you make your icon "maskable". 

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

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

See [Oakes and Steiner (2019)](https://web.dev/maskable-icon/#how-do-i-adopt-maskable-icons) for more detail.

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

![PWA icons covering the entire circle on Android](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvrod4nnkgd3mvp84de6.png)

instead of

![PWA icons in white circles on Android](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otm3t797xksrfhlw0rqh.png)

(both images are taken from [Oakes and Steiner 2019](https://web.dev/maskable-icon/)). 

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)](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)), 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)](https://caniuse.com/usage-table)), add an additional `<link>` tag as follows: 

```html
<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)](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html) 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](https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df)). 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](https://css-tricks.com/favicon-quiz/#question-what-does-it-take-to-define-a-tile-for-windows-8-tablets) [(2019)](https://css-tricks.com/favicon-quiz/#question-is-it-necessary-to-declare-the-apple-touch-icons-in-the-html). 

And [RealFaviconGenerator](https://realfavicongenerator.net/) 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

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

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

According to [Valkhof (2020)](https://twitter.com/kilianvalkhof/status/1343926777182363649), this theme color is also used by [Discord](https://discord.com/) 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)](https://iconmap.io/blog) 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](https://iconmap.io/blog)", iconmap.io, Oct 20, 2021.

Anonymous (2020) "[Issue 1162276: SVG favicon is not loading if atribute "sizes" is present, instead regular favicon loads](https://bugs.chromium.org/p/chromium/issues/detail?id=1162276)", _Chromium Bug Reports_, Dec 30, 2020.

Apple (2016) "[Creating Pinned Tab Icons](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html)", _Safari Web Content Guide_, Dec 12, 2016.

Armadillo (2020) "[Chromium seems to display ico instead of svg favicon](https://stackoverflow.com/q/63429240/11847654)", _Stack Overflow_, Aug 15, 2020.

Arseniy-Il (2018) "[There are no big difference rather than naming...](https://stackoverflow.com/a/52145041/11847654)", _Stack OVerflow_, Sep 3, 2018.

Bailey (2020) "[SVG, Favicons, and All the Fun Things We Can Do With Them](https://css-tricks.com/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](https://realfavicongenerator.net/blog/the-united-svg-favicon-myth/)", _Favicon’s Blog_, Mar 13, 2018.

Bernard, Philippe (2019) "[Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?](https://css-tricks.com/favicon-quiz/)", _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...](https://dev.to/benblazak/comment/1ijm2)”, _Dev_, Oct 6, 2021. 

Boulanger, Antoine (2020) "[Are you using SVG favicons yet? A guide for modern browsers](https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df)", _Start It Up_, Apr 20, 2020. 

Bynens, Mathias (2010) "[`rel="shortcut icon"` considered harmful](https://mathiasbynens.be/notes/rel-shortcut-icon)", _mathiasbynens.be_, Apr 14, 2010.

Can I Use (2023a) "[SVG favicons](https://caniuse.com/link-icon-svg)", _Can I Use?_, accessed on Jul 2, 2023.

Can I Use (2023b) "[Browser Usage Table](https://caniuse.com/usage-table)", _Can I Use?_, accessed on Jul 2, 2023.

Cardello, Jeff (2021) “[Favicons: everything you need to know in 2021](https://webflow.com/blog/favicon-guide)”, _Webflow Blog_, Sep 8, 2021.

Coyier, Chris (2021a) "[How to Favicon in 2021](https://css-tricks.com/how-to-favicon-in-2021/)", _CSS-Tricks_, Feb 10, 2021.

Coyier, Chris (2021b) “[Favicons: How to Make Sure Browsers Only Download the SVG Version](https://css-tricks.com/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](https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/)", _Emerge_, Oct 28, 2019.

Google Developers (n.d.) "[Define a favicon to show in search results](https://developers.google.com/search/docs/advanced/appearance/favicon-in-search?visit_id=637612551778130156-3112088115)", _Google Search Central_, accessed on Jul 7, 2021.

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

Leach, Jamie (2019) "[A new look for Google Search](https://www.blog.google/products/search/new-design-google-search/)", _The Keyword_, May 22, 2019.

LePage, Pete, François Beaufort, and Thomas Steiner (2018) "[Add a web app manifest](https://web.dev/add-manifest/)", Nov 5, 2018.

MDN Contributors (2021a) "[Link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)", _MDN Web Docs_, Jun 22, 2021 (last updated).

MDN Contributors (2021b) “[\<link\>: The External Resource Link element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)”, _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...](https://dev.to/darrylnoakes/comment/2724c)”, _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!...](https://dev.to/darrylnoakes/comment/27dgk)”, _Dev Community_, Jun 20, 2023.

Oakes, Tiger, and Thomas Steiner (2019) "[Adaptive icon support in PWAs with maskable icons](https://web.dev/maskable-icon/)", _web.dev_. Dec 19, 2019.

RealFaviconGenerator (n.d.) "[FAQ](https://realfavicongenerator.net/faq)", _Real Favicon Generator_, accessed on Jan 27, 2021.

RealFaviconGenerator (2020), "[When it finds both SVG and ICO favicons...](https://twitter.com/RealFavicon/status/1248635863078141953)", _Twitter_, Apr 11, 2020.

Reamsnyder, Lee (2021) "[How to Favicon in 2021](https://www.leereamsnyder.com/blog/favicons-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...](https://dev.to/multiwebinc/comment/1oedd)”, _Dev Community_, May 16, 2022.

Schwarz, Daniel (2020) "[What Are Favicons: A Comprehensive Guide](https://sympli.io/blog/heres-everything-you-need-to-know-about-favicons-in-2020/)", _Sympli_, Feb 5, 2020.

Sitnik, Andrey (2020) "[How to Favicon in 2021: Six files that fit most needs](https://evilmartians.com/chronicles/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...](https://chromium.googlesource.com/chromium/src/+/434efd919b73f887d32d242d07594f4254899d4c))”, _Google Git_, Dec 15, 2022.

subzey (2021) “[Google Chrome may ignore your fancy SVG favicon...](https://twitter.com/subzey/status/1417099064949235712)”, _Twitter_, Jul 19, 2021.

Valkhof, Kilian (2020) "[I noticed you don’t have a theme color defined...](https://twitter.com/kilianvalkhof/status/1343926777182363649)", _Twitter_, Dec 29, 2020.

Vidas, Šime (2019) "[Weekly Platform News: Favicon Guidelines, Accessibility Testing, Web Almanac](https://css-tricks.com/weekly-platform-news-favicon-guidelines-accessibility-testing-web-almanac/)", _CSS-Tricks_, May 31, 2019.

W3C (2021) [_Web Application Manifest_](https://www.w3.org/TR/appmanifest). 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...](https://dev.to/guitarzan/comment/25k7n)”, _Dev Community_, Mar 27, 2023.

WHATWG (2021) [_HTML Living Standard_](https://html.spec.whatwg.org/multipage/links.html), last updated on Jul 2, 2021.

xcuses (2023a) “[Hi, this works for me: `<link rel="icon" sizes="48x48" href="/favicon.ico">`...](https://dev.to/xcuses/comment/26cak)”, _Dev Community_, May 1, 2023.

xcuses (2023b) “[Yes there are reasons why I chose 48x48...](https://dev.to/xcuses/comment/27f5i)”, _Dev Community_, Jun 23, 2023.