Skip to main content
PicsSizer.com LogoPicsSizer.com
Design

How to Make a Favicon: Complete Guide for Every Browser and Device

Learn how to create a favicon that works across all browsers, mobile devices, and platforms — including the right sizes, formats, and HTML to add to your site.

PicsSizer Team

PicsSizer · April 13, 2026 · 7 min read

A favicon (short for "favorites icon") appears in browser tabs, bookmarks, and on mobile home screens. It's a small but important branding touchpoint — and it's surprisingly involved to implement correctly across all browsers and devices. Here's exactly how to do it.

What Is a Favicon?

A favicon is the small icon associated with a website. It appears:

  • In the browser tab next to your page title
  • In the browser's bookmarks and history
  • On iOS/Android home screens when a user saves your site (Apple touch icon)
  • In PWA installers as the app icon
  • In search engine results (sometimes)

A complete favicon setup requires multiple sizes and formats to cover all these contexts.

The Required Favicon Sizes

| Size | Purpose | |---|---| | 16×16 px | Browser tab (standard) | | 32×32 px | Browser tab (high DPI), taskbar | | 48×48 px | Windows site icons | | 180×180 px | Apple touch icon (iOS home screen) | | 192×192 px | Android Chrome home screen | | 512×512 px | PWA splash screen, high-res contexts | | SVG | Modern browsers (infinitely scalable) |

Step 1: Start With a High-Resolution Source Image

Create or export your logo/icon at 512×512 pixels minimum as a square PNG with a transparent background. This will be your source for generating all smaller sizes.

Tips for favicon-friendly design:

  • Keep it simple — complex designs don't read at 16×16
  • Use high contrast — light backgrounds with dark icons or vice versa
  • Avoid thin lines — they disappear at small sizes
  • Test at 16×16 — zoom out in your design tool to verify readability

Step 2: Generate All Favicon Sizes

Instead of manually resizing to each required size, use a favicon generator. PicsSizer's Favicon Generator takes your source image and produces a complete package:

  1. Upload your 512×512 (or larger) source PNG
  2. Preview how it looks at each size
  3. Download the complete favicon package with all required sizes

Step 3: Add the HTML

Place these tags in the <head> of your HTML:

<!-- Standard favicon -->
<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" />

<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Android / PWA manifest -->
<link rel="manifest" href="/site.webmanifest" />

Step 4: Create the Web App Manifest

For Android home screen icons and PWA support, create a site.webmanifest file:

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

The SVG Favicon Approach

For modern browsers, an SVG favicon is ideal:

  • Infinitely scalable — sharp at any resolution
  • Tiny file size — often under 2 KB
  • Supports dark mode — you can use CSS media queries inside SVG
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

With a media query for dark mode inside the SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: white; }
    }
    .icon { fill: black; }
  </style>
  <rect class="icon" width="32" height="32" rx="4" />
</svg>

All modern browsers (Chrome, Firefox, Safari 14+, Edge) support SVG favicons.

Troubleshooting Common Favicon Problems

Favicon not showing:

  • Check that the file exists at the path specified in the href
  • Hard refresh your browser (Ctrl+Shift+R / Cmd+Shift+R)
  • Check the browser's DevTools Network tab for 404 errors on favicon requests

Favicon shows on desktop but not mobile:

  • Ensure apple-touch-icon is set for iOS
  • Ensure the web manifest exists and is linked for Android

Old favicon still showing after update:

  • Browsers cache favicons aggressively. Add a cache-busting query string: href="/favicon.png?v=2"

Favicon blurry or pixelated:

  • Regenerate from a higher-resolution source image (512×512 minimum)
  • Check that you're using the right size for each context

Complete Favicon Checklist

  • [ ] Source image at 512×512 px (transparent PNG)
  • [ ] favicon.ico (16×16 + 32×32 inside ICO, for legacy IE)
  • [ ] favicon-16x16.png
  • [ ] favicon-32x32.png
  • [ ] apple-touch-icon.png (180×180)
  • [ ] android-chrome-192x192.png
  • [ ] android-chrome-512x512.png
  • [ ] favicon.svg (optional but recommended)
  • [ ] site.webmanifest
  • [ ] HTML <link> tags in <head>

Use PicsSizer's Favicon Generator to generate the entire package from a single image, or see the Favicon Size Guide for the complete reference.

Frequently Asked Questions

What size should a favicon be?
The minimum favicon is 16×16 pixels for the browser tab. However, a modern favicon setup includes multiple sizes: 16×16, 32×32, 48×48 for browsers; 180×180 for Apple touch icon; 192×192 and 512×512 for Android/PWA manifest. Start with a 512×512 source image and generate all sizes from it.
What format should a favicon be?
Modern browsers support ICO, PNG, and SVG favicons. The recommended approach is: an SVG favicon for modern browsers (infinitely scalable, tiny file), a 32×32 PNG as fallback, and a 180×180 PNG apple-touch-icon. An ICO file containing 16×16 and 32×32 serves legacy browsers.
Why is my favicon not showing in the browser?
Common reasons: the favicon file isn't at the right path, the HTML link tag is missing or has the wrong type attribute, or the browser has cached an old favicon. Try hard-refreshing (Ctrl+Shift+R or Cmd+Shift+R) to force the browser to reload the favicon.
Do I need an ICO file or can I use PNG?
Modern browsers (Chrome, Firefox, Safari, Edge) all support PNG favicons. An ICO file is only necessary for legacy IE support. If you're not targeting IE, a 32×32 PNG works perfectly for the browser tab, and you can skip the ICO entirely.
What should a good favicon look like?
A good favicon is a simplified version of your logo or brand that reads clearly at 16×16 and 32×32 pixels. Avoid small text, complex gradients, and fine details — they disappear at small sizes. A single initial, a simple icon, or a bold shape works best.
Back to all articles