DEV Community: favicon.now

Favicon not showing? A debugging checklist for browsers, Google and home screens

favicon.now — Tue, 10 Nov 2026 14:50:59 +0000

You shipped a new favicon. Your browser tab still shows the old one, Google shows a grey globe, and the icon on your phone's home screen is a blurry screenshot of your page. Favicons are tiny, but they fail in more places than almost any other asset, because several different systems fetch and cache them independently.

I build favicon.now, a favicon generator and checker, and most "it's broken" reports we see come down to the same handful of causes. This is the checklist I work through, roughly in order from most to least likely.

Part 1: The files themselves

1. Open every icon URL directly. Paste https://yoursite.com/favicon.ico, your PNG icons, your apple-touch-icon.png and your site.webmanifest into the address bar. Each should return HTTP 200 and the right content. A surprising number of "invisible" favicons are simply 404s, or a redirect to a login page.

2. Check the content type. Your server should send image/x-icon or image/vnd.microsoft.icon for ICO, image/png for PNG, image/svg+xml for SVG, and application/manifest+json for the manifest. Some servers send SVG as text/plain or application/octet-stream, and browsers may refuse to use it.

3. Make sure the file is what its extension says. A PNG renamed to .ico sometimes works and sometimes does not. A real ICO file contains one or more embedded frames; inspect it and confirm it actually has the sizes you expect, such as 16, 32 and 48 pixels.

4. Keep SVG favicons self-contained. An SVG favicon that references external fonts, images or stylesheets may render blank. Inline everything, keep it simple, and always pair it with a PNG or ICO fallback.

Part 2: The HTML

5. Inspect the rendered head, not the template. Frameworks, CMS plugins and theme files often inject their own <link rel="icon"> tags. View the final page source or use dev tools and look for duplicate or conflicting declarations. The browser will pick one, and it may not be yours.

6. Use root-relative paths. href="favicon.png" works on the homepage and breaks on /blog/post-1/, where the browser looks for /blog/post-1/favicon.png. Use href="/favicon.png" instead.

7. Declare sizes and types honestly. A minimal, modern set looks like this:

<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon-48x48.png" type="image/png" sizes="48x48">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

If the sizes attribute says 32x32 and the file is 512x512, some clients will skip or mis-scale it.

8. Keep /favicon.ico at the root anyway. Some clients request /favicon.ico directly without reading your HTML. Having a valid file there is cheap insurance.

Part 3: Caching

9. Assume the browser is lying to you. Browsers cache favicons aggressively and separately from the page. A normal reload often will not refresh it. Try a private window, open the icon URL directly and hard-refresh it, or test in a browser you have not used on the site.

10. Version the URL when you change the icon. Changing /favicon.svg to /favicon.svg?v=2 in your HTML forces clients that read the HTML to fetch a fresh copy.

11. Purge your CDN. If your site sits behind a CDN with long cache lifetimes on static files, the old icon can keep being served even after you deploy. Purge the icon paths explicitly.

Part 4: Google Search

Google's favicon in search results is fetched by its own crawler on its own schedule, so it is the slowest to update.

12. Meet the basic requirements. Google's documentation asks for a square icon (1:1), at least 8x8 pixels, with a recommendation to go larger than 48x48. It should be declared with a <link rel="icon"> tag on the homepage, and the icon URL should be stable.

13. Make sure Google can crawl it. Check that robots.txt does not block the icon file or the homepage. Both Googlebot and Googlebot-Image need access.

14. Wait. After fixing everything, it can take days or weeks for the icon in search results to change. Requesting a recrawl of your homepage in Search Console can help, but there is no instant switch.

Part 5: Home screens and installed apps

15. Provide a real Apple touch icon. iOS uses apple-touch-icon (180x180) for "Add to Home Screen". Without it, you may get a screenshot or a generic letter tile.

16. Validate the manifest. For Android and installable PWAs, the manifest should list at least 192x192 and 512x512 icons. Use separate entries for "purpose": "any" and "purpose": "maskable" rather than one image marked "any maskable", because a maskable icon needs extra padding that looks wrong when shown unmasked.

17. Respect the maskable safe zone. Android may crop maskable icons into circles, squircles or other shapes. Keep essential artwork inside the central safe area or your logo loses its edges.

18. Reinstall to test. Home screen icons are captured at install time. To see a new icon, remove the shortcut or app and add it again.

Part 6: Does it actually look right?

19. Check contrast on light and dark browser chrome. A transparent black logo disappears on a dark tab bar. A transparent white one vanishes on a light one. Either add a background shape or test both modes.

20. Judge it at 16 pixels. A design that looks great at 512 pixels may turn into mush in a tab. Simplify until it survives the smallest size.

How I run this checklist

Most of these checks are things you can do with dev tools and curl. To make it faster, we built the inspection side of favicon.now around this list: a live site checker, a Google favicon checker, an ICO inspector that shows every embedded frame, a manifest validator, a contrast checker, and an HTML code generator that writes the head tags. When the files themselves are the problem, the generator produces the full package (SVG, multi-size ICO, PNG fallbacks, Apple touch icon, ordinary and maskable PWA icons, manifest and HTML) in one ZIP.

If you are stuck on a favicon that will not update, you can check your live site on favicon.now for free without an account. Then work down this list until the tab, the search result and the home screen all agree.

The favicon and PWA icon sizes you actually need in 2026

favicon.now — Tue, 10 Nov 2026 10:23:42 +0000

If you have shipped more than a handful of sites, you have probably dropped a single favicon.ico in the root and moved on. That used to be almost enough. In 2026 it is not.

Browser tabs, search results, iOS home-screen shortcuts, and Android install surfaces all want different files, sizes, and compositions. Missing one of them rarely breaks the page. It just means a blurry tab icon, a cropped launcher mark, or a generic globe where your brand should be.

I built favicon.now because I was tired of assembling that package by hand, and I am the site's maker, so I will be explicit about that. Here is the checklist: the files that matter, the HTML and manifest, and the mistakes I still see.

The practical set in 2026

You do not need twenty icon sizes — just a small set that covers tabs, search, Apple shortcuts, and installable web apps.

favicon.svg. The modern tab icon. A self-contained SVG stays sharp at any density and can adapt to light and dark chrome when the artwork is designed for it. Pair it with a raster fallback; not every older client will use the SVG.

favicon.ico. Still the compatibility file. Browsers and some legacy clients look for it at the site root even when you forget a <link> tag. A real ICO is a container with multiple frames, not a renamed PNG. At minimum, include solid 16×16 and 32×32 coverage.

favicon-48x48.png. An explicit square PNG for browser and search contexts. Search engines that display a favicon generally want a square image whose size is a multiple of 48 pixels.

apple-touch-icon.png (180×180). The icon iOS uses when someone adds your site to the home screen. Keep it square, give it an opaque background that suits the mark, and do not bake rounded corners into the image.

icon-192x192.png and icon-512x512.png. The baseline PWA icons. 192 is the compact Android and installed-app size; 512 is the large source for install UI and splash surfaces. These are ordinary any-purpose icons, so they can keep transparent edges if that is how the mark is designed.

maskable-icon-192x192.png and maskable-icon-512x512.png. Separate files for adaptive Android shapes. A maskable icon lets the OS crop it into a circle, rounded square, or squircle. Keep essential artwork inside a central safe zone and fill the canvas with a full-bleed background. Relabeling a transparent tab icon as purpose: maskable does not change the pixels, and the crop will look wrong.

site.webmanifest. JSON that declares the app name, colors, icon paths, sizes, and purposes. Relative icon paths resolve against the manifest URL, not the page URL.

Extra PNGs at 16, 32, and 96 pixels are useful fallbacks, but optional once this set is in place.

The HTML to put in your document head

Upload the files to a stable public directory, usually the site root, then add these tags to the shared layout. Root-relative paths keep nested pages consistent.

<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon-48x48.png" type="image/png" sizes="48x48">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">

Put the SVG first for browsers that can use it, then the PNG and ICO as fallbacks. The Apple touch icon uses its own rel. The manifest is how install surfaces discover the 192 and 512 assets.

A manifest snippet that tells the truth about purposes

A minimal, honest site.webmanifest looks like this:

{
  "name": "My Website",
  "short_name": "My Website",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Replace the name and colors with your own. Use standalone only if the site is designed as an installed app; browser or minimal-ui is safer for a content site. A valid manifest does not make a site installable by itself. HTTPS, a service worker in some browsers, and each browser's own heuristics still apply.

Common mistakes

Judging the mark only on a large canvas. A logo that looks perfect at 512 pixels can collapse into a smudge at 16. One or two letters, a simple silhouette, and open padding survive; a full wordmark usually does not.

Renaming a PNG to favicon.ico. That does not produce an ICO. The container and its frames have to be written as ICO.

Skipping a square crop, or baking iOS rounded corners into the Apple touch icon. Tabs and home screens are square. If the important part of the mark is off-center or tight against the edge, it will get clipped. Leave corner rounding to the device.

Declaring a transparent icon as maskable. Adaptive launchers will crop the corners and expose whatever sits behind the icon, often as a letterboxed mess.

Forgetting light and dark browser chrome. A white mark on a transparent background disappears on a light tab bar; a black mark disappears on a dark one. If you use transparency, check both.

Pointing the manifest at the wrong path. Relative src values resolve from the manifest's URL. If site.webmanifest lives in /assets/, icon-192x192.png is requested from /assets/icon-192x192.png unless you use a root-relative path.

Treating the favicon as an SEO ranking lever. It is not a direct ranking factor. A valid, recognizable icon can improve how your result is presented when a search engine chooses to show it.

Checking only the template source. Confirm the rendered document head, then open each icon URL and the manifest directly. Look for HTTP 200, the right format, and the declared dimensions — caches can keep serving an old ICO after you replace the file.

How I generate the package

favicon.now is a free generator I built to produce that same documented set from one source. You can start from an image (PNG, JPG, SVG, WebP, BMP, or GIF), an SVG you want to keep as a vector, one or two letters, or an emoji.

The editor runs in your browser. You adjust spacing, colors, and shape, and you can inspect the mark at 16, 32, 48, 180, 192, and 512 pixels, plus mockups of tabs, search results, and phone home screens. A maskable preview shows the safe zone so letters and symbols stay inside the inner guide.

The download is one ZIP. The standard package is 14 documented files: favicon.svg, a six-frame favicon.ico (sizes from 16 through 256 pixels), browser PNGs at 16, 32, 48, and 96, the 180×180 Apple touch icon, ordinary and maskable 192 and 512 PWA icons, plus site.webmanifest and the HTML to paste into your layout.

Editing and previews stay in the browser. A ZIP request sends the final square image — and a sanitized SVG when you supplied one — to an in-memory packaging endpoint. That request is not intentionally stored. A project is saved only if you sign in and choose to keep it on a profile.

Ship the right sizes once, wire them up correctly, and you can stop thinking about it.