Dynamic favicon depending on browser tab focus

Enhance website dynamically loaded styled SVG favicons

Let’s decorate a web page with a favicon that changes depending on the tab focus. When a user opens a page, the tab shows a sample favicon. When the user switches to another tab, the favicon changes. In my illustration the two favicons differ only in colors. When the tab has focus, its favicon is red. When the tab looses focus, the favicon gets white.

Below I describe the three ways to implement dynamic favicons. You can see the results on a sample web page https://dynamicfavicon.onrender.com/.

How to set a favicon

The favicon is specified in a link tag in the HTML head. The href attribute of the link is assigned the URL of the icon. To change the favicon, its enough to replace the href value.

<link id="favLink" rel="icon" type="image/svg+xml" href="imgs/favicon.svg">

SVG image as favicon

Compared to the other acceptable image formats, SVG favicons might be the easiest to design. Their advantage is that they can include CSS rules, which facilitates their design and styling. The code of my two sample red and white favicons is identical except for their background-color and fill (SVG analog of color property) CSS properties.

<svg xmlns="http://www.w3.org/2000/svg" width="87" height="41"  >
    <style>
        text { 
        font-weight…