Recently, Tao Shu’s Blog published an article about reciprocal links, and I took the initiative to request a link exchange. Tao Shu promptly responded and kindly reminded me that adding a favicon (icon) to my blog would help RSS subscribers quickly identify it. At that moment, I wondered, “What is a favicon?” (The struggles of a backend developer!)
Later, I consulted DeepSeek:
In web design, icons are small yet significant elements. They assist users in quickly identifying a website and enhancing the overall user experience.
Common Usage Scenarios:
- Browser Tab: Displayed next to the webpage title.
- Bookmark Bar: Shown when users save a webpage.
- Home Screen Icon: Displayed when a webpage is added to the home screen on mobile devices.
- PWA (Progressive Web App): Used as the application icon.
For example:
Icon displayed in the browser tab.
The icon displayed in the bookmark bar.
The icon can be displayed even on Android devices, as the Chrome browser’s feature to add a webpage to the home screen allows this.
How to Set Up
The simplest way to set an icon is to add a line in the <head> section of the webpage.
|
|
If you are using Hugo or other tools, there may be specific settings for the favicon.
Some large websites, such as google.com and apple.com, may have more considerations, and their setups may differ.
Important Considerations
The icon size is also essential to optimize the user experience and achieve the best display effect across various scenarios.
Common Sizes:
- 16x16: Browser tab icon.
- 32x32: Bookmark bar icon.
- 64x64: High-resolution screen icon.
- 180x180: iOS device home screen icon.
- 192x192 and 512x512: PWA icons.
This is why we often see multiple icons set on some websites, such as the Hugo website.
Modern browsers support selecting different icon sizes based on various scenarios and screen PPI, striving to achieve the best display effect in all situations.
Choosing Icon Formats
Icons can be created in different image formats, specified by the type attribute. Standard icon formats include:
- ICO: Traditional format, good compatibility, supports multiple sizes.
- PNG: Modern format, supports transparent backgrounds, and is suitable for high-resolution screens.
- SVG: Vector format, infinitely scalable without losing quality, suitable for responsive design.
Multi-Resolution Icons
If maintaining multiple icon files seems cumbersome, you can use a multi-resolution icon (Multi-Resolution ICO or Multi-Size ICO), a single file containing various sizes and color depths. This allows multiple bitmaps (BMP or PNG format) to be stored in one file.
An ICO file includes:
- File Header: Defines the ICO file type and the number of images it contains.
- Image Directory: Describes the size, color depth, offset, and other information for each image.
- Image Data: Contains the actual pixel data for the images.
When a browser needs an icon, it selects the most appropriate size from the ICO file. The downside is that an ICO file containing multiple sizes may be larger than a file with a single size.
This article does not delve deeper into topics such as the manifest.json unique to Android Chrome or the apple-mobile-web-app-capable for Apple devices. Interested readers are encouraged to explore further.
- Long Time Link
- If you find my blog helpful, please subscribe to me via RSS
- Or follow me on X
- If you have a Medium account, follow me there. My articles will be published there as soon as possible.