A favicon is the small icon that appears in browser tabs, bookmarks, browser history, and desktop shortcuts. The name comes from "favorite icon" — it was originally shown in the Favorites/Bookmarks list in Internet Explorer.
Despite being tiny, favicons significantly impact brand recognition and user experience. Users with many tabs open identify sites by their favicon before reading the tab title. A missing or poor favicon signals an unfinished or unprofessional site.
All the favicon files a website needs in 2025
A complete favicon implementation requires multiple files for different contexts:
Browser favicons
- favicon.ico: Legacy format containing 16×16 and 32×32 versions. Still needed for broad compatibility, particularly for older browsers and bookmark managers.
- favicon-16x16.png: Small browser tab icon
- favicon-32x32.png: Standard browser tab on higher-density screens
Apple devices
- apple-touch-icon.png (180×180): When users add your site to their iPhone or iPad home screen. Without this, iOS uses a screenshot of your page instead — which looks terrible.
Android and Progressive Web Apps
- android-chrome-192x192.png: Android Chrome home screen icon
- android-chrome-512x512.png: PWA splash screen and high-DPI displays
- site.webmanifest: JSON file telling browsers about your PWA icons, theme color, and display mode
The HTML to include
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Place these in the <head> of every page, or once in your root layout component.
Favicon design best practices
Simplicity is essential
At 16×16 pixels, you have 256 pixels total to work with. Complex logos become unrecognizable. The most effective favicons are:
- Single letter or monogram
- Simple icon or symbol
- Highly simplified version of a wordmark (first letter only)
High contrast
Favicons appear on both light and dark browser chrome. Test your favicon against both white and dark grey backgrounds to ensure it's visible in both. Add a background color if your logo is too light for white browser chrome.
Avoid thin lines
Lines thinner than 2 pixels disappear at small sizes. Bold, solid shapes work best. If your logo has thin elements, create a favicon variant specifically designed for small sizes.
Match brand colors
Your favicon should use your primary brand color. Consistency between your favicon and your site builds brand recognition over time.
Common favicon mistakes
- Only providing a single
.icofile (misses iOS and Android) - Using a logo that's too complex to read at 16px
- Forgetting the apple-touch-icon (iOS home screen gets a screenshot)
- Not including the webmanifest (breaks PWA icon requirements)
- Using a white icon without a background (invisible on light browser chrome)
How to generate favicons free
- Go to Favicon Generator
- Enter text/emoji or upload your logo
- Customize background color and border radius
- Preview all sizes from 16px through 512px
- Download the complete favicon package (all PNG files + webmanifest)
- Copy the HTML snippet and paste into your site's
<head>