👻Hands on favicons

Masa's blog post introduces how you can use favicon in 2023. In summary, he says you only need to include four types of images: ico favicon, svg favicon, apple-touch-icons, and web manifest icons. I wanted to play around with it to test if it works in 2024.

What we can achieve from appropriate favicons

• It can give customers a sense of your brand if you're running a business.

Project Settings

Directory Structure

favicon.svg preview

• For the future-proof favicon, we should use .svg favicons. Display technology improves consistently, at the same time there are existing devices we should support. .svg icons solve this problem since .svg icons don't get affected by screen size or resolutions since they consist of vectors and shapes. You'll be able to ensure your favicon looks good on all upcoming and current devices.

• When the browser tab is dark, you need to change the color of the favicon. It's only possible with .svg favicons.

• If you want to show your icon as a search result of google, the favicon should be in the multiple of 48*48px or 1:1 ratio svg. Since adding more 48px icon is a conversome, SVG is a go-to option.

favicon.ico preview

• According to CanIUse.com, only 72% of the browsers support svg icons. What's worse, the latest version of Safari(iOS, iPadOS, and macOS) doesn't fully support .svg icons. Therefore, you should polyfill svg icons for legacy browsers using .ico favicons. .ico favicons are supported by all browsers.

Polyfill means putting a piece of code to support older browsers that natively don't support some features.

Test Results

• I'm using the latest version of Chrome, so it supports svg favicons.
• However, the favicon selection algorithm of the browser chooses .ico favicons over svg favicons depending on how they are placed in the markup.
• Note that size attribute plays an important role here.

1. Both without size attribute

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

• .ico icon rendered instead of .svg icon on the tab.

2. Both with sizes='any'

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

• .ico icon rendered on the tab instead of .svg icon.

3. Only '.ico' favicon with sizes='any'

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

• .ico icon rendered on the tab instead of .svg icon.

4. Only '.svg' favicon with sizes='any'

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

• .ico icon rendered on the tab instead of .svg icon.

5. Setting sizes='48x48'

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

• .svg icon rendered on the tab
• We can see it finally does what we intend to. According to the original post, the favicon selection algorithm choose the last icon among the best appropriate ones in the markup, and it finds svg favicon more appropriate when .svg favicon is set to sizes='any' and .ico favicon is set to sizes=numberxnumber.

Conclusion

To make favicons work properly, you can set your icons this way.

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