What Is a Favicon? Complete Guide
Everything you need to know about the small icon that makes a big difference for your website.
Definition
A favicon (short for "favorites icon") is a small icon associated with a website. It appears in browser tabs, bookmark lists, browser history, search results, and on mobile home screens when users save a site as a shortcut.
Despite its small size — typically 16x16 or 32x32 pixels in a browser tab — a favicon plays an outsized role in how users perceive and interact with your website. It's often the first visual element a user notices and the primary way they identify your site among dozens of open tabs.
A Brief History
Favicons were introduced by Microsoft in 1999 with Internet Explorer 5. Originally, browsers looked for a file named favicon.ico in a website's root directory. The ICO format supported multiple resolutions in a single file, making it ideal for the limited rendering capabilities of early browsers.
Over the years, the ecosystem evolved significantly. Modern browsers now support PNG, SVG, and even animated favicons. Apple introduced the "apple-touch-icon" for iOS home screen bookmarks, and Google's Android platform requires specific sizes for Progressive Web App (PWA) icons.
Why Favicons Matter
- Brand recognition: A favicon is a micro-version of your brand identity. It reinforces your visual presence across every browser tab and bookmark.
- User experience: When users have multiple tabs open, a favicon helps them quickly locate your site. Without one, your tab shows a generic globe or document icon — indistinguishable from other favicon-less sites.
- Trust and professionalism: A missing favicon signals an unfinished or neglected website. Users — even subconsciously — associate the absence of a favicon with a less trustworthy site.
- SEO signals: While Google doesn't directly rank pages by favicon quality, favicons do appear in mobile search results. A recognizable icon improves click-through rates, which indirectly benefits SEO.
- PWA requirements: If you're building a Progressive Web App, icons at specific sizes (192x192 and 512x512) are mandatory for the web app manifest.
Where Favicons Appear
- Browser tabs — the most common location, using 16x16 or 32x32 pixels
- Bookmark/favorites bar — displayed next to the bookmark title
- Browser history — helps identify previously visited sites
- Google search results — shown next to your site's URL on mobile
- Mobile home screen — when users "Add to Home Screen", the 180x180 (iOS) or 192x192 (Android) icon is used
- Tab overview / task switcher — used in browser tab grid views and OS task switchers
Common Favicon Formats
| Format | Extension | Best For |
|---|---|---|
| ICO | .ico | Legacy browser support, multi-size embedding |
| PNG | .png | Modern browsers, best quality-to-size ratio |
| SVG | .svg | Scalable vector icons, dark mode support |
| WebP | .webp | Smaller file sizes (limited browser support for favicons) |
How to Create a Favicon
The fastest way is to use a favicon generator tool. You can create a favicon from text (a single letter or initials), from an existing image or logo, or even from an emoji. A good generator will produce all the sizes you need and provide the HTML code to add them to your site.
When designing a favicon, keep it simple. The icon will be displayed at very small sizes, so fine details get lost. Use bold shapes, high contrast colors, and avoid text smaller than a single large letter.
Adding a Favicon to Your Website
Once you have your favicon files, add them to your website's root directory and include the appropriate <link> tags in your HTML <head>:
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/favicon-180x180.png">Most modern frameworks (Next.js, Gatsby, WordPress) have built-in conventions for favicon placement. Check your framework's documentation for the recommended approach.
Ready to create your favicon?
Create Your Favicon Now