What is a favicon?

A favicon, also known as a favorite icon, is a small image that you can add to your website to appear next to the title in web browser tabs. However, it is not the only place where a favicon appears.

Favicons will also appear in bookmarks, browser history, search engine results, and even website shortcuts on desktops and mobile devices.

Why should you add a favicon?

Let’s look at why you should include a favicon in your web project.

Increase User Attraction

Favicons are an excellent way to capture user attention and raise brand awareness. Users recognize websites with favicons more quickly than those without them. When you have a memorable favicon, it is easier for you to find your website in your browser history or bookmarks list.

When users add a shortcut to your website on their desktop, taskbar, or mobile device screen, they will be pleased to see an appealing favicon instead of a grey-colored browser icon.

As previously discussed, having a favicon on your website increases user engagement. Therefore, this improves the SEO of your website. Furthermore, modern web browsers search for a favicon image on your website, and if none are found, a 404 Not Found error is logged to the console. This situation is not good for SEO.

Simplicity

Favicon is the visual face of a specific brand and will help developers keep the design simple. Simple colors used in favicons, the small sizes, and the simplicity of the shape will help attract specific consumers of a brand. On the other hand, too much detail will make the Favicon look messy and cluttered.

Improve the legitimacy of your web app

Modern companies care about their online image since it is vital for the business’s success. So, the first appearance for a potential customer will judge the business’s quality and marketing strategies. So adequately used custom-made favicons will help gain the trust of their customers and ensure credibility to the company.

Modern browser changes for adaptive favicon support

Instead of a standard favicon.ico file, we can use an SVG favicon to create adaptive favicons. SVG favicons are supported by the latest versions of Google Chrome, Microsoft Edge, Firefox, and Opera browsers.

There are benefits of using SVGs instead of standard .ico files. First, You can easily style them with CSS. Second, you don’t have to worry about losing image quality when scaling (no need to have multiple size favicons). Third, you can create a favicon that adapts to the user’s color theme.

However, it will be best if you can keep a .ico favicon for users with older browser versions to provide a good experience.

Adding an adaptive favicon

To make an awesome adaptive favicon, include a favicon.svg file in your project. For example, you can make a “icons” folder in your React project and place the favicon.svg file inside.

Then, as shown below, set the favicon’s path in the index.html file. The inclusion of both .ico and .svg files ensure that the .ico file is loaded if SVG favicons are not supported in the user’s browser.

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

You can detect whether the user is using a light or dark color theme by using the prefers-color-scheme CSS media feature. Let’s use this to change the colors of our SVG favicon for the dark theme.

@media (prefers-color-scheme: dark) {
  .favicon-smiley { fill: #FFFF00 }
  .notification-background{ fill: #FFC300 }
}

You can include the above code within the SVG file’s <style> tags and any other CSS styles you want to add to the favicon.

Your favicon’s color will change when the user switches to a dark theme.

You can also easily add a notification badge to your favicon by adding two more SVG elements. The <circle> element can be used as the notification badge’s background. On the other hand, the <text> element can be used to display the notification count. There, You will have to set the position values of these two elements depending on the size of your SVG’s viewBox.

<circle class="notification-background" cx="140" cy="140" r="140" />
<text class="notification-number" x="130" y="230"> 1 </text>

Then, using React’s states, we can toggle the favicon and display a favicon with a notification badge if the user has notifications. I have used the useState hook in my code and implemented a toggle button to switch between the favicons with and without notification.

I have also implemented the SVG used for the favicon as a React component, and you can see a demo of how this works below.

Adaptive Favicon demo

Adaptive Favicon in action

You can check out the code and play with it from here!