Windows Icons

How to Check Your Favicon Setup

Leena Taylor Paul By Updated August 18, 2026 9 min read
Quick Answer

To check a favicon setup, open each icon URL to confirm it loads, watch the request in DevTools for a 200 status and open the .ico in a viewer to confirm the sizes inside. A missing size or a 404 path is the usual fault. The free Univik ICO Viewer shows which sizes your favicon.ico holds.

A favicon that will not show is one of the more frustrating web problems, because the icon looks fine on your machine and broken on everyone else's. The fix is rarely a guess. A short set of checks tells you exactly which part is wrong before you change a thing.

Here is how to verify each piece of a favicon, from the file on the server to the sizes packed inside it.

What to Check in a Favicon Setup

A full setup is a handful of files, each declared by a tag and each meant to resolve to a real image. Before diving into tools, it helps to know the pieces you are checking for.

The pieces a full setup declares
favicon.icoholds 16, 32 and 48 for tabs
apple-touch-icona 180 pixel PNG for iOS
manifest icons192 and 512 for Android
SVG faviconoptional, for modern browsers
Each one should resolve to a real file rather than a 404. The full set is laid out in the pillar guide.

Which of these your site actually needs is set out in the guide on favicon sizes, and building the whole set is covered in the pillar on adding a favicon to a website. This page is about testing what you already have.

Open Each Icon URL Directly

The quickest test needs no tools at all. Type each icon address into the browser bar, starting with the favicon.ico at your site root. If the image appears, the file is there and reachable. If you get a 404 page, the file is missing or sitting in the wrong folder.

Do the same for the other files, the SVG and the apple-touch-icon, at whatever paths your tags point to. This one check rules out the single most common fault, a file that simply is not where the tag says it is.

Read Your Icon Tags in the Source

Next, look at what the page actually declares. Open the page source and look for rel="icon". The tags should sit inside the head, use the href attribute rather than src and point at paths that resolve. The link element reference spells out how the sizes attribute pairs with each file.

To list every icon tag at once, paste this into the browser console.

document.querySelectorAll('link[rel*="icon"]').forEach(function(el){
  console.log(el.rel, el.href, el.sizes.value || 'no size');
});

It prints each tag with its rel, the full URL it resolves to and the size it claims. A tag missing from that list is a tag your page never declared.

Watch the Requests in DevTools

The network view shows what the browser really fetched. Open DevTools, move to the Network tab, type favicon into the filter and reload the page. Each row is a request the browser made, and the status column is the answer you want. The DevTools network guide covers reading that log.

What the network status tells you
200
the file loaded fine
404
the link points at nothing
no request
no valid tag, or outside the head
A 200 means the file is reachable, a 404 means the path is wrong and silence means the tag is missing.

While you are there, click the favicon request and read its response headers. If the icon downloads instead of showing, the server is sending the wrong Content-Type, and an .ico should come back as image/x-icon.

Check the Manifest Icons

The tab favicon is only half the picture. The icons a phone uses live in the web manifest, and they need their own look. In DevTools, open the Application panel and select Manifest, which lists every icon the manifest declares along with whether each one loaded.

A red entry there is a manifest icon that failed to fetch, a 192 or a 512 sitting at a broken path. The web manifest reference documents those icon entries, and the Android side of them is covered in the guide on PWA and Android icons.

Confirm the Sizes Inside the ICO

Here is the gap every browser check leaves. A 200 status tells you the favicon.ico downloaded, but it says nothing about what is inside. An .ico is a container, and it can hold one size or several, so a file that loads can still be missing the 16 or the 48 a crisp tab needs.

To see inside it, load the .ico into an ICO viewer. The free Univik ICO Viewer lists every image a favicon.ico contains and its size, so you can confirm the file holds the full set rather than a lone image stretched to fit.

See exactly what your favicon.ico holds

Open your icon in the free viewer to read every size inside it, then rebuild it with the converter if a size the check flagged turns out to be missing.

Free Download See All Features

Why a Favicon Won't Show

When the files check out but the icon still does not appear, a few culprits account for most cases.

A stale cache
The browser is showing an old copy. Hard refresh, add a version query or test in a private window.
A wrong path
The href points at a file that is not there. The direct URL check and a 404 confirm it.
No apple-touch-icon
On an iPhone, a missing 180 pixel icon leaves Safari showing a screenshot of the page.

One more catches people on Edge. A file that was only renamed from PNG to .ico can slip past Chrome yet fail in a stricter browser, which is its own trap, taken up in the guide on a renamed PNG.

Fix What the Check Finds

Each fault the checks surface has a plain fix. A broken path is corrected in the tag. A stale icon clears with a cache bust. A size missing from the .ico calls for a rebuild.

  1. Name the faultUse the checks above to pin down which piece is wrong.
  2. Fix a broken pathPoint the href at where the file actually sits.
  3. Rebuild a missing sizeRemake the .ico with the sizes it was short of.
  4. Bust the cacheHard refresh or add a version query, then run the checks again.

When a size is missing, the Univik ICO Converter rebuilds the favicon.ico with the full set, and the iOS side, the apple-touch-icon Safari looks for, is covered in the guide on the Apple touch icon.

Frequently Asked Questions

Open the icon URL in your browser, such as the favicon.ico at your site root, and see if it loads. Then open DevTools, watch the network request for a 200 status and confirm the link tag sits in the page head. An online checker rolls all of that into one report.

A browser only tells you the file loaded, not what is packed inside it. Open the .ico in an ICO viewer and it lists every size the file holds, so you can confirm the 16, 32 and 48 are all there rather than a single image.

The link tag is pointing at a path that does not exist. Check the href against where the file actually sits and prefer a root relative path that starts with a slash or a full URL. Opening the icon address directly confirms whether the file is reachable.

The browser is holding an old copy. Favicons cache hard, so force a fresh load with a hard refresh, a private window or a version query on the URL. Also purge any CDN in front of the site.

Open DevTools, go to the Network tab and type favicon in the filter, then reload the page. A row with a 200 status means the file loaded, a 404 means it is missing and no row at all means the page has no valid icon tag.

iOS ignores the small tab favicon and looks for a 180 pixel apple-touch-icon instead. If that file is missing, Safari falls back to a screenshot of the page. Adding the apple-touch-icon is the fix, not more work on the .ico.
Leena Taylor Paul

Written and maintained by Leena Taylor Paul and the Univik team, developers of Windows data conversion and recovery software since 2013. A favicon that will not show sends people down the wrong path more than most web problems, so this guide runs the checks in order, the file, the tags, the sizes, before you touch anything. Last verified August 2026. Favicon still not behaving? Contact our support team.