Pixotter
← All articles 7 min read
By Pixotter Team

How to Make a Favicon (Step-by-Step Guide)

A favicon is the small icon that appears in browser tabs, bookmarks, and history entries. It's one of the first visual elements users notice about your site, and one of the last things most developers set up. Getting it right takes five minutes. Getting it wrong — or skipping it entirely — makes your site look unfinished.

This guide walks through the complete process: designing or choosing a source image, generating all required sizes, adding the HTML, and testing across browsers. Everything here uses free tools.

For the complete reference table of favicon dimensions by platform, see Favicon Sizes: Complete Guide for Every Platform.

What Is a Favicon?

A favicon (short for "favorites icon") is a small icon associated with a website. It appears in:

Where it appears Size used Format
Browser tab (standard) 16×16 or 32×32 ICO or SVG
Browser tab (Retina/HiDPI) 32×32 ICO or SVG
Bookmarks bar 16×16 ICO or SVG
Google search results (mobile) 48×48 minimum Any (Google fetches and resizes)
Apple Touch Icon (iOS) 180×180 PNG
Android home screen 192×192 and 512×512 PNG (via web manifest)
Windows Start tiles 150×150 and 310×310 PNG (via browserconfig.xml)
macOS Safari pinned tab Any (monochrome) SVG

Step 1 — Design or Choose Your Source Image

Start with a high-resolution square image — at least 512×512 pixels. This is your master source. All other sizes are generated from it.

Design Guidelines

Source Image Requirements

Requirement Value
Minimum resolution 512×512 px (for Android and PWA icons)
Recommended 1024×1024 px (for maximum quality at all sizes)
Aspect ratio 1:1 (square)
Format PNG (with transparency) or SVG
Background Transparent (PNG/SVG) or solid brand color

If you need to resize your source image, use Pixotter's Resize tool to scale it to 512×512 or 1024×1024 without quality loss.

Step 2 — Generate All Required Sizes

Modern browsers support multiple favicon formats and sizes. The minimum viable setup is an ICO file and an Apple Touch Icon. The complete setup adds SVG, Android manifest icons, and Windows tile icons.

Minimum Setup (ICO + Apple Touch Icon)

You need two files:

  1. favicon.ico — Contains 16×16 and 32×32 sizes in one file. Works in all browsers.
  2. apple-touch-icon.png — 180×180 PNG. Required for iOS home screen and used by many social platforms as a fallback.

Generate ICO With ImageMagick (Apache 2.0)

magick source-512.png -resize 16x16 favicon-16.png
magick source-512.png -resize 32x32 favicon-32.png
magick source-512.png -resize 48x48 favicon-48.png
magick favicon-16.png favicon-32.png favicon-48.png favicon.ico

This creates a multi-size ICO file containing 16×16, 32×32, and 48×48 versions. Browsers pick the appropriate size.

For detailed ICO creation methods and multi-size ICO files, see How to Convert PNG to ICO.

Generate Apple Touch Icon

magick source-512.png -resize 180x180 apple-touch-icon.png

iOS clips the icon to a rounded rectangle and applies its own visual treatment. Don't add rounded corners or gloss effects — iOS does this automatically.

Complete Setup (Add SVG + Manifest)

For PWA support and maximum compatibility:

# Android icons for web manifest
magick source-512.png -resize 192x192 icon-192.png
magick source-512.png -resize 512x512 icon-512.png

If you have an SVG version of your icon, use it directly as favicon.svg. SVG favicons are resolution-independent and look perfect on any display density.

Use Pixotter to Resize

Drop your source image on Pixotter's Resize tool and set the target dimensions. Generate each size you need and download them individually.

Step 3 — Add Favicon HTML to Your Site

Place these tags in the <head> section of every page on your site.

Minimum HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

This covers all browsers. The ICO file sits at the site root (/favicon.ico), which is also where browsers look by default even without a <link> tag.

Complete HTML (With SVG and Manifest)

<!-- Standard favicon (ICO fallback for older browsers) -->
<link rel="icon" href="/favicon.ico" sizes="48x48">

<!-- SVG favicon (modern browsers — scales perfectly) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

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

<!-- Web App Manifest (Android, PWA) -->
<link rel="manifest" href="/manifest.json">

SVG Favicon With Dark Mode Support

SVG favicons can respond to the user's color scheme using CSS media queries inside the SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

This is one of the biggest advantages of SVG favicons — a single file that automatically adapts to light and dark browser chrome.

Step 4 — Add Web App Manifest (for Android/Chrome)

Create a manifest.json (or site.webmanifest) file at your site root:

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

The 192×192 icon appears on Android home screens. The 512×512 icon is used for splash screens when installed as a PWA.

Step 5 — Test Your Favicon

Quick Tests

  1. Deploy and check. Open your site in Chrome, Firefox, Safari, and Edge. The favicon should appear in each tab.
  2. Hard refresh. Favicons are aggressively cached. Press Ctrl+Shift+R (Windows/Linux) or ⌘+Shift+R (Mac) to force a fresh load.
  3. Check mobile. Open your site on an iPhone and add to Home Screen. The Apple Touch Icon should appear as the home screen icon.
  4. Bookmark test. Bookmark your site and verify the favicon appears in the bookmarks bar/list.

Common Issues

Problem Cause Fix
Favicon doesn't appear Browser cache Hard refresh or clear browsing data
Wrong favicon appears Cached old version Add a cache-busting query string: href="/favicon.ico?v=2"
Blank/generic icon on iOS Missing apple-touch-icon Add the <link rel="apple-touch-icon"> tag
Pixelated in tab Using a low-res source Regenerate from a 512×512+ source image
Shows on desktop, not mobile Missing manifest.json Add the web manifest with 192×192 and 512×512 icons

Online Validators

After deploying, test your favicon setup. Open your site in each browser and verify the icon appears correctly. Check the DevTools Network tab to confirm the favicon file loads (filter by favicon).

Modern Favicon Best Practice (2026)

The current best practice is a three-file setup:

  1. favicon.svg — SVG for modern browsers (Chrome 80+, Firefox 41+, Edge 80+). Resolution-independent, supports dark mode.
  2. favicon.ico — ICO fallback for older browsers and edge cases. Contains 16×16 and 32×32.
  3. apple-touch-icon.png — 180×180 PNG for iOS.

Plus manifest.json if you want PWA/Android home screen support.

This setup covers 99%+ of browsers with three files and four lines of HTML. Don't overcomplicate it with dozens of size variants — browsers are good at resizing from the sizes you provide.

FAQ

Do I need a favicon? Technically no — your site works without one. But a missing favicon causes a 404 error in server logs (browsers request /favicon.ico automatically), and the generic icon makes your site look incomplete. Five minutes of setup eliminates both problems.

What's the best favicon format? SVG for modern browsers (scalable, dark mode support, tiny file size). ICO as a fallback (universal compatibility). PNG for Apple Touch Icon and Android manifest. Use all three for complete coverage.

Can I use a JPG as a favicon? Technically some browsers accept JPEG favicons, but it's not recommended. JPEG doesn't support transparency, so your icon will have a solid rectangle behind it. Use PNG or SVG instead.

How do I make a favicon from my logo? Start with the icon/mark portion of your logo (not the full wordmark — text is unreadable at 16×16). If your logo is text-only, use the first letter in your brand font. Resize to 512×512 with Pixotter's Resize tool, then follow Steps 2-5 above. See Logo Size for Website for recommended dimensions.

Why does my favicon look different in different browsers? Browsers may use different sizes from your ICO file, apply different rendering, or cache an old version. Ensure your ICO contains both 16×16 and 32×32, clear your cache, and test with a hard refresh.

How often do I need to update my favicon? Only when your brand changes. Favicons are cached aggressively — updating means adding a cache-busting parameter (?v=2) to your <link> tag so browsers fetch the new version.

Can I animate a favicon? Some browsers (Firefox) support animated favicons using animated GIF or APNG. Chrome and Safari do not. It's generally not recommended — animated tabs are distracting and some users find them annoying.

Related guides

How to Add a Watermark to Your Photos (Free Online Tool)

Add text or image watermarks to photos in your browser with Pixotter. Set opacity, position, and size — then batch-process up to 20 images at once, free.

How to Convert HEIC to JPG (Free, No Software Needed)

Convert HEIC photos to JPG instantly in your browser with no uploads or software installs. Works on Windows, Mac, Linux, and Chromebook. Batch supported.

How to Check Image DPI on Windows, Mac, and Online

Learn how to check the DPI of any image on Windows, Mac, or online. Three fast methods to verify image resolution before printing or submitting your files.