What is a Favicon? Complete Guide with Examples
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.