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: 800;
        font-size: 59px;
        font-family: monospace;
        fill: OrangeRed; 
        } 
    </style>
    <text class="small" x="" y="39" textLength="87">ABC</text>    
</svg>

Note, without the seemingly insignificant attribute xmlns=”http://www.w3.org/2000/svg" an SVG image does not work as a favicon, but will be rendered if used in an img tag. If ever your SVG favicon is not displayed and there is no error in the console, make sure you included the indispensable xmlns xml namespace attribute.

In my sample Javascript module the reference to the link element is retrieved using its id favLink. Using meaningful ids is the best way to get the reference of an element. href of the link has to be changed in response to the focus and blur events of the window object. window object represents a browser window, which typically is a browser tab. The focus event occurs when the tab is clicked, whereas the opposite blur event is emitted…