Unlock the Power of Favicons: Formats, Dynamic Effects, and JavaScript Libraries
This article explains what favicons are, how to embed them using HTML link tags, compares common formats like .ico, .png, .svg and .gif, describes browser loading order, and shows how to create dynamic favicons with JavaScript libraries such as favico.js, Tinycon, and piecon.
Background
Favicons are tiny icons displayed in browser tabs, bookmarks, address bars, and other UI elements.
Including a Favicon
Browsers automatically request favicon.ico from the web server root. To specify a custom icon, add a <link> element in the <head>:
<link rel="shortcut icon" href="/path/to/favicon.ico" type="image/vnd.microsoft.icon">Attributes: rel – relationship type (e.g., shortcut icon). href – absolute or relative URL to the icon file. type – MIME type of the icon. sizes – optional dimensions (currently ignored by most browsers).
Supported Formats
.ico – best compatibility; MIME type image/vnd.microsoft.icon.
.png – widely supported, slightly less compatible than .ico.
.svg – scalable vector, sharp on high‑resolution screens.
.gif – can animate in browsers that support animated favicons (e.g., Firefox); not supported in Chrome or IE.
Browser Loading Order
When multiple <link rel="icon"> declarations exist, browsers choose differently:
Chrome prefers the entry with type="image/vnd.microsoft.icon" (typically .ico) and may ignore declaration order.
Firefox uses the last declared icon.
IE falls back to .ico and ignores PNG declarations.
Example: Bing declares an .ico file that is actually a PNG. Chrome displays it correctly, while IE9 falls back to the default icon.
Dynamic Favicons
Static favicons cannot convey real‑time information such as unread notification counts. JavaScript can replace the favicon at runtime using the Canvas API. Popular open‑source libraries:
favico.js – https://github.com/ejci/favico.js Tinycon – https://github.com/tommoor/tinycon piecon – https://github.com/lipka/piecon Typical usage pattern:
// Create a new instance
var favicon = new Favico({
animation: 'slide'
});
// Set a badge number
favicon.badge(5);
// Show a loading animation
favicon.spin();All three libraries generate the image on an off‑screen <canvas>, convert it to a data URL, and assign it to the href of the <link rel="icon"> element.
Example schematic (Canvas‑based generation):
Compatibility Considerations
Official MIME types are listed in the IANA registry:
https://www.iana.org/assignments/media-types/media-types.xhtml.
Image format support varies:
PNG – supported by Chrome, Firefox, Safari, Opera; IE does not support PNG favicons.
SVG – supported by modern browsers; older versions may ignore.
GIF – only Firefox (and some older browsers) support animated favicons.
Reference Implementation
To ensure the correct favicon is loaded, detect the user‑agent and inject the appropriate <link> element dynamically:
function setFavicon(url, type) {
var link = document.querySelector('link[rel~="icon"]') || document.createElement('link');
link.rel = 'icon';
link.href = url;
if (type) link.type = type;
document.getElementsByTagName('head')[0].appendChild(link);
}
// Example: use .ico for IE, .png for other browsers
var ua = navigator.userAgent;
if (/MSIE|Trident/.test(ua)) {
setFavicon('/favicons/favicon.ico', 'image/vnd.microsoft.icon');
} else {
setFavicon('/favicons/favicon.png', 'image/png');
}Baidu Waimai Technology Team
The Baidu Waimai Technology Team supports and drives the company's business growth. This account provides a platform for engineers to communicate, share, and learn. Follow us for team updates, top technical articles, and internal/external open courses.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.