best-practices8 min read

What Is favicon.ico? Complete Guide to Website Favicons in 2026

Everything you need to know about favicon.ico — what it is, why it matters, required sizes for every platform, how to create one, and common mistakes that hurt your site.

March 14, 2026

favicon.icofaviconfree faviconwebsite faviconfavicon sizeshow to create faviconfavicon formatbrowser icon

That tiny icon in your browser tab? That's a favicon. Specifically, it starts with a file called favicon.ico sitting in the root of your website. It seems trivial — it's 16x16 pixels. But missing or broken favicons affect your brand perception, bookmark visibility, search result appearance, and even your SEO.

What Is favicon.ico?

favicon.ico is a small icon file that browsers look for at https://yourdomain.com/favicon.ico. The name stands for "favorites icon" — originally created by Microsoft in 1999 for Internet Explorer's favorites/bookmarks bar.

The .ico format is special: it's a container that can hold multiple image sizes in a single file. A well-made favicon.ico typically contains 16x16, 32x32, and 48x48 pixel versions of your icon. The browser picks the most appropriate size for the context.

Where Favicons Appear

Your favicon shows up in more places than you'd think:

| Context | Size Used | Impact | |---------|-----------|--------| | Browser tabs | 16x16 or 32x32 | Brand recognition while browsing | | Bookmarks bar | 16x16 | Users identify your site in saved bookmarks | | Browser history | 16x16 | Recognition when revisiting sites | | Google search results | Variable | Increases CTR from search pages | | Mobile home screen | 180x180 (Apple) / 192x192 (Android) | App-like presence on phones | | Windows taskbar | 32x32 or 48x48 | When users pin your site | | Tab overview (Safari, Chrome) | 32x32 | Distinguishes your tab from dozens of others | | Password managers | 16x16 or 32x32 | Identifies saved logins | | RSS readers | Variable | Brand presence in feed lists |

Why favicon.ico Matters for SEO

Google started showing favicons in mobile search results in 2019 and expanded to desktop in 2023. A missing or broken favicon means:

A generic globe icon appears next to your site in search results — making your listing look unprofessional compared to competitors with proper favicons
Lower click-through rates — users subconsciously trust results with recognizable brand icons
Crawl waste — browsers and bots request /favicon.ico on every page load. If it returns a 404, that's wasted server requests and 404 errors in your logs

Google's guidelines specifically state that your favicon should be "a visual representation of your website's brand" and recommend providing it in multiple formats.

All Favicon Sizes You Need in 2026

The days of just having a single favicon.ico are over. Modern browsers and devices expect multiple formats and sizes:

Required Files

| File | Size | Purpose | |------|------|---------| | favicon.ico | 16x16, 32x32, 48x48 (multi-size) | Legacy browsers, browser tabs | | favicon.svg | Scalable | Modern browsers (crisp at any size) | | favicon-16x16.png | 16x16 | Fallback for browsers that don't read .ico well | | favicon-32x32.png | 32x32 | Retina browser tabs, taskbar | | apple-touch-icon.png | 180x180 | iPhone/iPad home screen | | android-chrome-192x192.png | 192x192 | Android home screen, PWA | | android-chrome-512x512.png | 512x512 | Android splash screen, PWA install |

The HTML You Need

Add these tags inside your <head>:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

Web App Manifest (site.webmanifest)

For Android devices and PWAs, you also need a manifest file:

{
  "name": "Your Site Name",
  "short_name": "Site",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

How to Create a favicon.ico

Option 1: Use a Favicon Generator (Fastest)

The easiest approach is uploading your logo to a free favicon generator that creates all required sizes automatically. Upload a high-resolution PNG or SVG of your logo, and you get back every file you need — favicon.ico, PNGs in all sizes, apple-touch-icon.png, and the HTML code to paste into your site.

WebScore's Favicon Generator creates all required files from a single image upload, including the web manifest and HTML snippet.

Option 2: Create Manually with an Image Editor

If you prefer manual control:

Start with a 512x512 PNG — this is your master file
Simplify your logo — at 16x16, detail is invisible. Use a simple icon or letter mark
Export PNG versions at 16x16, 32x32, 180x180, 192x192, and 512x512
Convert to ICO — use an online converter to combine 16x16, 32x32, and 48x48 into a single .ico file
Create an SVG version if your logo works as vector graphics
Place files in your website's root directory

Option 3: SVG Favicon (Modern Approach)

SVG favicons are supported by all modern browsers and offer advantages:

Scalable — crisp at any size, any display density
Small file size — typically 1-5 KB
Supports dark mode — you can use CSS prefers-color-scheme inside SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    circle { fill: #10b981; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #34d399; }
    }
  </style>
  <circle cx="50" cy="50" r="45"/>
  <text x="50" y="65" font-size="50" text-anchor="middle" fill="white" font-family="system-ui">W</text>
</svg>

Important: Always keep favicon.ico as a fallback. Some older browsers and tools (Slack previews, RSS readers, some crawlers) still look for it specifically.

Common Favicon Mistakes

1. No favicon.ico at the Root

The most common mistake. Browsers automatically request /favicon.ico even without a <link> tag in your HTML. If this file doesn't exist, you get:

404 errors in your server logs (on every single page load)
A generic icon in browser tabs
Missing icon in Google search results

2. Wrong Dimensions in the ICO File

A favicon.ico that only contains a 16x16 image looks blurry on retina displays and in contexts that need 32x32 or 48x48. Always include multiple sizes in the ICO container.

3. Missing Apple Touch Icon

Without apple-touch-icon.png, iPhones and iPads show an ugly screenshot thumbnail when users save your site to their home screen. This is a missed branding opportunity — your icon should look like a native app.

4. Using a Full Logo Instead of an Icon

Your company logo probably has text. At 16x16 pixels, text is unreadable. Use a simplified icon mark — the first letter of your brand, your logo symbol, or a distinctive shape. Think of how Twitter uses the bird, not "Twitter" text.

5. Transparent Background Issues

Transparent PNGs work great for favicon.ico and browser tabs, but Apple Touch Icons should have a solid background. iOS adds rounded corners and expects a filled square — transparency results in a black or white background that may look broken.

6. Not Testing Across Contexts

A favicon that looks perfect in Chrome's tab bar might be invisible against Safari's dark tab bar, or look broken on an Android home screen. Test in multiple contexts.

Use WebScore's Favicon Checker to instantly verify your favicon setup across all formats, sizes, and devices.

Favicon Best Practices

Design:

Keep it simple — 1-2 colors, no fine detail
Use your brand's primary color
Ensure contrast against both light and dark backgrounds
Test at actual size (zoom out, don't zoom in)

Technical:

Serve from your root domain (not a CDN subdomain)
Set long cache headers (favicons rarely change)
Keep file sizes small: ICO under 15 KB, PNGs under 5 KB each
Include both ICO and SVG for maximum compatibility
Always provide the Apple Touch Icon

SEO:

Ensure /favicon.ico returns a 200 (not a redirect or 404)
Use absolute URLs in link tags for consistency
Don't block favicon files in robots.txt
Match your favicon to your Google Business Profile icon for brand consistency

Check Your Favicon Setup

Not sure if your favicon is properly configured? Run your site through WebScore's Favicon Checker — it tests every format, size, and platform requirement in seconds. It shows you exactly what's missing and how to fix it.

If you need to create favicons from scratch, the Favicon Generator handles everything: upload your logo, get all files and HTML code ready to deploy.

Check your favicon setup →

best-practices

Scan Your Website Now

Get a comprehensive analysis of your website's performance, SEO, security, and more.