Site icon All About HTML

HTML Favicon and Web App Manifest: The Complete Setup Guide

All About Html
Html favicon

Table of Contents

Toggle

HTML Favicon and Web App Manifest: The Complete Setup Guide

An HTML favicon is the small icon that represents your website everywhere it appears outside the page itself: in the browser tab, in bookmarks, in the browser history, on the phone home screen, and next to your pages in Google search results. It is a tiny image with an outsized job. Visitors use it to find your tab among twenty open ones, to recognise your site in a crowded bookmarks bar, and — consciously or not — to judge whether your site is a finished, trustworthy product or an unfinished draft. A site with no favicon shows a blank document icon, and on some browsers it logs a 404 for every single visit.

This guide builds the complete modern favicon setup from scratch: the classic favicon.ico, a crisp SVG icon with a dark-mode variant, PNG fallbacks, the Apple touch icon, Safari pinned tabs, the theme-color meta tag, and a full web app manifest so your site can be installed like an app. Every file is shown with its exact size and its exact <link> tag, and the final section gives you one complete <head> block to copy into your own site. No generator is required — though one is recommended for the artwork — and everything here works on a plain static site with no build step.

Quick Takeaways

1. What an HTML Favicon Is — and Where It Shows Up

1.1 A definition first

A favicon (short for “favourite icon”) is the icon file a browser associates with your site. You declare it in the <head> of your pages with a <link rel="icon"> tag pointing at an image file, and the browser then uses that image everywhere your site is represented by an icon rather than by its page content. The mechanism is almost thirty years old — Internet Explorer 5 introduced favicon.ico in 1999 for bookmarks — but the file set around it has grown steadily as phones, tablets, pinned tabs and installable web apps each demanded their own sizes and formats.

1.2 Everywhere the icon appears

The same small image turns up in more places than most developers realise. In the browser tab, where it is often the only thing distinguishing your page from a dozen identical-looking tabs. In bookmarks and the bookmarks bar, where users scan icons rather than reading titles. In browser history and autocomplete suggestions. On the phone home screen, when a visitor taps “Add to Home Screen” — on iOS from the Apple touch icon, on Android from the manifest icons. In Google search results on mobile, next to your page title. In pinned tabs in Safari, as a monochrome glyph. In chat and social link previews on some platforms. And in the install prompt and splash screen when your site is installed as a web app. Each of those surfaces reads a different file, which is why the setup below ships several files rather than one.

1.3 Why it still matters in 2026

A missing favicon is one of the cheapest credibility mistakes a site can make. It costs nothing to fix, it is visible on every single page view, and its absence is interpreted — fairly or not — as a site that nobody finished. There are also practical costs: every browser requests /favicon.ico by default, so a missing file means a 404 in your server logs for every new visitor, and a broken icon in every tab. Google does not treat the favicon as a ranking factor, and no honest guide should claim it does, but Google does show it in search results, and a recognisable icon next to your result is a small, real click-through advantage over the blank square next to a competitor. The favicon is branding at the smallest possible scale, and it is the only piece of branding that appears on every page your visitors ever open.

1.4 The one rule that governs everything below

Every surface that displays your icon has its own preferred file, size and format, and every one of them falls back gracefully to something else when its preferred file is missing. That is the whole design principle of this guide: declare the best file for each surface, in an order browsers understand, so that every visitor — on any browser, any phone, any operating system — sees a deliberate icon and never a blank square. The set is small: four files cover everything, and the rest of this guide is the detail of each one.

2. The Complete File Set at a Glance

Before the detail, here is the whole setup in one table. If you only read one section of this guide, read this one, then copy the <head> block from section 10.

FileSizeWhat it is for
favicon.ico16×16, 32×32, 48×48 in one fileEvery browser’s fallback; auto-requested from the site root; the file Google Search reads
favicon.svgVector (any size)Crisp tab icon in modern browsers; the only format that can switch colours for dark mode
favicon-96x96.png96×96Raster fallback for browsers without SVG support (Safari 18 and earlier) and for Google Search
apple-touch-icon.png180×180iOS and iPadOS home screen icon when a visitor adds the site to their home screen
manifest.webmanifestJSON textWeb app manifest: name, icons (192×192 and 512×512), colours, display mode — what makes the site installable on Android
icon-192x192.png192×192Manifest icon for the home screen and install prompt
icon-512x512.png512×512Manifest icon for the splash screen and app launcher; also the maskable icon
safari-pinned-tab.svgVector, monochromeSafari pinned tabs on macOS (optional; skip it if you do not care about pinned tabs)

The design source for all of these should be one master artwork file, ideally a 512×512 (or larger) square with your mark centred and simple enough to read at 16 pixels. Design at the largest size first, then export down — a logo that is legible at 512 pixels is often unreadable at 16, so test the smallest size before you ship, and simplify the artwork (drop the wordmark, keep the mark) if it turns to mush.

3. favicon.ico: The Classic That Still Matters

3.1 What the ICO file is

The .ico format is a container that holds the same image at several sizes — typically 16×16, 32×32 and 48×48 — inside a single file. The browser picks the size closest to what it needs: 16 pixels for the tab, 32 for the taskbar and bookmarks, 48 for desktop shortcuts. It is the oldest favicon format and the only one every browser, feed reader, chat preview and search crawler has understood since the beginning. It is also the format browsers look for automatically: if a page declares no favicon at all, the browser still requests /favicon.ico from the site root, which is why a file at the root is not optional even in a modern SVG-first setup.

3.2 Declaring it

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

Place the file at the site root and declare it with sizes="48x48". The sizes attribute tells the browser the largest size inside the container; the browser then knows it can also use the smaller sizes inside it. The leading slash matters: a relative href="favicon.ico" resolves against the current page’s URL, so a visitor on /blog/my-post/ would make the browser request /blog/my-post/favicon.ico, which 404s. Root-relative paths (/favicon.ico) work from every page.

3.3 How to make one

You do not need a dedicated tool for the artwork, but you do need one for the container, because most image editors cannot write multi-size ICO files. The free route is RealFaviconGenerator (realfavicongenerator.net): upload a square PNG of at least 260×260, and it generates the ICO plus every other file in this guide, with the HTML to match. ImageMagick does it from the command line (magick icon-16.png icon-32.png icon-48.png favicon.ico), and most design tools export a single-size ICO that is good enough if it contains a 32×32 image. Whichever route you take, keep the file small — a three-size ICO is typically under 15 KB — and keep the artwork simple: at 16 pixels, a detailed logo is a smudge.

3.4 The 404 problem, and why the root file fixes it

If your site has no favicon.ico at the root, every first-time visitor generates a 404 request for it, because browsers request it whether or not any page links to it. On a busy site that is thousands of pointless 404s a day in the logs, and on some servers it is a small but real waste of error handling. Shipping the file at the root costs a few kilobytes and removes the noise entirely. It is the single highest-value favicon action on this page: do it even if you do nothing else in this guide.

4. SVG Favicons: One File, Every Size

4.1 Why SVG is the modern default

An SVG favicon is a vector file: text describing shapes and colours, which the browser draws at whatever size the surface demands. One file serves the 16-pixel tab and the 512-pixel launcher without a second copy, it is usually under 2 KB, and — uniquely among favicon formats — it can contain its own CSS, which means it can change colour when the user switches between light and dark mode. It is the best tab icon available, and it should be the first icon you declare.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

The type="image/svg+xml" attribute is what lets browsers that do not support SVG favicons skip the file cleanly instead of trying to render it as an image and failing.

4.2 Browser support in 2026 — including the Safari catch

SVG favicons work in Chrome 80 and later, Edge 80 and later, Firefox 41 and later, and Opera 44 and later. Safari is the exception that proves the fallback rule: Safari supported SVG favicons only from Safari 26 (September 2025, with macOS Tahoe and iOS 26). Safari 18 and earlier ignore the SVG entirely and use the PNG or ICO fallback declared in the same <head>. That is a large share of real visitors, which is why an SVG-only setup is a mistake — declare the SVG first, then the PNG, then the ICO, and every browser picks the best format it understands.

4.3 The dark-mode trick

This is the one genuinely delightful favicon feature. Because the SVG is a document in its own right, you can embed a <style> block inside it with a prefers-color-scheme media query, and the browser re-renders the icon when the operating system theme changes. A dark logo on a light tab and a light logo on a dark tab, from a single file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .mark { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #ffffff; }
    }
  </style>
  <rect width="100" height="100" rx="20" fill="#e62f41"/>
  <text class="mark" x="50" y="68" font-size="52" text-anchor="middle" font-family="sans-serif" font-weight="bold">A</text>
</svg>

The example above is a complete, usable SVG favicon: a red rounded square with a letter that is dark on light tabs and white on dark tabs. Chrome, Edge and Firefox apply the theme switch live. Two honest limits: the SVG must be self-contained — external fonts and images do not load in favicon context, so use system fonts or pure shapes — and Safari 26 displays the SVG but does not yet apply the prefers-color-scheme switch inside it (an open WebKit issue), so it shows the default design. Pick a default design that reads on both light and dark backgrounds, and the Safari case is covered too.

4.4 The emoji favicon shortcut

For a prototype, a personal site, or a joke, you can skip files entirely and embed an emoji as a data-URI SVG:

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔥</text></svg>">

It works in every browser that supports SVG favicons, it needs no image file at all, and it is genuinely useful while you are still designing the real mark. Do not ship it as the final icon for a serious site — it looks unfinished, it does not scale to the manifest or the Apple touch icon, and Google Search will not use it — but for a staging site or a weekend project it is the fastest favicon that exists.

5. PNG Favicons: The Universal Fallback

5.1 What the PNG is for

The PNG favicon exists for the two audiences the SVG cannot serve: Safari 18 and earlier, which ignore SVG favicons, and Google Search, which does not list SVG among its supported favicon formats at all. A single 96×96 PNG covers both, and it is also the file older browsers and assorted feed readers and chat clients reach for. Declare it after the SVG so modern browsers prefer the vector file:

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

The sizes attribute is doing real work here: it tells the browser exactly which size this file is, so the browser can choose between the SVG (any size), this PNG (96 pixels) and the ICO (up to 48 pixels) for whatever surface it is drawing. Without sizes, the browser has to download the file to learn its dimensions.

5.2 Which sizes to ship

One PNG is enough for the fallback role: 96×96 is large enough to look sharp on high-density screens and small enough to stay under 10 KB. If you want belt and braces, add a 32×32 as well, but do not ship the ten-file sets some generators produce by default — every extra icon is another file to maintain and another entry in the <head>, and browsers only ever use the best match. The full set in section 2 is the complete list; the 96×96 PNG is the only PNG favicon the <head> needs.

5.3 Transparency and backgrounds

Export the PNG with a transparent background if your mark works on any colour, or on a solid brand colour if it does not. The common failure is a dark mark exported with transparency and then displayed on a dark tab bar, where it vanishes — the same failure the SVG dark-mode trick exists to solve. If your mark is dark, give the PNG a light rounded-square background (the same red square from the SVG example works well), and test it on a dark browser theme before shipping. A favicon that disappears on half your visitors’ tab bars is worse than a plain one.

6. Apple Touch Icons: The iOS Home Screen

6.1 What iOS does with your site

When an iPhone or iPad user taps Share → Add to Home Screen, iOS looks for an Apple touch icon: a 180×180 PNG declared with rel="apple-touch-icon". If it finds one, the home screen gets a proper app-style icon with your artwork. If it does not find one, iOS takes a screenshot of your page, shrinks it into an icon-shaped box, and uses that — which looks exactly as bad as it sounds, a tiny unreadable screenshot where your icon should be. The Apple touch icon is also what iOS uses for the home-screen icon of a site added as a web app, and for bookmarks on the home screen.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

No sizes attribute is needed: the file is always 180×180, and iOS expects exactly that. Export it as a PNG with a solid background (no transparency — iOS fills transparent areas with black) and keep the artwork inside the central area, because iOS applies rounded corners that crop roughly the outer 10% of the square.

6.2 Two things that no longer apply

First, iOS has not added a gloss effect to home-screen icons since iOS 7 (2013). The old apple-touch-icon-precomposed value existed to opt out of that gloss, and it is now obsolete — do not declare it, and do not follow old guides that tell you to. Second, you do not need the five sizes of Apple touch icon that older generators produced (57, 72, 114, 144, 180). One 180×180 file is the current recommendation: iOS downscales it for older devices, and every device since the iPhone 6 uses the 180-pixel size natively.

6.3 Android uses the manifest instead

Android does not read the Apple touch icon for home-screen installs — it reads the manifest icons from section 9. The Apple touch icon still earns its place because iOS is the one platform that ignores the manifest for home-screen icons, and iOS users are a large share of most sites’ mobile traffic. One file, one line, both platforms covered.

7. Safari Pinned Tabs: The mask-icon

7.1 A monochrome icon for a monochrome surface

Safari on macOS lets users pin tabs, and a pinned tab shows only a tiny monochrome glyph — no colour, no detail, just a silhouette. The icon for that surface is declared separately, with rel="mask-icon", pointing at a single-colour SVG, plus a color attribute that Safari uses as the accent colour for the tab:

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#e62f41">

The SVG must be a single-colour vector silhouette: one path, filled black (fill="black"), transparent background, on a 16×16 viewBox. Safari uses the shape as a mask and fills it with your color. Any colour or detail inside the file is discarded, so a full-colour logo pasted into a mask-icon file renders as a solid blob.

7.2 Should you bother?

For most sites, this is optional. Pinned tabs are a power-user feature, and a site without a mask-icon simply shows a generic letter or the favicon in its pinned tab — not broken, just less polished. Add it if your brand matters in the tab bar (a publication, a tool people keep open all day), skip it if the rest of this guide is already more favicon work than your site needs. It costs one small SVG and one line, and it is the last item in the set, not the first.

8. theme-color: Colouring the Browser Chrome

8.1 What theme-color does

The theme-color meta tag tells the browser which colour to paint its own interface around your page: the address bar and tab bar on Android Chrome, the tab bar and toolbar tint in Safari 15 and later, and the splash background when your site is installed. It is a one-line change with a visible effect on every mobile visit:

<meta name="theme-color" content="#e62f41">

Pick the colour your brand already uses — usually the dominant colour of your header or your logo background — and keep it consistent with the theme_color field in the manifest (section 9), so the installed app and the browser tab agree with each other. A mismatch between the two is a small, visible inconsistency users notice without knowing why.

8.2 Light mode and dark mode need different colours

A bright brand red that looks right against a light page can be garish against a dark one, and a dark theme colour can make the address bar unreadable on a light theme. Declare both, with media queries, and the browser picks the right one:

<meta name="theme-color" media="(prefers-color-scheme: light)" content="#e62f41">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#7a1622">

The media attribute on a meta tag works the same way it does on a stylesheet link: the browser applies the first tag whose media query matches. Put the light-mode tag first and the dark-mode tag second. If you only declare one, use the light-mode colour — it is the safer default, because a dark address bar on a light page looks broken, while a light address bar on a dark page merely looks neutral.

8.3 theme-color and the manifest

The manifest has its own theme_color field, which serves the same purpose for the installed app, and a background_color field, which colours the splash screen shown while the app loads. Set all three to the same values: the meta tag for the browser, theme_color for the installed app chrome, background_color for the splash screen. When they disagree, the user sees the browser chrome change colour the moment the page finishes loading, which reads as a glitch. For the complete meta-tag picture, including the other tags that belong in your <head>, see the meta tags guide linked in the related articles.

9. The Web App Manifest: Your Site as an App

9.1 What the manifest is

The web app manifest is a small JSON file that describes your site to the browser as if it were an app: its name, its icons, its colours, how it should open, and where it starts. You link it from the <head> like any other resource:

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

The recommended filename is manifest.webmanifest (the .webmanifest extension is the registered media type, served as application/manifest+json), though manifest.json works everywhere too. Serve it from the site root so its scope and start_url resolve the way you expect, and make sure your server sends it with a JSON content type — a manifest served as text/plain is ignored by some browsers.

9.2 A complete manifest, field by field

{
  "name": "All About HTML — Learn HTML From Zero to Hero",
  "short_name": "All About HTML",
  "description": "Learn HTML from zero to hero with complete guides, working code examples, and checklists.",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#ffffff",
  "theme_color": "#e62f41",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

Each field earns its place. name is the full name shown in the install prompt and the app launcher; short_name is the shorter label used on the home screen where space is tight — keep it under 12 characters so it is never truncated. start_url is the page that opens when the installed app is launched; / is right for most sites, and a dedicated start page with an app-specific welcome is right if you have one. scope defines which pages belong to the app: a visitor navigating outside the scope opens the browser instead of staying in the app window, so / keeps the whole site inside it. display controls the window chrome: standalone hides the browser UI and makes the site feel like an app, fullscreen hides even the status bar, minimal-ui keeps a small browser bar with back and reload, and browser is the default (open in a normal tab). background_color colours the splash screen while the app starts; theme_color colours the app’s own chrome, and should match the meta tag from section 8.

9.3 The icons: 192, 512, and maskable

The manifest needs at least a 192×192 icon and a 512×512 icon. The 192 is used for the home-screen icon and the install prompt; the 512 is used for the splash screen and the app launcher, and Chrome requires it for the install prompt to appear at all. The purpose field is where the maskable icon comes in: "purpose": "any maskable" tells the browser this icon is safe to crop into any shape — circle, rounded square, squircle — because its artwork sits inside the safe zone. The maskable safe zone is a circle with a diameter of 80% of the icon’s size, centred on the icon: keep every important pixel inside that central 80%, and let the outer 20% be plain background that can be cut away without loss. A logo that touches the edges of its square will be cropped on Android’s adaptive icons; a logo with generous padding will not. If you can only make one maskable icon, make it the 512×512 one — it is the size the launcher uses, and it downscales cleanly for everything else.

9.4 The manifest alone does not make an install prompt

A common disappointment: you add the manifest, reload the page, and no install prompt appears. That is expected. Chrome shows the install prompt only when the site also meets the installability criteria, and the manifest is one item on that list, not the whole list. The full set is: served over HTTPS; a manifest with name (or short_name), a 192×192 and a 512×512 icon, a start_url, and a display of standalone, fullscreen or minimal-ui; and a registered service worker with a fetch event handler. The service worker is the item most guides skip: without one, the browser cannot offer offline behaviour, and without offline behaviour it will not offer installation. Adding a minimal service worker is a separate, short job — a single file that caches your pages and serves them when the network fails — and it is the natural next step once the manifest is in place. iOS, for its part, does not use the manifest install prompt at all: on iOS, installation happens through Share → Add to Home Screen, using the Apple touch icon from section 6.

9.5 Validating the manifest

Chrome DevTools has a dedicated panel for exactly this: open DevTools → Application → Manifest, and it shows every field it read, every icon it found, and any errors it hit, including a missing icon file or a manifest served with the wrong content type. Lighthouse’s PWA audit checks the same installability criteria from section 9.4 and names the missing item. Check the manifest in DevTools before you publish — a single typo in a JSON file (a missing comma, an unquoted key) invalidates the whole file silently, and the browser will not tell your visitors why the install prompt never appeared.

10. The Complete Head: Putting It All Together

10.1 One copy-paste block

Here is the full setup from sections 3–9 in a single <head>, in the order browsers should read it. The order is deliberate: the SVG first so modern browsers take it, the PNG next for Safari 18 and earlier and for Google, the ICO last as the universal fallback, then the Apple touch icon, the manifest, and the theme colours.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Favicon and Web App Manifest: The Complete Setup Guide</title>
<meta name="description" content="Add an HTML favicon that shows up everywhere: browser tabs, bookmarks, phones and Google results. SVG icons, Apple touch icons and a web app manifest.">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#e62f41">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#7a1622">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#e62f41">
<link rel="manifest" href="/manifest.webmanifest">
</head>
<body>
  <main>
    <h1>HTML Favicon and Web App Manifest: The Complete Setup Guide</h1>
    <p>This page's head carries the complete modern favicon setup: an SVG icon with a dark-mode variant, a PNG fallback, the classic ICO, the Apple touch icon, a mask-icon for Safari pinned tabs, the web app manifest, and theme colours for light and dark mode.</p>
  </main>
</body>
</html>

That document is complete and runnable as it stands: save it, serve it with the seven files from section 2 in the site root, and every surface in this guide is covered. The <title> and description here are this guide’s own, so replace them with your page’s title and description before you copy the block into your site.

10.2 What is deliberately not in the block

There is no apple-touch-icon-precomposed (obsolete since iOS 7), no set of five Apple touch icon sizes (one 180×180 file does the job), no browserconfig.xml reference (Windows live tiles are a legacy surface — add it only if your analytics show real Windows tile traffic), and no ten-file icon set. Every line in the block answers the question “which surface reads this, and what happens if it is missing?” in a single sentence. A line that cannot answer that question is a line to delete — the same discipline as the resource hints guide, applied to icons.

10.3 One head block for every page

Favicon links belong in a shared template — your theme header, your layout file, your base HTML — not pasted into each page by hand. Every page of your site should carry the same icon declarations, because the icon Google reads is the one on your home page, the icon a visitor’s bookmark carries is the one on the page they bookmarked, and a page with no icon declarations falls back to the root favicon.ico only. A shared header guarantees consistency; hand-pasted copies guarantee that one page, sooner or later, ships a stale path.

11. Google Search and Your Favicon

11.1 What Google actually requires (checked November 2026)

Google shows your favicon next to your pages in mobile search results, and its requirements are narrower than browser support — and different from what older guides still repeat. As of Google’s August 2026 documentation update, the rules are: the favicon must be a square image (1:1 aspect ratio) at least 8×8 pixels, and Google recommends one larger than 48×48 pixels so it looks good on every surface it appears on. The supported formats are BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG is not on that list, and neither is WebP. The old rule that the favicon “must be a multiple of 48px square” was removed from Google’s documentation in October 2024 — a 96×96 PNG satisfies both the old and the new wording, which is why this guide uses it.

11.2 The four things that actually break it

First, an SVG-only favicon: it looks perfect in a modern browser tab and leaves your search result with a blank square, because Google never reads the SVG. Ship the PNG or ICO alongside it, as section 10 does. Second, a non-square image: a wide logo fails the 1:1 requirement outright. Third, a blocked file: Googlebot must be able to crawl both your home page and the icon file, so a robots.txt rule that blocks either one removes the favicon, and the favicon URL must be stable — do not rename it every redesign. Fourth, impatience: Google updates favicons on its own crawl schedule, which takes days to weeks after you add or change the file. A correct favicon that does not appear yet is usually a favicon Google has not re-crawled, not a favicon you set up wrong.

11.3 One favicon per hostname, and no guarantees

Google shows one favicon per hostname: a subdomain can have its own icon, but a subdirectory cannot — every page under example.com/blog/ shares the icon of example.com. And Google is explicit that following every rule is not a guarantee: a favicon may still not appear, and the documentation does not promise otherwise. What the rules buy you is eligibility, not display. Ship the right file, keep it stable and crawlable, and let the crawl happen.

12. Testing and Debugging Your Favicon

12.1 The cache problem, stated plainly

Favicons are cached more aggressively than almost anything else a browser stores. Chrome caches a favicon independently of the page, Safari keeps a separate favicon cache on disk, and a hard refresh (Ctrl+Shift+R) often does not clear it. The practical result is the most common favicon support question on the internet: “I changed my favicon and nothing happened.” Usually nothing is wrong with the setup — the browser is showing the cached icon. The fix during development is to test in a private window, or to bypass the cache by appending a version query string to the file (/favicon.ico?v=2), which makes the browser treat it as a new URL and fetch it fresh. For the live site, the version query string is also the right way to roll out a new icon: change the URL and every visitor gets the new file on their next visit, instead of whenever their favicon cache happens to expire.

12.2 A testing checklist

Work through this list once, in order, and you will catch every common failure before your visitors do. First, open the site in a private window and look at the tab: the icon should be yours, not a blank document. Second, bookmark the page and look at the bookmark: same icon, same check. Third, open Chrome DevTools → Application → Manifest and confirm the manifest loads with no errors and both icons resolve. Fourth, open DevTools → Network, reload with “Disable cache” ticked, filter by “favicon” and “manifest”, and confirm every file returns 200 — a 404 here is the failure the logs will otherwise show you later. Fifth, test on a real phone: add the site to the home screen on iOS and on Android and look at the icons it produces. Sixth, toggle your operating system between light and dark mode and watch the tab icon switch, if you used the SVG trick from section 4.3. Seventh, run the RealFaviconGenerator favicon checker against your live URL: it fetches every declared file and reports the missing or mis-sized ones, which is the fastest way to confirm the whole set at once.

12.3 Reading the failure

When something is wrong, the symptom usually names the cause. A blank tab in Chrome but a correct icon in Firefox means the SVG is fine and the ICO is missing or malformed — Chrome falls back differently from Firefox. An icon that shows on desktop but not on iOS means the Apple touch icon is missing, wrongly sized, or transparent where it should be solid. An install prompt that never appears means the manifest or the service worker is missing a criterion — DevTools names it. An icon that shows everywhere except Google search results means the file is SVG-only, non-square, or blocked from crawling, or that Google simply has not re-crawled yet. And an icon that is right everywhere except on one colleague’s machine is almost always that machine’s favicon cache: clear it, or wait, or send them the ?v=2 link.

13. Common Favicon Mistakes

MistakeWhat happensThe fix
No favicon.ico at the site rootA 404 for every new visitor; blank tabs on older browsersShip the ICO at the root, even in an SVG-first setup
SVG only, no PNG or ICOSafari 18 and earlier show nothing; Google Search shows nothingAdd the 96×96 PNG and the ICO from section 10
Relative icon paths (href="favicon.ico")The icon 404s on every page below the rootUse root-relative paths (/favicon.ico) everywhere
Transparent Apple touch iconiOS fills the transparency with black; the icon looks brokenExport the Apple touch icon on a solid background
Artwork touching the icon edgesAndroid crops it in the maskable icon; iOS crops it under rounded cornersKeep artwork inside the central 80% safe zone
Maskable icon declared without purposeThe browser treats it as a regular icon and may crop it anywayAdd "purpose": "any maskable" to the 512×512 icon
theme-color in the manifest but not the meta tagThe browser chrome and the installed app disagree on colourSet the meta tag and theme_color to the same value
Manifest with a JSON typoThe whole manifest is silently ignored; no install prompt, no error shown to visitorsValidate in DevTools → Application → Manifest before publishing
Changing the icon without changing the URLVisitors keep seeing the old icon for weeksBump a version query string (?v=2) on the changed file
A detailed logo at 16 pixelsThe tab icon is an unreadable smudgeSimplify the artwork: mark only, no wordmark, tested at 16×16

14. Quick Reference: Which File for Which Surface

SurfaceFile it readsSize
Browser tab (Chrome, Edge, Firefox)favicon.svgVector
Browser tab (Safari 26+)favicon.svgVector
Browser tab (Safari 18 and earlier)favicon-96x96.png, then favicon.ico96×96, then 48×48
Bookmarks and historyfavicon.ico16×16 / 32×32
Google search resultsfavicon-96x96.png or favicon.ico96×96 (square, larger than 48×48 recommended)
iOS home screenapple-touch-icon.png180×180
Android home screen and install promptManifest icon-192x192.png and icon-512x512.png192×192, 512×512
Android splash screenManifest icon-512x512.png (maskable)512×512
Safari pinned tabs (macOS)safari-pinned-tab.svgVector, monochrome
Browser chrome colourtheme-color meta tag / manifest theme_colorA colour value, not a file

Frequently Asked Questions

1. How do I add a favicon to HTML?

Add <link> tags in the <head> of your pages pointing at your icon files, and put a favicon.ico at the site root. The minimum working setup is one line — <link rel="icon" href="/favicon.ico"> — and the complete modern setup is the seven-line block in section 10: SVG, PNG, ICO, Apple touch icon, mask-icon and manifest. Put the links in your shared header template so every page carries them, not in individual pages.

2. What size should a favicon be?

There is no single size, because every surface wants a different one. The tab uses 16×16, the classic ICO carries 16, 32 and 48 together, the PNG fallback is 96×96, the Apple touch icon is 180×180, and the manifest icons are 192×192 and 512×512. Start from one square master artwork of at least 512×512 and export each size from it. For Google Search specifically, the icon must be square and at least 8×8 pixels, with larger than 48×48 recommended.

3. Should I use SVG, PNG or ICO for my favicon?

All three, in that order. SVG is the best tab icon — one file, infinitely sharp, and the only format that can switch colours for dark mode — but Safari 18 and earlier ignore it and Google Search does not accept it. PNG is the universal fallback that both of those read. ICO is the format every browser requests from the site root by default, and the only one guaranteed to be found when a page declares nothing. Declaring all three costs three lines and covers every visitor.

4. Why is my favicon not showing up?

In almost every case, caching. Browsers cache favicons separately from pages, and a hard refresh often does not clear that cache. Test in a private window first: if the icon appears there, your setup is correct and your normal window is showing the cached icon. If it does not appear in a private window either, check the file path (root-relative, not relative), check DevTools → Network for a 404 on the icon file, and confirm the file is actually at the URL the <link> tag points to. For Google search results specifically, allow days to weeks for a re-crawl.

5. What is a web app manifest, and do I need one?

The web app manifest is a JSON file that tells the browser your site’s name, icons, colours and display mode, so the browser can offer to install it like an app on Android. You need one if you want the install prompt, the splash screen, or a standalone app window; you do not need one if you only want a tab icon — the favicon alone covers that. The manifest is one file and one <link> tag, and its two icons (192×192 and 512×512) are the same artwork as your favicon exported at larger sizes, so the extra cost is small.

6. Do I need a service worker for my favicon to work?

No. Favicons, Apple touch icons and the manifest all work without a service worker. The service worker matters only for the install prompt: Chrome requires a registered service worker with a fetch handler before it offers installation, alongside the manifest, HTTPS, and the 192×192 and 512×512 icons. If the prompt is not your goal, skip the service worker. If it is, a minimal caching service worker is the next file to add after the manifest.

Conclusion

An HTML favicon is a small file with a large surface area: one icon appears in the tab, the bookmarks bar, the phone home screen, the search results and the install prompt, and each of those surfaces reads a different file. The complete setup is four files and seven lines of HTML — an SVG for modern tabs, a PNG for Safari 18 and earlier and for Google, an ICO at the site root for everything else, a 180×180 Apple touch icon for iOS, and a manifest with 192×192 and 512×512 icons for Android — plus a theme-color that makes the browser chrome match your brand. That is the whole job, and it takes less time than choosing the artwork.

Your next step: export your mark as a 512×512 square, generate the file set from it, paste the <head> block from section 10 into your shared header, and run through the testing checklist in section 12 — private window, bookmark, DevTools Manifest panel, a real phone on each platform, and the favicon checker. When the icon survives all five checks, ship it and move on: the favicon is finished, and it will quietly do its job on every page view from now on.

Related Articles You’ll Love

Authoritative references: Google Search Central — Define a favicon to show in search results · MDN — <link>: The External Resource Link element · web.dev — Add a web app manifest

Exit mobile version