Favicon Guide: How to Create Perfect Website Icons

March 16, 2026 · 6 min read

A favicon is the small icon displayed in browser tabs, bookmarks, history, and search results next to your website's name. Despite its small size, a favicon plays a crucial role in brand recognition and user experience. A missing or broken favicon looks unprofessional and makes your site harder to identify among multiple open tabs. This guide covers everything you need to know about creating perfect website icons.

What Is a Favicon?

The term "favicon" is short for "favorites icon," originating from Internet Explorer's bookmark feature called "Favorites." Today, favicons appear in multiple contexts throughout the browser experience:

• Browser tabs: The primary location, helping users identify your site among open tabs
• Bookmarks bar: Displayed alongside saved page titles
• Browser history: Helps users visually scan their browsing history
• Google search results: Shown next to your URL in mobile search results
• Home screen icons: When users add your site to their mobile home screen
• Windows taskbar: When your PWA is pinned to the Windows taskbar

Sizes and Formats

Modern browsers and platforms require multiple favicon sizes and formats for optimal display:

ICO Format

The traditional favicon.ico placed in the website root directory. ICO files can contain multiple sizes in a single file (typically 16×16, 32×32, and 48×48 pixels). While older, this format provides maximum backward compatibility:

<link rel="icon" href="/favicon.ico" sizes="48x48">

PNG Format

PNG favicons offer better quality and transparency support. Modern browsers prefer PNG over 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">

SVG Format

SVG favicons are scalable, look crisp at any size, and support CSS media queries for dark mode adaptation:

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

SVG favicons can use CSS prefers-color-scheme to display different colors in light and dark mode — a feature unique to the SVG format.

Complete Size Reference

• 16×16: Browser tab (standard resolution)
• 32×32: Browser tab (retina/HiDPI), Windows taskbar
• 48×48: Windows desktop shortcut
• 180×180: Apple Touch Icon (iOS home screen)
• 192×192: Android Chrome (web app manifest)
• 512×512: Android Chrome splash screen (web app manifest)

Apple Touch Icons

Apple devices use a special icon format when users add your website to their home screen. The Apple Touch Icon should be a 180×180 pixel PNG file:

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

Key guidelines for Apple Touch Icons:

• No transparency: iOS fills transparent areas with black. Use a solid background color
• No rounded corners: iOS automatically applies rounded corners and other effects
• Full bleed design: Design to the edges — padding is not needed as iOS adds its own
• 180×180 pixels: This single size covers all current iPhone and iPad models

Web App Manifest

The web app manifest (site.webmanifest or manifest.json) defines icons for Progressive Web Apps (PWAs) and Android home screen shortcuts:

{
  "name": "Your Site Name",
  "short_name": "YSN",
  "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"
}

Link the manifest in your HTML head:

<link rel="manifest" href="/site.webmanifest">

The Complete HTML Setup

Here is the recommended set of favicon tags for maximum cross-platform compatibility:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<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">
<meta name="theme-color" content="#ffffff">

Use our Favicon Generator to create all required sizes from a single source image. Need to crop your logo first? Try our Image Cropper.

Design Tips

Simplicity Is Key

Favicons are displayed at very small sizes (as small as 16×16 pixels). Complex designs with fine details will appear as unrecognizable blobs. Use simple shapes, bold colors, and minimal elements. A single letter or geometric symbol works best.

High Contrast

Ensure your favicon is visible against both light and dark browser themes. Test it on light tabs, dark tabs, and various operating system themes. A solid background color behind your icon ensures visibility in all contexts.

Brand Consistency

Your favicon should be instantly recognizable as part of your brand. Use your primary brand color and the most distinctive element of your logo. Many brands use a single letter (G for Google, F for Facebook) or a simplified icon version of their full logo.

Test at Small Sizes

Design at 512×512 or higher, but always test at 16×16 to ensure it remains legible. What looks great at 512px may be unrecognizable at 16px. Zoom out in your design tool to check small-size appearance.

Dark Mode Consideration

With SVG favicons, you can use CSS media queries to adapt colors for dark mode. For PNG/ICO favicons, choose colors that work in both light and dark contexts, or add a subtle border or background to ensure visibility.

Key Takeaways

• Provide favicons in SVG, PNG (16×16 and 32×32), and ICO formats for maximum compatibility
• Include a 180×180 Apple Touch Icon with solid background (no transparency)
• Create a web app manifest with 192×192 and 512×512 icons for PWA and Android
• Design simple, high-contrast icons that remain recognizable at 16×16 pixels
• Use SVG favicons for dark mode adaptation via CSS media queries