Favicon Guide: Sizes, Formats, and Setup

A favicon is the small site icon shown in browser tabs, bookmarks, and some search results. A reliable setup uses a simple browser icon first, then adds separate touch or app icons only when the site needs them. Choose a square, readable mark and test the files over HTTP.

Start with the surfaces, not a size dump

One file does not serve every job equally well. The browser-tab icon, an iPhone Home Screen icon, and an installable web app icon are related assets, but they reach users through different declarations.

Warning first: exporting twenty legacy sizes does not make the setup more reliable. It turns the asset folder into a junk drawer and makes stale files harder to find. Read the requirement line, then support the surfaces your site actually uses.

This separation prevents a common mistake: adding a web app manifest because a normal website needs a favicon. It does not. A plain site can stop after the browser icon and, if relevant, the touch icon.

What makes a good favicon

A logo and a favicon have different working conditions. A logo may include a wordmark, a fine border, or several colors. A favicon must remain recognizable in a very small square beside other tabs.

Use these design rules:

• Prefer one strong shape. An initial, symbol, or simplified mark survives reduction better than a full wordmark.
• Leave breathing room. Artwork that touches every edge can look clipped on rounded or masked surfaces.
• Check light and dark chrome. Transparent art may disappear when the browser changes its tab background.
• Keep the silhouette distinct. Color alone should not carry the identity.
• Export from a clean master. Do not enlarge a tiny bitmap and expect sharp edges.

Google Search requires a square image. Its published minimum is 8 by 8 pixels, but Google recommends a source larger than 48 by 48 pixels for better rendering across surfaces. Treat that as a search eligibility guideline, not a promise about the displayed size.

ICO, PNG, or SVG?

There is no universal winner. Choose by compatibility and maintenance cost. A long export menu is not a specification.

SVG for a clean primary icon

SVG stays sharp at different render sizes and is easy to maintain from vector artwork. It is a sensible primary browser icon for a modern site. Keep the file self-contained, simple, and free of external fonts or network dependencies.

The tradeoff is compatibility. If the audience includes old browser or embedded-webview environments, keep an ICO fallback and test the actual target rather than trusting a generic support table.

ICO for compatibility

ICO is the historical favicon format. One ICO file can contain several bitmap sizes, which makes it useful as a compact compatibility fallback and for software that still requests favicon.ico from the site root.

Do not rename a PNG file to favicon.ico. Convert it into a real ICO container. Also avoid declaring a size that the file does not contain: the HTML standard expects declared bitmap sizes to match the actual resource.

PNG for fixed-size surfaces

PNG is predictable for touch icons and manifest icons because those surfaces ask for known bitmap dimensions. It also works as a browser favicon when you prefer a simple raster workflow.

The drawback is maintenance. Each PNG must be exported at the intended size, and a blurry or badly padded master will be repeated across every derivative.

A minimal setup for a normal website

Put the icon declarations in the document head. This example uses SVG as the primary browser icon, ICO as a compatibility fallback, and a separate Apple touch icon.

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

Export apple-touch-icon.png as a square PNG. Apple’s archived Safari guide includes a 180 by 180 pixel example for an iPhone Retina touch icon. Because that guide is archived and device guidance can change, verify current Apple requirements when a Home Screen experience is a product requirement.

You may also place favicon.ico at the site root. Some user agents and tools request that conventional path when no explicit icon is found. The explicit HTML remains the clearer source of intent.

Recommendation: keep filenames boring and URLs stable. A favicon path is infrastructure, not a campaign asset. Frequent renaming can slow search updates and makes cache diagnosis needlessly confusing. Boring wins here.

Add a manifest only for an installable web app

A web app manifest describes an installable application. If the site is not intended to be installed, it does not need this extra layer.

For an installable PWA, link the manifest from the document head:

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

Then declare purpose-built app icons. Chromium-oriented PWA guidance documents 192 by 192 and 512 by 512 pixel PNG icons for installability.

{
  "icons": [
    {
      "src": "/icons/app-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/app-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

The browser chooses among manifest candidates using fields such as type, sizes, and purpose. If an operating system may mask the icon into another shape, prepare and test a maskable asset instead of assuming the ordinary square will survive the crop.

WordPress and website-builder setups

Many content management systems and site builders provide a Site Icon, Favicon, or Branding control. Use that control when it generates the files and head markup correctly. It is easier to maintain than a theme edit that disappears during an update.

The warning is simple: uploading an image is not the same as verifying the output. After saving, inspect the rendered page source and request each generated file directly. Builders sometimes retain an older icon, generate only one surface, or publish the asset under a cached URL. Trust the response, not the success toast.

For WordPress, prefer the current site-icon setting exposed by the active theme or editor. Avoid pasting duplicate icon links into a header template unless the platform output is genuinely missing. Two plugins, a theme, and a manual header edit can create several competing candidates.

How to test the setup

Test the delivered website, not just the export folder.

1. Open each icon URL directly and confirm it returns HTTP 200 rather than a redirect loop or branded error page.
2. Check the response content type and confirm the file decodes as the format named in the URL and HTML.
3. View the rendered document head and verify that each link points to the intended absolute or root-relative path.
4. Open a private browser window and compare a fresh tab, a bookmark, and the relevant mobile or installation surface.
5. Check the home page with crawling rules in mind; a search crawler cannot use a favicon or home page that it is blocked from fetching.

A browser may cache favicons more stubbornly than ordinary page images. That is why the direct file request matters. It separates a broken deployment from a stale local browser cache.

Why a favicon stays old or disappears

Work down the delivery chain. Randomly exporting more sizes rarely fixes the real fault. It only gives the cache more suspects.

Google says favicon changes can take from several days to several weeks to be recrawled and processed. A correct browser tab is therefore not evidence that a search result will update immediately.

Common mistakes to avoid

• Shipping a detailed logo that turns into an unreadable speck.
• Changing only the image while a CDN continues serving old bytes.
• Declaring sizes that do not match the bitmap resource.
• Treating an Apple touch icon as the universal browser favicon.
• Adding a manifest without testing installation behavior.
• Blocking the icon directory in crawling rules.
• Using unstable, signed, or short-lived asset URLs.
• Editing a theme header when the platform already owns icon output.

Frequently asked questions

The practical answer

For most sites, a readable square mark, an explicit rel=“icon” declaration, and careful delivery testing are enough. Add touch and manifest icons for real product requirements, not because an export tool offers them. The smallest dependable set is easier to debug and less likely to go stale.