Favicon Best Practices in 2026

Getting favicons right in 2026 means balancing modern features with backward compatibility. This guide distills everything into an actionable checklist.

The 2026 Favicon Checklist

1. favicon.ico (32×32) — Place at root. Universal fallback.
2. favicon-32x32.png — For modern browser tabs (Retina).
3. favicon-16x16.png — For standard-DPI browser tabs.
4. apple-touch-icon.png (180×180) — For iOS home screen.
5. android-chrome-192x192.png — For Android and PWA.
6. android-chrome-512x512.png — For PWA splash screens.
7. site.webmanifest — PWA manifest referencing the Android icons.
8. HTML <link> tags — In every page's <head>.

Design Best Practices

Keep It Simple

At 16×16 pixels, fine details disappear entirely. The best favicons are:

• A single letter or symbol
• High contrast between foreground and background
• Bold, clean shapes without gradients or thin lines

Use Transparent Backgrounds

Solid colored backgrounds look outdated in modern browser UIs. Transparent PNGs blend naturally with any browser theme — light mode, dark mode, or custom themes.

Exception: Apple Touch Icons should have a solid background because iOS fills transparent areas with black.

Design for Both Light and Dark

With dark mode becoming standard, test your favicon on both light and dark backgrounds. A dark favicon on a dark browser tab is invisible. Consider using an SVG favicon with prefers-color-scheme support (see our SVG favicon guide).

Start Large, Scale Down

Always design at 512×512 or larger, then export at each required size. Hand-optimize the 16×16 version if needed — automatic downscaling sometimes produces muddy results.

Technical Best Practices

File Placement

• Place favicon.ico at the root of your domain — browsers look there automatically
• Other files can go in a /favicons/ subdirectory if you prefer organization
• Use absolute paths in your HTML (/favicon.ico, not favicon.ico)

Caching Strategy

• Set long cache headers (1 year) for favicon files — they rarely change
• When you do update, use a cache-busting query string: href="/favicon.ico?v=2"
• Or rename the file: href="/favicon-v2.ico"

Performance

• Optimize PNG files with tools like TinyPNG or pngquant
• A 32×32 PNG should be under 2KB
• Don't serve a 512×512 image when the browser only needs 32×32

SEO Best Practices

Google Search Results

Google shows favicons in search results. To ensure yours appears:

• Provide a favicon that is a multiple of 48px (48×48, 96×96, etc.)
• Don't block favicon files in robots.txt
• Favicon must be on the same domain as the website
• Must be a square image
• Must not be inappropriate, offensive, or a generic icon

Consistency Across Pages

Use the same favicon on all pages of your site. Different favicons per page confuses users and dilutes brand recognition.

Common Anti-Patterns to Avoid

Anti-Pattern	Why It's Bad	What to Do Instead
Only providing favicon.ico	Missing iOS/Android/PWA support	Provide full set of sizes
Using a full logo with text	Unreadable at 16px	Use a symbol or monogram
Renaming JPEG to .ico	Browser may reject it	Use proper format conversion
Serving favicon from CDN only	Google may not index it	Host on same domain
Animated favicons	Distracting, poor support	Use a static icon
No favicon at all	Unprofessional, hurts SEO	Add one — it takes 5 minutes

Testing Your Favicon Setup

1. Browser tab — Check Chrome, Firefox, Safari, Edge
2. Bookmarks — Bookmark the page and check the icon
3. iOS home screen — Add to home screen on iPhone
4. Android home screen — Add to home screen on Android
5. Google Search — Use Search Console to check favicon indexing
6. Social sharing — Check OG image for link previews

Want to see how your competitor handles their favicon? Use Mzu favicondl to instantly check any website's favicon setup.