DEV Community

Cover image for Definitive edition of "How to Favicon in 2021"
Masa Kudamatsu
Masa Kudamatsu

Posted on • Updated on • Originally published at Medium

Definitive edition of "How to Favicon in 2021"

TL;DR

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

<link rel="icon" href="/favicon.ico" sizes="any"> <!-- REVISED (Nov 8)! -->
<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" />
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode
  • 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"> 
Enter fullscreen mode Exit fullscreen mode

I was wrong.

In 2021, 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 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. Different people suggest different solutions. Gant (2019), Schwarz (2020), RealFaviconGenerator (n.d.), Bailey (2020), and Boulanger (2020) do not agree with each other.

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


Updates on Nov 8, 2021: Sitnik (2020) has since updated its content, in response to subzey (2021). With this update, Sitnik (2020) is now the best reference on favicons, as noted by Coyier (2021b). The value added of my article is relentlessly citing the sources of information on everything about favicons. :-)


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).

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 2021" (the title of articles used by Sitnik (2020), Coyier (2021a), and Reamsnyder (2021)).

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):Alt TextLeft: 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">
Enter fullscreen mode Exit fullscreen mode
  • 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".

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>
Enter fullscreen mode Exit fullscreen mode

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. .ico favicon (for Safari and IE)

2.1 Safari doesn't support SVG favicons

In June 2021, the browsers fully compatible with SVG favicons account for 71.86% of global page views (Can I Use 2021a). 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 with sizes="any" in HTML

NOTE: This section is substantially revised (equivalent of “breaking change” in semantic versioning terminology) on Nov 8, 2021, to incorporate insights from subzey (2021) and Coyier (2021b).

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

<link rel="icon" href="/favicon.ico" sizes="any">
Enter fullscreen mode Exit fullscreen mode

Note the sizes="any" attribute. A Twitter thread by subzey (2021) 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="any" as follows:

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

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)

A workaround is the use of sizes="any" as pointed out by subzey (2021).

The sizes attribute for the <link> element 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)

And if sizes="any", it indicates that:

the icon can be scaled to any size as it is in a vector format, like image/svg+xml. (MDN Contributors 2021b)

If I understand correctly, the sizes="any" fools Chrome to believe that the .ico file is in a vector format. Then, somehow, Chrome thinks the SVG favicon, rather than the .ico favicon, is the “most appropriate icon” (to use the phrase in MDN Contributors 2021a).

The remaining issue is the order in which these two <link> elements should be placed in the HTML code. Given that “if several icons are equally appropriate, the last one is used” (MDN Contributors 2021a), I think we should put the SVG favicon as the last one just in case browsers see both .ico and SVG favicons “equally appropriate”. (I'm not sure if that ever happens, though.)

So this article recommends the following, just as Sitnik (2020) does:

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

In the previous version of this article, I recommended NOT referring to the .ico favicon file because, allegedly, browsers would detect it anyway as long as it's saved as favicon.ico in the root directory (Bynens 2010, Boulanger 2020, and RealFaviconGenerator, n.d.). This way, we could prevent Chrome from pickiing the .ico favicon rather than the SVG favicon.

However, some browsers DO NOT detect /favicon.ico automatically. A comment to the earlier version of this article (Blazak 2021) pointed out:

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.

With the sizes="any" attribute, Chrome properly uses the SVG favicon, not the .ico favicon. And those browsers not supporting SVG favicons will surely use the .ico favicon. So I think it's best to do refer to /favicon.ico in the HTML code.

I recommend playing with a 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.4 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">
Enter fullscreen mode Exit fullscreen mode

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.


We end this section by pointing out two wrong pieces of advice:

2.5 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">
Enter fullscreen mode Exit fullscreen mode

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).

2.6 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"/>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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

{
    "name": "Triangulum",
    "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"
}
Enter fullscreen mode Exit fullscreen mode

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"`
    },
    
  ],
  
}
Enter fullscreen mode Exit fullscreen mode

See Oakes and Steiner 2019 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

instead of

PWA icons in white circles on Android

(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 to optional requirements for favicons.

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.38% of global page views in June 2021, according to Can I Use (2021b)), add an additional <link> tag as follows:

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

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" />
Enter fullscreen mode Exit fullscreen mode

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

This article was a revised version of the one entitled "Favicon nightmare: how to maintain sanity :-)", published on 27 January, 2021. Compared to the previous version: (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.

Since then, the following revisions have been made:

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

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.

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

Nov 8, 2021 (v3.0.0): Substantially revise Section 2.3, and also revise the TL;DR and Introduction sections accordingly. This article no longer recommends the deliberate omission of reference to the .ico favicon file in the HTML code. Instead, it now recommends referring to it with sizes="any" attribute before referring to the SVG favicon file.

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 (2021a) "SVG favicons", Can I Use?, accessed on Jul 7, 2021.

Can I Use (2021b) "Browser Usage Table", Can I Use?, accessed on Jul 7, 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).

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.

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.

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.

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

Discussion (6)

Collapse
benblazak profile image
Ben Blazak

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.

Collapse
masakudamatsu profile image
Masa Kudamatsu Author

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.

Collapse
benblazak profile image
Ben Blazak

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

Thread Thread
masakudamatsu profile image
Masa Kudamatsu Author

Great to hear that! Thanks for your feedback again!

Collapse
timtorres profile image
Tim Torres

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.

Collapse
mtimofiiv profile image
fiiv

Beautiful article, thanks for writing it, @masakudamatsu !