DEV Community

loading...

Favicon nightmare: how to maintain sanity :-)

masakudamatsu profile image Masa Kudamatsu ・6 min read

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 and, as is very often the case with web development, too complicated to keep track of what is correct (which is why I title this article “Favicon nightmare”).

Different people suggest different solutions. Gant (2019), Schwarz (2020), RealFaviconGenerator (2018), Bailey (2020), and Boulanger (2020) do not agree with each other.

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)

Seems like no one knows the truth. Each of us needs to make some judgement calls. Here’s mine.

1. SVG favicon

<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 he doesn’t provide the source. I play it safe.

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

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

However, as of December 2020, the browsers compatible with SVG favicons account for 88.22% of global page views (Can I Use 2021). We need a fallback for legacy browsers.

2. ICO favicon

<link rel="alternate icon" href="/favicon.ico">
Enter fullscreen mode Exit fullscreen mode
  • This line of code is suggested by Bailey (2020).
  • The alternate attribute value, if I understand correctly, will make this line of code ignored by the browser compatible with SVG favicons.

As a fallback for legacy browsers, we should use an ICO favicon that every browser supports, even IE 5.

Boulanger (2020) and RealFaviconGenerator (2018) argue that we do not need the link tag for the ICO favicon, because browsers will automatically look for a file called favicon.ico in the root directory. RealFaviconGenerator (2018) further points out that some browsers pick the favicon.ico file instead of the svg file if both files are referred to in the link tags (RealFaviconGenerator (2020) says Chrome is one example).

But I do not find any reliable source saying every browser incompatible with SVG favicons will automatically look for the .ico file. Boulanger (2020) claims so, without citing any source. RealFaviconGenerator (2018) only says “IE looks for a file named favicon.ico anyway”.

If a SVG-compatible browser picks favicon.ico instead of favicon.svg, it probably doesn’t do any harm. The favicon.ico file will be used for desktop browser tabs, which is tiny anyway.

To play it safe, therefore, my take is to include the link tag for favicon.ico. Hopefully, the alternate attribute value plays its supposed role. (MDN Contributors 2020 is not very clear about it…)

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 (2018) for detail.

3. Apple Touch Icon

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
Enter fullscreen mode Exit fullscreen mode

An SVG favicon is great for desktop browser tabs and Google search results. However, it has limitations when a mobile device user “installs” the website to create an icon on the home screen for both iOS and Android (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. For Android, we need a web app manifest (see next section).

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

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

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

<link rel="manifest" href="/site.webmanifest" />
Enter fullscreen mode Exit fullscreen mode

with the text content of site.webmanifest 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

A web app manifest is meant for progressive web apps (see LePage and Beaufort 2020). But here we need it for Android home screen icons.

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

5. MacOS Safari pinned tabs

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

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

Safari on MacOS allows the user to pin a webpage. This creates a tab with an icon. For some reason, Safari does not use the standard favicon but a single-colored SVG image dedicated to this functionality.

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 as seen above, 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. 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.

How to customize a favicon for Windows Metro tiles, see Bernard (2019). And RealFaviconGenerator takes care of everything.

7. Chrome tab color on Android

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.


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


First published on 27 January, 2021.

This version: 1.0.0-beta.1

Discussion (0)

pic
Editor guide