The Complete Favicon Guide: Make Your Website Memorable

You've got 23 tabs open. You need to find that one site from earlier. All you can see is a row of tiny icons. You spot it instantly—the blue bird, the red G, the colorful circles. But that other site you visited? The one with the generic document icon? You'll never find it. You don't even remember what it was called. It's functionally invisible.

Your favicon is the first thing users see and the last thing they remember.

We used to think favicons were an afterthought—that little image you throw in at the end. Then we watched users struggle to find our site in their tabs. That 16x16 pixel square does more heavy lifting for brand recognition than any hero image. This guide covers everything we've learned about making those tiny pixels count.

What Is a Favicon?

Favicon stands for "favorite icon"—originally the icon shown when you bookmarked (favorited) a website. Today, favicons appear in:

• Browser tabs
• Bookmarks and favorites
• Browser history
• Search results (mobile)
• Progressive Web App icons
• Home screen shortcuts
• Reading lists
• Tab groups

That 16×16 pixel icon does a lot of heavy lifting for brand recognition.

Why Favicons Matter

Brand Recognition

Users develop visual memory of favicons. When scanning 20 open tabs, a distinctive favicon lets them find your site instantly. We recognize Gmail, GitHub, and YouTube by their favicons alone—no need to read text.

Professionalism

Missing favicons signal an unfinished site. That generic browser icon (or worse, the broken icon placeholder) undermines credibility. We've seen users question site legitimacy over missing favicons.

User Experience

In a world of tab overload, favicons are navigational aids. They help users:

• Find your tab quickly
• Recognize bookmarks at a glance
• Identify your PWA on their home screen
• Trust they're on the right site

SEO (Indirectly)

While favicons don't directly affect rankings, they can improve click-through rates. Google shows favicons in mobile search results—a professional icon can make users more likely to click.

Favicon Sizes and Formats

Here's where it gets complicated. Different devices and contexts need different sizes:

Essential Sizes

Formats

ICO (favicon.ico):

• Traditional format
• Can contain multiple sizes in one file
• Best browser compatibility
• Required for older browsers

PNG:

• Modern format
• Better compression
• Supports transparency
• Used for Apple and Android icons

SVG:

• Vector format (scales infinitely)
• Small file size
• Modern browser support only
• Great for simple icons

Our Standard Setup

When we set up a new project, we generate:

/favicon.ico          (16×16 + 32×32 combined)
/favicon-16x16.png
/favicon-32x32.png
/apple-touch-icon.png (180×180)
/icon-192.png
/icon-512.png

This covers virtually every use case.

Creating Effective Favicons

Start with a Strong Source Image

Your favicon needs to work at tiny sizes. Start with:

• A high-resolution source (at least 512×512)
• Simple shapes that remain recognizable when scaled down
• Bold colors with sufficient contrast
• Minimal text (usually unreadable at favicon sizes)

Simplify for Small Sizes

What works at 512×512 may be an unrecognizable blob at 16×16. We learned this the hard way with our first logo—beautiful at full size, muddy soup as a favicon.

Tips:

• Remove fine details
• Thicken thin lines
• Increase contrast
• Consider a simplified version for small sizes

Test at Actual Size

Always preview at the sizes users will see:

• View at 16×16 (browser tab)
• View at 32×32 (high-DPI tab)
• Check in both light and dark browser themes

What looks great in your design app might not survive the shrink.

Consider Dark Mode

Browser tabs can appear on light or dark backgrounds depending on the theme. Ensure your favicon:

• Has enough contrast on both light and dark
• Doesn't disappear into the background
• Consider using a subtle border if needed

Using Our Favicon Creator

Our Favicon Creator generates all the sizes you need:

Features

• Multiple format output - ICO, PNG in all standard sizes
• Apple Touch Icon - 180×180 with optional background
• PWA icons - 192×192 and 512×512
• Preview - See how it looks at different sizes
• Download all - Get everything in one package

How to Use It

1. Upload your source image (PNG or SVG, at least 512×512)
2. Preview the generated sizes
3. Adjust if needed (crop, background color)
4. Download the complete favicon package
5. Implement using the provided code snippet

Everything processes in your browser—your images stay private.

Implementing Favicons

Basic HTML Implementation

Add these lines to your <head>:

<!-- Standard favicons -->
<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">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- For PWAs -->
<link rel="manifest" href="/site.webmanifest">

Web App Manifest (PWA)

For Progressive Web Apps, create a site.webmanifest:

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

SVG Favicon (Modern Browsers)

For browsers that support it:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

SVG favicons can adapt to dark mode:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #333; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="..."/>
</svg>

We love this approach for automatically adapting to user preferences.

Framework-Specific Implementation

Next.js: Place files in the /public folder and use the App Router metadata:

export const metadata = {
  icons: {
    icon: '/favicon.ico',
    apple: '/apple-touch-icon.png',
  },
}

React (Create React App): Place in /public folder. The default index.html already links to favicon.ico.

WordPress: Use the Customizer → Site Identity → Site Icon option, or link manually in your theme's header.php.

Favicon Best Practices

Do

• Use your logo or a simplified version - Consistency with branding
• Test at actual sizes - What works large might not work small
• Include all standard sizes - Cover all devices and use cases
• Update when you rebrand - Outdated favicons confuse users
• Use PNG for transparency - ICO doesn't handle transparency well on all browsers
• Consider SVG for simplicity - If your icon is simple, SVG works great

Don't

• Don't use text - Unreadable at 16×16
• Don't use complex images - They become blurry blobs
• Don't forget the Apple Touch Icon - iOS users will see a screenshot instead
• Don't skip the manifest - PWA functionality depends on it
• Don't use low-resolution sources - Upscaling looks terrible

Common Favicon Problems

Favicon Not Showing

Possible causes:

• Wrong file path (check console for 404)
• Browser cache (hard refresh with Ctrl+Shift+R)
• Incorrect MIME type on server
• Missing link tags in HTML

Favicon Looks Blurry

Solutions:

• Use a simpler design
• Provide multiple sizes
• Start with a larger source image
• Consider hand-crafting the 16×16 version

Favicon Looks Different on Different Devices

Why it happens:

• Different sizes being used
• Platform-specific rendering
• Color profile differences

Solution: Test on actual devices and platforms, not just your development machine.

Apple Device Shows Wrong Icon

Fix: Ensure you have the Apple Touch Icon:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

The Apple Touch Icon is separate from the standard favicon.

Favicon Design Tips

Single Letter or Symbol

The most effective favicons are often:

• A single letter (Google's "G", Facebook's "f")
• A simple symbol (Twitter's bird, GitHub's octocat)
• An abstract mark (Airbnb, Spotify)

Complex logos rarely work at 16×16.

Color Matters

• Use your brand's primary color
• Ensure contrast with common browser backgrounds
• Consider both light and dark themes
• Avoid colors that blend into browser UI

Embrace Simplicity

When we designed our favicon, we started with our full logo and kept simplifying until it worked at tiny sizes. The result was much simpler than our logo—and much more recognizable in a browser tab.

Testing Your Favicon

Browser Testing

Check in:

• Chrome, Firefox, Safari, Edge
• Incognito/private mode (avoids cache)
• Different operating systems if possible

Device Testing

Check on:

• Desktop (standard and high-DPI displays)
• iOS (Safari and home screen)
• Android (Chrome and home screen)

Online Tools

Several sites let you preview favicons:

• RealFaviconGenerator's checker
• Favicon checker tools
• Your browser's developer tools

Conclusion

In a world of 30 open tabs, your favicon is your site's face.

Don't let your site be the invisible one—the generic icon that users scroll past while hunting for something recognizable. A good favicon takes minutes to create and pays dividends every time someone opens their browser. It's brand recognition at scale, working 24/7 in every tab, every bookmark, every home screen.

Use our Favicon Creator to generate all the sizes and formats you need. Simplify your design for small sizes. Test on actual devices. Then never worry about it again—your site will be the one users can actually find.

Keep Reading

• Image Optimization Guide - Optimize all your site's images
• Personal Branding Guide - Build your visual identity
• Side Project Launch Guide - Launch checklist including favicons

Related Tools

• Favicon Creator - Generate all favicon sizes and formats
• Image Reducer - Optimize your source images