Jaconir

favicon.ico: File Format, Required Sizes and How to Create One Free

March 23, 2026
8 min read

The favicon.ico file is the small icon browsers display in tabs, bookmarks, and browser history next to your site's name. It's one of the most requested files on the web — browsers automatically try to fetch /favicon.ico from every domain they visit, even without any HTML tag pointing to it. Getting this file right is a one-time task that improves your site's professionalism across every browser, device, and context. This guide covers exactly what the .ico format requires, which sizes to include, and how to generate one free.

Generate a complete favicon.ico file with all required sizes in one click: Jaconir Favicon Generator — upload your image, download a properly formatted .ico file. No signup, no watermark.

What Is favicon.ico?

The .ico file format is a container format — unlike a regular image file, a single .ico file can store multiple images at different sizes and colour depths inside one file. This is what makes it ideal for favicons: one file covers every context where the browser might need a different resolution.

When a browser requests your favicon, it opens the .ico container and picks the size that best fits the context:

  • 16×16px for browser tabs
    • 32×32px for Windows taskbar and pinned sites
    • 48×48px for Windows site icons A single-size .ico file works but the browser will scale it up or down, often producing blurry results. A multi-size .ico containing all three sizes renders crisply in every context.

Required Sizes Inside a favicon.ico File

The minimum a favicon.ico should contain:

  • 16×16px — browser tab, bookmark bar, browser history
    • 32×32px — Windows taskbar, high-DPI browser tabs, shortcut icons
    • 48×48px — Windows site and shortcut icons

Optional but recommended for complete coverage:

  • 64×64px — Windows high-DPI site icons
    • 128×128px — Chrome Web Store and some home screen contexts

The Jaconir Favicon Generator produces a multi-size .ico containing 16, 32, and 48px automatically from any source image you upload.

favicon.ico vs PNG vs SVG — Which to Use

Modern favicon setups use all three formats together, each serving a different role:

  • favicon.ico — Legacy compatibility. Every browser including Internet Explorer reads .ico. Place it at the root of your domain (yourdomain.com/favicon.ico). Browsers will find it automatically even with no HTML tag.
    • PNG (192×192, 512×512) — Modern browsers prefer PNG for quality. Required for Android home screen icons and PWA manifests.
    • SVG — Perfect scaling at any size. Chrome 80+ and Firefox 41+ support SVG favicons. Can respond to dark mode with a prefers-color-scheme media query inside the SVG.
    • Apple Touch Icon (180×180 PNG) — iOS home screen icon when a user adds your site to their home screen. Without it, iOS takes a screenshot of your page instead.

The correct modern setup uses all of these together — .ico for legacy, PNG for app icons, SVG for modern browsers. The Favicon Generator exports the complete set.

How to Create a favicon.ico File Free

Method 1: Browser-Based Generator (Easiest)

  • Prepare a square source image — minimum 512×512px, PNG or SVG
    • Open Jaconir Favicon Generator
    • Upload your source image
    • The tool generates favicon.ico (multi-size: 16, 32, 48px) plus all PNG sizes and Apple Touch Icon
    • Download the package and extract to your project

Method 2: Convert an Existing PNG (Command Line)

If you have ImageMagick installed:

# Create a multi-size favicon.ico from a PNG
convert source.png -resize 16x16 icon-16.png
convert source.png -resize 32x32 icon-32.png
convert source.png -resize 48x48 icon-48.png
convert icon-16.png icon-32.png icon-48.png favicon.ico

How to Add favicon.ico to Your Website

Step 1: Place the File at Your Domain Root

Copy favicon.ico to the root of your web server — the same directory as your index.html. The path must be:

https://yourdomain.com/favicon.ico

Browsers automatically check this path without any HTML tag. This is how favicon.ico works — it's a convention, not just a tag-referenced file.

Step 2: Add HTML Tags (Recommended)

While browsers find favicon.ico automatically, adding explicit HTML tags gives you control over which file each browser uses and prevents unnecessary 404 requests for the auto-discovered path:

<!-- In the <head> of every page -->

<!-- Classic .ico for all browsers -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- PNG for modern browsers -->
<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 for iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

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

Step 3: Add to site.webmanifest (PWA and Android)

{
  "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"
}

Framework-Specific Setup

Next.js (App Router)

Place favicon.ico directly in the app/ directory — Next.js serves it automatically with no configuration needed:

app/
  favicon.ico      ← automatically served at /favicon.ico
  layout.tsx
  page.tsx

For full control with metadata API:

// app/layout.tsx
export const metadata = {
  icons: {
    icon: '/favicon.ico',
    shortcut: '/favicon-16x16.png',
    apple: '/apple-touch-icon.png',
  },
};

Vite / React

// Place favicon.ico in the public/ directory
public/
  favicon.ico
  favicon-32x32.png
  apple-touch-icon.png

// Reference in index.html
<link rel="icon" type="image/x-icon" href="/favicon.ico">

Static HTML Sites

Place favicon.ico in the same directory as index.html (usually the root). Add the &lt;link&gt; tags to the &lt;head&gt; of every HTML file, or use a shared header include.

Troubleshooting: favicon.ico Not Showing

Browser is Showing Old Favicon (Caching)

Browsers aggressively cache favicons — sometimes for days. To force a refresh:

  • Open DevTools → Application → Storage → Clear site data
    • Or open the favicon URL directly (yourdomain.com/favicon.ico) and hard-refresh: Ctrl+Shift+R (Windows) / Cmd+Shift+R (Mac)
    • Or append a version query string: href="/favicon.ico?v=2"
    • Test in an incognito/private window for a clean cache state

404 Error on /favicon.ico

The file is not at the domain root. Check:

  • The file is named exactly favicon.ico (lowercase, correct extension)
    • It's in the root directory, not a subdirectory
    • Your build process is copying it to the output directory (check dist/ or .next/public/)

Favicon Looks Blurry

The .ico file only contains a single size and the browser is scaling it. Regenerate with a multi-size .ico containing 16, 32, and 48px. Use Jaconir Favicon Generator — it creates multi-size by default.

Favicon Shows in Chrome but Not Safari

Safari on iOS uses the Apple Touch Icon (apple-touch-icon.png, 180×180px), not favicon.ico. Make sure you have the Apple Touch Icon tag in your HTML head.

favicon.ico Size: What File Size Is Normal?

A properly generated multi-size favicon.ico containing 16, 32, and 48px images typically ranges from 3KB to 15KB depending on the complexity of the icon. File sizes above 50KB suggest the .ico contains unnecessarily large embedded images — regenerate with smaller source sizes. File sizes under 1KB suggest it may only contain a single very small size.

FAQ

Does the favicon.ico filename matter?

Yes — it must be named exactly favicon.ico (all lowercase) for the automatic browser discovery to work. You can reference other filenames via HTML tags, but the automatic path check is hardcoded to /favicon.ico.

Can I use a PNG instead of .ico?

Modern browsers support PNG favicons referenced via &lt;link&gt; tags. However, keeping a favicon.ico at the root is still recommended for legacy browser support and to prevent 404 log entries — browsers always request /favicon.ico regardless of your HTML tags.

What is the correct favicon.ico size?

The .ico container should include 16×16, 32×32, and 48×48px images. The source image you generate from should be at least 512×512px to ensure clean downscaling to all smaller sizes.

Do I need a favicon.ico for SEO?

Google displays favicons next to search results on mobile. A missing or broken favicon shows a generic globe icon. While not a direct ranking factor, a clear favicon improves brand recognition in search results and can improve click-through rate.

Conclusion

The favicon.ico setup is a one-time task that covers every browser and device your visitors use. Generate a multi-size .ico, place it at your domain root, add the full set of HTML tags, and you're done. Browsers handle the rest automatically.

Generate your favicon.ico now: Jaconir Favicon Generator →