Web Guides

Favicon Sizes & Formats in 2026: What You Actually Need

Q: What size should a favicon be?

Ship three files: favicon.ico containing a 32×32 image for legacy browsers and bookmarks, an SVG favicon that scales to every size, and a 180×180 PNG apple-touch-icon for iOS home screens. Those three cover every modern browser and device.

Q: Do I still need favicon.ico in 2026?

Yes, keep one at your site root. Older agents, RSS readers, and some crawlers request /favicon.ico directly without reading your HTML. It costs nothing and prevents broken-icon 404s in your logs.

Q: Can I use an SVG as a favicon?

Yes — every major modern browser supports SVG favicons. One vector file stays sharp at every size and can even adapt to dark mode with a media query inside the SVG. Pair it with an ICO fallback for older agents.

Q: Why is my favicon not updating?

Browsers cache favicons aggressively, often ignoring normal cache rules. Force a refresh by adding a version query to the link tag (href="/favicon.svg?v=2"), then hard-reload. In stubborn cases visit /favicon.ico directly and reload it.

Q: What is an apple-touch-icon?

The icon iOS uses when someone adds your site to their home screen, and Safari shows in favorites. Provide one 180×180 PNG with a solid background — iOS ignores transparency and rounds the corners itself.

Published Jun 12, 2026 4 min read By Navi Works

You need exactly three files: a favicon.ico (32×32) at your site root, an SVG favicon, and a 180×180 PNG apple-touch-icon. That trio covers every modern browser, every legacy agent, iOS home screens, and Google's search results. The 15-file "favicon packages" that generators produced for years are obsolete — most of those sizes serve platforms that no longer exist or that now read one of the three files above.

Here is the complete copy-paste HTML:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

To make the files themselves, the free Favicon Generator turns any image into all three formats in your browser — no upload, no watermark.

What Each File Does

File	Size	Who uses it
`favicon.ico`	32×32 (ICO container)	Legacy browsers, RSS readers, crawlers that request `/favicon.ico` blind
`favicon.svg`	Vector — every size	All modern browsers; stays sharp on tabs, bookmarks, high-DPI screens
`apple-touch-icon.png`	180×180	iOS home screen, Safari favorites; Android also falls back to it

Optional extras — only add them when you actually need them:

192×192 + 512×512 PNGs in a web manifest — only if your site is an installable PWA.
48×48 or larger for Google Search — Google reads your regular favicon; just make sure it's at least 8×8 and looks legible small. The SVG handles this.
theme-color meta tag — tints the mobile browser UI to match your brand. One line, nice touch.

How to Make a Favicon (Step by Step)

Start from a square image

Your logo mark (not the full wordmark) at 512×512 or larger. Simple shapes survive shrinking to 16px; fine detail turns to mush.

Generate the three files

Drop the image into the Favicon Generator — it produces the ICO, the touch icon PNG, and a preview of how the icon looks at tab size. If your logo is already an SVG, run it through the SVG Favicon tool to optimize it for icon use.

Upload to your site root + add the HTML

Put favicon.ico at the root specifically (some agents only look there), add the three link tags to your <head>, and deploy.

Verify it

Check the tab icon in a private window (avoids cache), then run Favicon Check to confirm every file resolves and parses correctly.

Design Tips for 16 Pixels

One shape, one idea. A letterform, a mark, a simple symbol. If it needs explaining at full size, it's invisible at 16px.
Check contrast against both themes. Tabs are white in light mode and near-black in dark mode. An SVG favicon can include a prefers-color-scheme media query and swap colors automatically.
Solid background for the touch icon. iOS replaces transparency with black and rounds the corners itself — design to a full-bleed square.
Test at actual size. Zoom your design out to 16×16 on screen. If you squint, so will everyone else.

Frequently Asked Questions

What size should a favicon be?

Ship three files: a 32×32 favicon.ico, a scalable SVG, and a 180×180 apple-touch-icon.png. Together they cover every modern browser, device, and crawler.

Do I still need favicon.ico in 2026?

Yes — keep one at your site root. Older agents, RSS readers, and some crawlers request /favicon.ico directly without reading your HTML. It costs nothing and keeps 404s out of your logs.

Can I use an SVG as a favicon?

Yes, every major modern browser supports it. One vector file stays sharp at every size and can adapt to dark mode with a media query inside the SVG. Keep the ICO as fallback.

Why is my favicon not updating?

Browsers cache favicons aggressively. Add a version query to the link tag — href="/favicon.svg?v=2" — and hard-reload. In stubborn cases, visit /favicon.ico directly and reload it there.

What is an apple-touch-icon?

The icon iOS uses for home-screen shortcuts and Safari favorites. One 180×180 PNG with a solid background — iOS ignores transparency and rounds the corners itself.

Make Your Favicon Now

Any image in, all three files out. Free, no upload — everything runs in your browser.

Open Favicon Generator