How to Create a favicon.ico File (Step by Step)

8 min read

June 8, 2026

A favicon.ico file is a multi-resolution icon container browsers fetch from /favicon.ico automatically. To create one properly, export square PNGs at 16x16, 32x32, and optionally 48x48 from a high-quality master, then combine them into a single ICO with an online generator, ImageMagick, or GIMP. Place the result at your domain root alongside explicit PNG link tags.

This guide walks through creation methods, size layers to include, deployment paths, and verification on a live URL. ICO complements PNG and SVG; it does not replace apple-touch-icon or PWA manifest icons.

Why you still need favicon.ico

Even with modern HTML:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

Browsers and tools still request:

https://yoursite.com/favicon.ico

That request happens without reading your HTML first on some code paths. Missing ICO means generic icons in email clients, RSS readers, older bookmark importers, and some audit crawlers.

ICO bundles multiple bitmap sizes in one file. See favicon.ico vs PNG vs SVG for when to use each format.

Sizes to embed in favicon.ico

Layer	Purpose
16x16	Standard tabs, dense UI
32x32	Hi-DPI tabs, Windows taskbar
48x48	Legacy Windows shortcuts, some Linux desktops

You can add 64x64 or 256x256 layers. Diminishing returns for pure tab use. Focus on 16 and 32 minimum.

Full size map across platforms: Favicon Sizes Explained.

Method 1: Online favicon generator

Fastest path for most teams:

Start with a 512x512 PNG or SVG master (square, simple mark).
Upload to a reputable generator (RealFaviconGenerator, Favicon.io, or similar).
Download the package with favicon.ico and PNG sizes.
Copy favicon.ico to your site root public/ or static/ folder.

Generators also output apple-touch-icon and manifest icons. Use those files or export your own for PWA sizes.

Review generated HTML before paste. Generators sometimes add outdated tags. Prefer the patterns in How to Add a Favicon to Your Website.

Method 2: ImageMagick (command line)

Install ImageMagick, then from a 512 px source:

convert master-512.png -define icon:auto-resize=16,32,48 favicon.ico

-define icon:auto-resize embeds listed sizes into one ICO.

From separate PNGs:

convert favicon-16.png favicon-32.png favicon-48.png favicon.ico

Verify layers:

identify favicon.ico

Expect output listing 16x16, 32x32, and 48x48 entries.

Method 3: GIMP (desktop GUI)

Open your master image in GIMP.
Export each size: Image > Scale Image to 16, 32, 48 px square.
Save each as PNG temporarily.
Open any PNG, then File > Export As > favicon.ico.
In ICO export dialog, enable multiple sizes or import layers.

GIMP ICO export varies by version. ImageMagick is more predictable for multi-size bundles.

Method 4: Photoshop or Figma plugins

Photoshop can save ICO via plugins or Export As. Figma users export PNG layers and combine with ImageMagick or an online tool.

Design tips for small sizes:

Bold shapes, no fine text
Test 16 px export at 100% zoom before bundling
Align to pixel grid to avoid blur

If tab icons look soft, see Best Favicon Size for Browser Tabs.

Deploy favicon.ico correctly

Place at web root:

/public/favicon.ico   (Next.js, Vite)
/static/favicon.ico   (some SSGs)
/favicon.ico          (Apache, Nginx document root)

Confirm URL:

https://yoursite.com/favicon.ico

Must return HTTP 200, not redirect to HTML. Content-Type image/x-icon or image/vnd.microsoft.icon is typical.

Add explicit HTML as well:

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

sizes="any" tells modern browsers the ICO contains multiple resolutions.

Wrong paths that break ICO

ICO only in /assets/favicon.ico without root copy
Build pipeline omitting ICO from deploy artifact
CDN caching old ICO after rebrand

favicon.ico plus PNG together

Best practice stack:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Browsers pick the best match. ICO satisfies legacy fetch. PNG gives audit-friendly explicit sizes.

Do not rename favicon-32x32.png to favicon.ico without proper ICO structure.

Common favicon.ico creation mistakes

Single 16x16 layer only

Works on standard displays. Hi-DPI tabs look soft. Include 32x32 layer.

Upscaling tiny source

Starting from 16x16 pixel art and embedding as only layer cannot add detail. Start from 512 px master.

Forgetting root deployment

ICO exists in repo but not in production public/ output.

ICO as only icon strategy

No apple-touch-icon, no manifest icons. iOS and Android still broken.

Wrong color profile

CMYK or exotic ICC profiles cause color shifts. Export sRGB PNG before ICO conversion.

Testing after creation

Open https://yoursite.com/favicon.ico in browser - should show icon, not download error.
Hard refresh tab or test incognito.
Run Favicon Check - confirms ICO fetch and lists HTML icons together.
Download ICO from the tool and inspect sizes locally with identify or Preview info panel.

Updating favicon.ico after rebrand

Regenerate ICO from new master (all layers).
Replace file at same URL or version path.
Browsers cache ICO heavily. Expect delay unless you change filename or cache headers.
Re-scan with Favicon Check to confirm new file bytes.

Automating favicon.ico in CI

Teams that rebrand often benefit from scripted ICO generation in the build pipeline:

# Example: regenerate ICO when source logo changes
convert public/logo-master-512.png -define icon:auto-resize=16,32,48 public/favicon.ico

Run the command in CI after design assets update. Commit both master PNG and generated ICO, or generate ICO at deploy time from a single source artifact to avoid drift between PNG and ICO layers.

ImageMagick in Docker keeps builds reproducible across macOS and Linux developer machines. Pin ImageMagick version in CI to avoid export differences between environments.

Pair ICO generation with PNG exports at 16 and 32 in the same script. One source file, three outputs, one deploy artifact folder.

favicon.ico in enterprise and email contexts

Corporate Outlook and some RSS readers fetch /favicon.ico without parsing HTML. If your ICO is missing or generic, brand recognition drops in inbox views and internal link previews.

Government and finance sites often lag on SVG adoption. ICO plus PNG satisfies accessibility auditors who test with older toolchains.

When sending transactional email, you cannot control recipient favicon fetch, but recipients who bookmark your dashboard still hit /favicon.ico. Keep ICO updated when rebranding email templates.

Validate ICO after deploy with Favicon Check the same way you validate web pages.

Troubleshooting broken favicon.ico output

ICO downloads as HTML: Server returns 404 page with wrong content-type. Fix path and deploy real binary ICO.

ICO shows only one size in identify: Re-run convert with explicit size list. Some GUI exports flatten to single layer.

Colors look wrong on Windows shortcut: Source PNG was CMYK or had embedded profile issues. Convert to sRGB before ICO step.

Tab still shows old icon after new ICO: Browser cache. Test incognito, clear site data, or rename file temporarily to confirm deploy succeeded.

ICO file huge (>100 KB): Too many embedded layers or accidental 256+ px bitmaps inside ICO. Trim to 16, 32, 48 for tab-focused sites.

When in doubt, compare ICO bytes and PNG exports side by side in Favicon Check after each regeneration.

Next.js, Vite, and static host deployment notes

Next.js: public/favicon.ico serves automatically. App Router also supports app/icon.ico. Do not duplicate conflicting ICO paths. One canonical /favicon.ico is enough.

Vite: Place ICO in public/. Reference in index.html head. Verify dist/favicon.ico after build.

Netlify / Vercel: Ensure ICO is not excluded by ignore rules. Check deploy logs for skipped binary assets.

S3 + CloudFront: Set Content-Type: image/x-icon on upload. Wrong metadata causes download instead of inline display in some tools.

After deploy to any host, confirm with Favicon Check on the public URL. Keep the master PNG in version control so ICO can be regenerated identically on every release branch and every environment stays in sync.

FAQ

How do I create a favicon.ico file?

Export 16x16, 32x32, and 48x48 PNGs from a square master, combine with ImageMagick or an online generator, deploy to /favicon.ico.

What sizes should be inside favicon.ico?

At minimum 16x16 and 32x32. Add 48x48 for older Windows contexts.

Can I create favicon.ico from PNG?

Yes. ICO is a container. Tools embed PNG-compressed frames inside ICO.

Is favicon.ico still needed in 2026?

Yes. Automatic /favicon.ico requests still happen. Use ICO plus PNG link tags.

What is the best favicon.ico generator?

RealFaviconGenerator and similar tools work well. ImageMagick gives reproducible CLI builds for CI.

Where do I put favicon.ico in Next.js?

public/favicon.ico at project root maps to /favicon.ico.

favicon.ico vs PNG - do I need both?

Recommended. ICO for legacy auto-fetch, PNG for explicit sizes and audits.

How do I verify favicon.ico on my live site?

Use Favicon Check. It fetches /favicon.ico and reports status alongside HTML-declared icons.

Bottom line

Create favicon.ico by bundling 16x16, 32x32, and 48x48 layers from a 512 px master using a generator or ImageMagick. Deploy to domain root, add link rel="icon" href="/favicon.ico" sizes="any", keep PNG tags for modern browsers, and validate with Favicon Check. ICO is one layer of a complete favicon setup, not the whole story.