Home › Blog

How to Check Your Favicon Across Browsers and Devices

By Tooljin · 8 August 2026 · 5 min read

A favicon is a 16-pixel image that nobody notices until it is missing. Then it becomes the blank page icon sitting next to your site in a bookmark bar, and the grey globe next to your result in mobile search while every competitor shows a logo.

It is a small thing that is unusually easy to get wrong, because the failure is almost always invisible on the machine you built the site on.

Why it is worth twenty minutes

Three reasons, in order of how much they actually matter:

Search results. Google shows a favicon next to results on mobile. If yours is missing or unreachable, you get a generic placeholder. Your listing looks less established than the ones around it, and that costs clicks on a result you already earned.

Tabs and bookmarks. People run twenty tabs. The favicon is how they find yours without reading. A site with no icon is a site they close first.

Home screens. If someone saves your site to a phone home screen, the icon that appears is not your favicon - it is a different file entirely, and it is the one most sites forget.

The files you actually need

Favicon guides tend to list fifteen files. You do not need fifteen. This set covers essentially everything in use:

And in your <head>:

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

Order matters slightly - browsers pick the first format they understand, so SVG first means modern browsers get the sharp one.

The cache problem, which is most of the problem

This is the single biggest reason people think their favicon is broken when it is not, and the reason people think it is fixed when it is not.

Browsers cache favicons harder than almost anything else. A favicon can survive a normal refresh, a hard refresh, and sometimes a cache clear. You can replace the file on the server, reload twenty times, and still see the old icon - or still see nothing, because the browser cached the 404 from before you uploaded it.

How to actually see the current state:

1. Request the file directly. Open yoursite.com/favicon.ico in the address bar. If the image loads, the file is there. If you get a 404, no amount of markup will help.
2. Use a private window. A fresh profile has no favicon cache.
3. Check from a different device. Your phone on mobile data has never seen your site.
4. Add a query string. yoursite.com/favicon.ico?v=2 forces a fresh fetch.

If the file loads directly but the tab is still blank, it is cache, not configuration. Wait, or test elsewhere.

Where favicons actually break

The path is relative when it should be absolute. href="favicon.ico" resolves differently on / than on /blog/post/. Always start with a slash: href="/favicon.ico".

The manifest points at files that were never uploaded. This is the most common broken piece, because nothing visibly fails. Your site.webmanifest lists 192px and 512px icons; if those files are not at the paths listed, Android silently falls back and the install prompt looks wrong. Nobody notices because nobody tests the Android install flow.

The manifest still says "My Awesome App". Favicon generators ship a template site.webmanifest with a placeholder name. If you never edited it, that placeholder is what appears under the icon when someone adds your site to their home screen.

Transparency on the Apple icon. iOS composites the touch icon onto a background rather than preserving transparency, so a logo designed to sit on a transparent background can end up on black. Give that one file a solid background.

robots.txt blocks the path. If the favicon lives in a directory you have disallowed, Google cannot fetch it, so it cannot show it in search results - even though it renders fine in your browser.

It only exists on the homepage. Some setups declare the favicon in one template and not others. Deep pages get nothing.

The icon is unreadable at 16 pixels. A detailed logo with thin strokes becomes grey mush. Favicons need a mark, not a wordmark - one letter, one shape, high contrast.

Testing it properly

A real check covers more than one browser tab:

1. Load /favicon.ico, /favicon.svg and /apple-touch-icon.png directly and confirm each returns an image, not a 404
2. Open /site.webmanifest in the browser - it should render as JSON. Check the name field is your site, and open each src path listed under icons to confirm the file exists
3. Open the site in a private window in Chrome and in Firefox
4. Open it on a phone, and add it to the home screen to see the icon and the label
5. Search for your own site on a mobile browser and look at the icon next to the result
6. View source on a deep page, not just the homepage, and confirm the icon tags are there too

Steps 2 and 4 are the ones almost everyone skips, and they are where the failures hide.

Checking it in one pass

Doing all of that by hand takes a while. Favicon Checker on Tooljin fetches the files, checks the declarations and shows how the icon renders across contexts, so you find the 404 and the placeholder manifest in one go rather than discovering them months later.

If you need the icons themselves, Favicon Generator produces the whole set - ICO, SVG, PNGs, the Apple and Android sizes and a manifest - from a single image or a description. Both are free and neither needs an account. If your source PNGs are heavy, Image Compressor will bring them down before you upload.

A short checklist

1. Every icon file returns an image, not a 404, when opened directly
2. favicon.svg exists and is listed first
3. apple-touch-icon.png is 180×180 with a solid background
4. site.webmanifest has your real site name, not a placeholder
5. Every path inside the manifest resolves to a file that exists
6. All paths start with a slash
7. The icon tags appear on deep pages, not only the homepage
8. robots.txt does not block the icon paths
9. The mark is still readable at 16 pixels
10. Verified in a private window and on a phone, not just your own browser