Transform your favicon into a darker aesthetic - Crafting the Perfect Site Icon

date

Dec 11, 2023

slug

darken-your-perfect-favicon-en

status

Published

What is a favicon

Simply put, favicons are the icons displayed in browser tabs or bookmarks.

If we're looking for a more detailed definition, we can refer to Wikipedia:

A favicon /ˈfæv.ɪˌkɒn/ (short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks.

How to set up

The most universally compatible method is to directly place a favicon.ico file in the root directory of the website. Many people are aware of this; however, what some might not know is that the icon file doesn't necessarily have to be in .ico format. It just needs to be named as favicon.ico.

Mainstream browsers (IE ==!) automatically search for favicon.ico in the root directory if there's no declaration of link rel="icon". Therefore, it's advisable to have such a file in the root directory.

Is this sufficient?

This alone is sufficient to meet the basic requirement of displaying the site icon without any additional configuration. However, if that's the only consideration, there might not be a need for this article. Placing favicon.ico solely in the root directory presents a few "inconveniences":

It loads last after the page has completed loading, whereas declaring it in <head> would load it first.

If multiple sites share a common root directory, using the same favicon.ico might struggle to meet individual customization needs. Sometimes, different pages may require different favicons.

Lastly, as applications become more diverse, there is a growing need for variously sized and designed icons to suit different scenarios.

For instance, Safari on iOS has a useful 'Add to Home Screen' feature (also present in Android Chrome or the new Edge). Without the correct icon declaration, it can't generate a reasonable desktop icon. The left two icons in the image below are the result of incorrect configuration.

Therefore, declaring the icon in <head> becomes crucial. Favicon is no longer confined to the .ico format; it can be .png, .svg, or even .gif, expanding the possibilities.

How to declare

A complete favicon system requires files in various sizes. Those interested can directly refer to this link (actually, the website in this link can help you generate almost all the necessary favicons with just a few clicks).

However, in practice, it may not be necessary to configure such a multitude of favicons. Here are a few commonly used sizes for reference:

Complaining about Safari's frustrating caching mechanism, which adds complexity to debugging the mask-icon.

Apple imposes several restrictions on the pinned tab icon for Safari, such as requiring a single layer, viewBox "0 0 16 16," and more. However, it seems that not strictly adhering to these restrictions may still allow normal usage, but I haven't delved deep into this.

Reference: Creating Pinned Tab Icons

I won't delve into more details about favicons. Those interested can refer to the following resources:

favicon-cheat-sheet by audreyfeldroy

realfavicongenerator.net/faq

Getting to the main point - Darkening

Two methods, with the JavaScript approach being more flexible, is recommended.

Modify the .svg style

Firstly, your favicon must be in .svg format; otherwise, the following steps won't apply. You can obtain such a file through Adobe Illustrator or some online conversion services. Your declaration might look something like this:

Next, you just need to modify this .svg file and add the prefers-color-scheme: dark property within its <style>. The browser will automatically invoke the corresponding style based on the system settings.

The complete .svg file would look something like this:

This method itself is not complicated, but it has two main limitations in practical use:

It can only be used for icons in .svg format.

It doesn't provide real-time updates. After switching between dark and light modes, you need to refresh the page to see the effect. It's not clear how different browser caches may impact this.

Ordinary visitors may not perceive the "lack of real-time updates" unless they specifically test it, but being aware of it can be inconvenient.

Hence, there is another "real-time" method.

Controlled through JavaScript

This is also the method used by GitHub. It involves replacing the href path in the declaration using JavaScript.

Suppose your declaration looks like this:

Please prepare two favicons for light and dark modes. The JavaScript code is as follows:

Code Reference: Updating your website favicon dynamically with dark mode

The addListener parameter is deprecated; it has been updated to the latest addEventListener in the code. Simply include the above JavaScript in the body.

Here's a pitfall to be aware of: if you have other link rel="icon" declarations, such as the 16x16 one, make sure to place the 32x32 size declaration at the beginning. Otherwise, the browser will use the 32x32 icon, and the JavaScript script will modify the first link rel="icon" declaration it encounters.

Now, you have a favicon that dynamically switches for dark mode in real-time.

Have fun!

💡

This article is licensed under CC BY-NC-SA 4.0. All rights to the work belong to the author. For commercial use, please contact the author for permission. For non-commercial use, please provide attribution to the source.

Author: Dukewill Source: blog.daisea.com