What is a Favicon? Complete Guide (2026)
Everything you need to know about favicons — what they are, where they appear, what sizes you need, and how to create and install one on your website.
Definition: What is a Favicon?
A favicon (short for "favorite icon") is a small icon associated with a website. It appears in browser tabs, bookmark lists, browsing history, search results, and on mobile home screens when a user saves a web page as a shortcut.
The name dates back to 1999 when Microsoft introduced the feature in Internet Explorer 5. Websites could place a file called favicon.ico in their root directory, and the browser would display it next to bookmarks in the "Favorites" menu. The convention stuck, and today every modern browser supports favicons — though the technology has evolved far beyond a single ICO file.
Modern favicons come in multiple sizes and formats. A typical website needs PNG icons for browser tabs, an Apple Touch Icon for iOS devices, Android Chrome icons for the home screen, and sometimes an SVG favicon for crisp rendering at any size.
Where Do Favicons Appear?
Favicons show up in more places than most people realize:
Browser Tabs
The most visible location. When users have multiple tabs open, the favicon is often the only way to identify your site at a glance. This uses the 16x16 or 32x32 size.
Bookmarks & Favorites
When someone bookmarks your page, the favicon appears next to the page title. A distinctive icon makes your site easy to find in a long bookmark list.
Google Search Results
On mobile, Google displays favicons next to each URL in search results. A missing favicon shows a generic globe icon. Having a clear favicon improves brand visibility and can increase click-through rates.
Mobile Home Screen
When users add your site to their phone's home screen, the Apple Touch Icon (180x180) or Android Chrome icon (192x192) is used as the app icon. Without these, the OS generates an ugly screenshot thumbnail.
PWA Install Prompts
Progressive Web Apps use the 192x192 and 512x512 icons from the web manifest for install dialogs and splash screens. These are required for PWA support.
Browser History & New Tab
Your favicon appears in browser history lists, frequently visited sites grids, and new tab pages. It's a constant touch point with returning visitors.
Why Favicons Matter for Your Website
Brand recognition. A favicon is one of the most frequently seen elements of your brand identity. Users see it every time they glance at their browser tabs. A recognizable favicon builds familiarity and trust over time.
Professional credibility. A missing favicon displays a generic icon (usually a globe or blank page), which signals an unfinished or unprofessional site. Having a proper favicon is one of the simplest things you can do to look polished.
User experience. When users have 10+ tabs open, favicons are the primary way they navigate between them. Without one, your tab becomes impossible to find.
Mobile home screen presence. More users are saving websites to their phone home screens. The Apple Touch Icon and Android Chrome icon determine how your site looks alongside native apps. A well-designed icon can rival any app store icon.
How Google Uses Favicons in Search Results
Since 2019, Google has displayed favicons next to URLs in mobile search results. In 2023, this expanded to desktop results as well. Your favicon appears directly in the search listing, making it a branding opportunity on the most important page on the internet.
Google's requirements for displaying favicons in search:
- The favicon must be a multiple of 48x48 pixels (e.g., 48x48, 96x96, 144x144). Google rescales to 16x16 for display.
- The favicon URL must be crawlable — it cannot be blocked by robots.txt.
- The icon should be visually representative of your brand and clearly visible against a white background.
- Inappropriate content (hate symbols, offensive imagery) will be replaced with a generic icon.
If Google can't find a valid favicon, it shows a default globe icon. This makes your result look less trustworthy compared to competitors who have branded favicons.
Favicon Formats Explained
ICO — The Legacy Standard
The original favicon format, introduced in 1999. An ICO file is a container that can hold multiple image sizes (typically 16x16, 32x32, and 48x48) in a single file. Still required for compatibility with older browsers and some PDF readers. Place it at /favicon.ico in your site's root directory.
PNG — The Modern Default
PNG favicons offer better compression than ICO, support full alpha transparency, and work in all modern browsers. You specify each size individually with a <link> tag. This is the format used for Apple Touch Icons, Android Chrome icons, and PWA manifest icons.
SVG — Resolution Independent
SVG favicons are vector-based, meaning they render crisply at any size without pixelation. Supported in Chrome, Firefox, Edge, and Safari 15+. A single SVG favicon can replace multiple PNG sizes, though you should still provide PNG fallbacks for compatibility. SVG favicons can also respond to prefers-color-scheme for automatic dark mode support.
All Favicon Sizes and When to Use Each
Here is the complete set of favicon sizes a modern website should include, organized by platform:
| Size | File Name | Purpose |
|---|---|---|
| 16x16 | favicon-16x16.png | Browser tab icon |
| 32x32 | favicon-32x32.png | Taskbar, bookmark bar, Retina tabs |
| 48x48 | favicon.ico (embedded) | Windows site icon, Google search |
| 96x96 | favicon-96x96.png | Android Chrome shortcut, Google TV |
| 120x120 | apple-touch-icon-120x120.png | iPhone Retina (iOS 7+) |
| 152x152 | apple-touch-icon-152x152.png | iPad Retina |
| 180x180 | apple-touch-icon-180x180.png | iPhone 6+, primary Apple Touch Icon |
| 192x192 | android-chrome-192x192.png | Android home screen, PWA install |
| 512x512 | android-chrome-512x512.png | PWA splash screen, hi-DPI |
| 150x150 | mstile-150x150.png | Windows 10 Start menu tile |
| 310x310 | mstile-310x310.png | Windows 10 large tile |
How to Create a Favicon
The fastest way to create a favicon is with an online generator. Our free favicon generator lets you create favicons in four ways:
- Upload an image — Drop in your logo or any image and the tool generates all sizes automatically. Best for brands that already have a logo.
- Type text — Enter one or two characters (your initials, brand letter) and choose from 20+ fonts. Great for text-based logos or quick prototypes.
- Pick an emoji — Select from hundreds of emojis for an instant, expressive favicon. Popular for side projects and personal sites.
- Choose an icon — Browse 180+ professional icons (Lucide icon library). Ideal for apps and SaaS products.
All methods let you customize corner radius, padding, background colors, gradients, and shadows. The download package includes PNG, ICO, SVG, site.webmanifest, browserconfig.xml, and ready-to-paste HTML code.
Ready to create your favicon?
Open Free Favicon GeneratorHow to Add a Favicon to Your Website
Once you've generated your favicon package, follow these steps:
Step 1: Upload the files
Place all the favicon files (PNGs, ICO, SVG, site.webmanifest, browserconfig.xml) in the root directory of your website — the same folder where your index.html lives. For example: https://yoursite.com/favicon.ico
Step 2: Add HTML to your <head>
Add these link tags inside the <head> section of every page:
Step 3: Test your favicon
After deploying, test your favicon by opening your site in multiple browsers (Chrome, Firefox, Safari, Edge). Check on mobile too — add the page to your home screen to verify the Apple Touch Icon and Android icon. You can also use our favicon checker to verify everything is set up correctly.
Tip: If you don't see the new favicon, try a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear your browser cache. Favicons can be aggressively cached.
Frequently Asked Questions
What does favicon stand for?
Favicon is short for "favorite icon." The name comes from Internet Explorer 5, which introduced the feature in 1999. When a user bookmarked a page (added it to their "Favorites"), the browser displayed a small icon next to the bookmark — hence "favorite icon," shortened to "favicon."
What size should a favicon be?
You need multiple sizes: 16x16 for browser tabs, 32x32 for taskbar icons, 180x180 for Apple Touch Icons, 192x192 for Android home screens, and 512x512 for PWA splash screens. A favicon generator can create all sizes from one image.
Do favicons affect SEO?
Favicons don't directly affect search rankings, but they appear next to your URL in Google's mobile search results. A recognizable favicon increases brand visibility and can improve click-through rates. Missing favicons show a generic globe icon, which looks less trustworthy.
What image format should a favicon be?
Use multiple formats for maximum compatibility: ICO for legacy browser support, PNG for modern browsers with transparency, and SVG for scalable vector icons. Most websites serve PNG favicons with an ICO fallback. A site.webmanifest file references PNG icons for PWA support.
Why is my favicon not showing?
Common reasons: the favicon file is not in the root directory, the HTML link tag has the wrong path, the browser cache is showing an old icon (try hard refresh with Ctrl+Shift+R), or the favicon file is corrupted. Use our favicon checker to diagnose the issue.
Ready to create your own favicon?