What is a Favicon? Complete Guide with Examples
Last updated: Invalid Date
A favicon (favorite icon) is a small icon associated with a website that appears in browser tabs, bookmarks, address bars, and mobile home screens. Modern favicon implementations require multiple sizes: 16x16 and 32x32 for browser tabs, 180x180 for Apple Touch Icon, and 192x192 and 512x512 for Android and PWA home screens. The ICO format bundles multiple sizes, while modern browsers also support PNG and SVG favicons.
How Does Favicon Work?
Browsers discover favicons through HTML link elements: <link rel='icon' href='/favicon.ico'>. When a page loads, the browser downloads the referenced icon and displays it in the tab. Modern implementations include multiple link elements for different contexts: rel='icon' for browser tabs, rel='apple-touch-icon' for iOS, and Web App Manifest entries for Android. SVG favicons (type='image/svg+xml') scale perfectly to any size and can adapt to dark mode via embedded CSS media queries.
Key Features
- Multi-size generation from a single source: 16x16, 32x32, 48x48, 180x180, 192x192, 512x512
- ICO format bundling multiple sizes into one file for legacy browser compatibility
- Apple Touch Icon generation (180x180) for iOS home screen bookmarks
- PWA icon generation (192x192, 512x512) with web app manifest integration
- SVG favicon support for perfect scaling and dark mode adaptation
Common Use Cases
Brand Recognition in Tabs
With users having 10-30+ tabs open, a distinctive favicon is the primary way to identify your site. It's a critical micro-branding element that builds familiarity.
PWA Installation
Progressive Web Apps require properly sized icons in the manifest for home screen installation, splash screens, and app switcher displays on mobile devices.
Search Result Branding
Google displays favicons in mobile search results next to your URL. A clear, recognizable favicon improves your listing's visual appeal and credibility.
Why Favicon Matters
Understanding favicon is essential for anyone working in graphic design and visual media. It is not just a theoretical concept — it directly impacts the quality, efficiency, and reliability of your work. Professionals who understand the underlying principles make better decisions about which tools and approaches to use.
Whether you are a beginner learning the fundamentals or an experienced professional looking for a quick refresher, grasping how favicon works helps you debug issues faster, communicate more effectively with your team, and choose the right tool for each specific task.
Getting Started with Favicon
The fastest way to learn favicon is to experiment with it hands-on. Use our free tools linked above to try different inputs and see how the output changes. Start with simple examples, then gradually increase complexity as you build intuition for how favicon behaves.
For deeper learning, explore the related guides linked at the bottom of this page — they cover adjacent concepts that will strengthen your understanding of the broader ecosystem. Each guide includes practical examples and links to tools you can use immediately.
Frequently Asked Questions
What sizes do I need for a complete favicon setup?
Can I use an SVG as a favicon?
Why isn't my favicon showing?
How do I make a favicon that looks good at 16x16?
Related Guides
Related Tools
Was this page helpful?
Written by
Tamanna Tasnim
Senior Full Stack Developer
Full-stack developer with deep expertise in data formats, APIs, and developer tooling. Writes in-depth technical comparisons and conversion guides backed by hands-on engineering experience across modern web stacks.