Favicons Explained
Understand how favicons work, discover the different favicon formats and sizes, and learn best practices for modern websites.
A favicon is the small icon displayed next to a website's title in browser tabs, bookmarks, history pages and other browser interfaces. Although tiny, favicons play an important role in branding, usability and recognition.
Modern websites often provide multiple favicon files in different formats and sizes to ensure the icon appears correctly across browsers, operating systems and devices.
What Is a Favicon?
A favicon is a small website icon associated with a web page or application. Browsers automatically display it in tabs, bookmark lists and various navigation interfaces to help users identify websites quickly.
Why Favicons Matter
- Improve brand recognition.
- Help users identify browser tabs.
- Enhance bookmark visibility.
- Create a more professional appearance.
Where Favicons Appear
| Location | Uses Favicon |
|---|---|
| Browser tab | Yes |
| Bookmarks | Yes |
| Browser history | Yes |
| Pinned shortcuts | Yes |
Common Favicon Formats
Modern browsers support several favicon formats. PNG is widely used, SVG is becoming increasingly popular for scalable icons and ICO remains common for legacy browser compatibility.
| Format | Typical Use |
|---|---|
| ICO | Legacy browsers |
| PNG | General compatibility |
| SVG | Modern scalable icons |
Adding a Favicon
Favicons are usually linked from the HTML head using the link element. Browsers automatically download and display the referenced icon.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Recommended Sizes
Different devices use different icon sizes. Providing multiple resolutions ensures the favicon remains sharp across desktops, mobile devices and application shortcuts.
| Size | Common Usage |
|---|---|
| 16×16 | Browser tabs |
| 32×32 | Bookmarks |
| 180×180 | Apple touch icon |
| 512×512 | Web app manifest |
SVG Favicons
SVG favicons scale perfectly at every resolution while keeping file sizes small. They are supported by modern browsers and simplify maintaining multiple icon sizes.
Brand Consistency
A favicon should remain recognizable even at very small sizes. Simple shapes, strong contrast and minimal detail usually produce the clearest results.
Browser Compatibility
Modern browsers support PNG, SVG and ICO favicons, although support varies slightly depending on the browser version and operating system. Including multiple formats ensures the widest compatibility.
Apple Touch Icons
Apple devices use dedicated touch icons when users add websites to their home screen. These icons are typically larger than standard browser favicons and should be supplied separately.
<link
rel="apple-touch-icon"
href="/apple-touch-icon.png"
>Progressive Web Apps
Progressive Web Apps define application icons inside the web app manifest. Browsers use these icons when installing the application on desktops or mobile devices.
Dark Mode Considerations
Favicons should remain recognizable on both light and dark browser themes. Icons with transparent backgrounds and strong contrast generally perform best across different interfaces.
Performance
Favicons are typically very small and have little effect on page performance. However, optimized images still reduce unnecessary bandwidth and improve overall efficiency.
Common Mistakes
- Using only one favicon size.
- Uploading overly detailed logos.
- Ignoring SVG support.
- Forgetting Apple touch icons.
- Not updating the favicon after rebranding.
Best Practices
Provide multiple icon sizes, include SVG where supported, optimize image files, use simple recognizable designs and keep branding consistent across browser tabs, bookmarks and installed web applications.
Frequently Asked Questions
What is a favicon?
A favicon is the small icon associated with a website. Browsers display it in tabs, bookmarks, browser history and other navigation interfaces to help users quickly recognize a site.
What favicon size should I use?
Modern websites typically provide multiple sizes. Common examples include 16×16 and 32×32 pixels for browser tabs, 180×180 pixels for Apple touch icons and 512×512 pixels for web app manifests.
Can I use SVG as a favicon?
Yes. Modern browsers support SVG favicons, allowing icons to scale perfectly at any resolution while keeping file sizes small. Many websites also provide PNG or ICO versions for broader compatibility.
Why isn't my new favicon appearing?
Browsers cache favicons aggressively. If you've updated the icon but still see the old version, clearing the browser cache or performing a hard refresh usually resolves the issue.
Do websites still need ICO files?
Many modern websites work perfectly with PNG and SVG favicons, but including an ICO file can improve compatibility with older browsers and legacy systems.
Helpful HTML & Image Tools
An SVG Icon Preview helps verify favicon readability at small sizes, a Responsive Image Size Calculator assists in generating appropriately sized favicon assets, an Image Dimension Checker confirms icon resolutions before deployment, an HTML Link Extractor lets you inspect favicon link elements in existing pages, and an HTML Formatter keeps your document head clean and well organized.
Conclusion
Although favicons are among the smallest assets on a website, they have a meaningful impact on branding, usability and user recognition. Providing optimized icons in appropriate formats and resolutions ensures they appear sharp across browser tabs, bookmarks, mobile devices and installed web applications. By combining SVG, PNG and other supporting assets where necessary, developers can create favicon systems that remain compatible, lightweight and easy to maintain.