Mastering Favicons: How to Add and Optimize Icons for Your Website
This article explains what a favicon is, where it appears across browsers and devices, the recommended sizes and formats, and provides step‑by‑step HTML code to add and fine‑tune icons for optimal display on all platforms.
Yesterday I read a blog post by Tao Shu about adding a favicon(icon) to a site, and I asked what a favicon actually is.
Common usage scenarios
Browser tab : displayed next to the page title.
Bookmark bar : shown when a user bookmarks the page.
Home‑screen icon : appears when a web page is added to a mobile device’s home screen.
PWA (Progressive Web App) : used as the app icon. In the browser tab. In the bookmark bar.
On Android Chrome, adding a page to the home screen also shows the icon.
How to set
The simplest way is to add a line inside the <head> of your HTML.
<link rel="icon" type="image/png" href="/favicon.png">If you use Hugo or other generators, they may provide their own favicon configuration. Large sites like google.com and apple.com have more complex setups.
Things to note
To achieve the best visual result across scenarios, the icon size matters.
Common sizes
16x16 : browser tab.
32x32 : bookmark bar.
64x64 : high‑resolution screens.
180x180 : iOS home‑screen icon.
192x192 and 512x512 : PWA icons. Many sites include multiple icons, e.g., the Hugo website.
Modern browsers automatically select the appropriate size based on the device’s pixel density.
Choosing the icon format
Icons can be provided in different image formats using the type attribute. Common formats include:
ICO : traditional, widely compatible, supports multiple sizes.
PNG : modern, supports transparency, ideal for high‑resolution screens.
SVG : vector format, scales without loss, perfect for responsive design.
Multi‑resolution icons
If maintaining several separate files is cumbersome, you can use a multi‑resolution ICO that bundles multiple sizes and color depths in one file. An ICO contains a header, an image directory, and the actual image data. Browsers pick the best size from the file, though the combined file can be larger than a single‑size icon.
References
[1] Tao Shu’s blog: https://taoshu.in/
[2] Hugo official site: https://gohugo.io/
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.