How to Find and Check a Website Favicon

A favicon (short for "favourites icon") is a small image file that represents a website in browser tabs, the address bar, bookmarks, history lists, and search engine results pages. It is typically a 16×16 or 32×32 pixel square image, though modern browsers request multiple sizes depending on the context — a home screen shortcut on iOS needs a 180×180 pixel image, while a PWA install on Android needs 192×192 and 512×512 pixel versions.

Why favicons matter beyond branding

A correctly configured favicon has three practical benefits beyond visual identity. First, Google displays favicons next to search results in SERPs — a missing or broken favicon shows a generic globe icon, which looks unprofessional. Second, mobile browsers use favicon files to create home screen shortcuts — a site without a properly sized touch icon gets a low-quality screenshot as the shortcut instead. Third, browser tab favicons help users identify and navigate back to your tab when many tabs are open.

The favicon.ico legacy format

The `.ico` format originated with Internet Explorer in 1999 and became the universal default because browsers automatically request `/favicon.ico` from every domain's root — no link tag required. A modern `.ico` file is a container that holds multiple sizes (typically 16×16 and 32×32) in one file. Despite its age, `favicon.ico` remains important as the universal fallback for legacy browsers, email clients, and tools that do not read HTML link tags.

There are three reliable methods to find a website's favicon URL. The fastest handles most cases; the others are fallbacks for sites with custom configurations.

Method 1: the default /favicon.ico path

Append `/favicon.ico` to any domain and open it in a browser tab. For example: `https://example.com/favicon.ico`. If an icon image appears in the tab and renders in the page, the file exists and loads correctly. If you see an error page or a blank white page, the file is absent or the server is misconfigured. This method works for the majority of websites that use the conventional path.

Method 2: view page source for link tags

Right-click any page and select "View Page Source" (or press Ctrl+U on Windows, Cmd+U on Mac). Search the HTML for `rel="icon"` or `rel="shortcut icon"`. The `href` attribute value in the matching `<link>` tag is the exact favicon path. This finds custom favicon locations — sites served from a CDN often use absolute URLs like `https://cdn.example.com/assets/favicon.svg` rather than the default root path.

Method 3: check the web app manifest

Progressive Web Apps declare their icons in a `manifest.json` file linked via `<link rel="manifest">` in the HTML head. Open the manifest URL and look for the `icons` array — each entry lists an image path and its pixel size. This is how Android and Chrome handle PWA installs, and the manifest is often the only place 192×192 and 512×512 PNG paths are declared.

Checking whether a favicon is correctly configured requires more than just confirming the file exists. A favicon can exist but still fail to display if the server returns the wrong content type, the file is too small for the requested context, or the browser has a stale cached version.

The number of favicon files a well-configured site needs has dropped significantly with modern browser support. Understanding which sizes are still required — and which are now redundant — lets you build a minimal, correct favicon set.

The case for SVG favicons

SVG favicons are supported by all major browsers since 2021. A single `favicon.svg` file renders perfectly at any size — 16×16 in a tab, 32×32 in a bookmark bar, or any intermediate resolution on high-DPI screens. SVG also supports a `prefers-color-scheme` media query inside the file, allowing the favicon to automatically switch between a light and dark version based on the OS theme. One SVG file replaces every PNG favicon except the Apple touch icon and PWA manifest icons.

Most favicon failures fall into a small number of predictable categories. Each one has a direct fix once you know where to look.

Favicon not showing in browser tab

The most common cause is a missing `<link rel="icon">` tag combined with a missing `/favicon.ico` file. Browsers fall back to requesting `/favicon.ico` automatically, but if that file returns 404, no icon appears. Fix it by adding the file at the domain root and adding a `<link rel="icon" href="/favicon.ico">` tag to your HTML `<head>`. For custom paths, the link tag is required — the browser will not guess custom locations.

Favicon showing as a blank or broken image

A broken favicon icon in the tab usually means the file exists but is not a valid image format. The most common cause is saving a PNG file with a `.ico` extension without proper conversion. Use the Image Format Detector to confirm the actual file format — a file named `favicon.ico` may actually be a PNG, JPEG, or HTML document internally. The fix is to generate a proper `.ico` file using the Favicon Generator.

Google showing the wrong favicon in search results

Google caches favicons and updates them independently of regular crawls — it can take days to weeks for a new favicon to appear in SERPs. To speed up the process: verify the favicon URL is publicly accessible (not blocked by robots.txt or requiring authentication), confirm the file has the correct Content-Type header, and request a re-index in Google Search Console. Google requires a minimum 48×48 pixel favicon for SERP display; smaller images are ignored.

Old favicon persisting after an update

Browser favicon caches are persistent and do not respect HTTP cache headers the same way regular resources do. Hard-refreshing the page (Ctrl+Shift+R or Cmd+Shift+R) forces a favicon re-fetch in most browsers. In Chrome, you can clear it via DevTools → Application → Storage → Clear Site Data. As a deployment strategy, changing the favicon filename or adding a cache-busting query string to the link tag href forces all browsers to fetch the new version immediately.

Creating all required favicon sizes manually from scratch is tedious and error-prone. The practical approach is to start with one high-resolution source image and generate all required sizes automatically.

Requirements for the source image

• Minimum 512×512 pixels — this is the largest required size (PWA splash screen) and serves as the downsampling source for all smaller sizes
• Square aspect ratio — favicons are always square; a non-square source gets cropped or distorted
• Transparent background — a transparent PNG works better than a white background, which appears as a white square on dark mode tabs
• Simple design — fine detail and thin lines look muddy at 16×16 px; logos with thick strokes and minimal complexity work best at small sizes
• PNG or SVG format — both preserve quality at any size; avoid JPEG which introduces compression artifacts on hard edges

Using the Favicon Generator

Upload your source image to the Favicon & App Icon Generator. The tool generates the complete standard favicon set — `favicon.ico` (16×16 and 32×32), `favicon-32x32.png`, `apple-touch-icon.png` (180×180), `android-chrome-192x192.png`, and `android-chrome-512x512.png` — along with the exact HTML link tags to paste into your `<head>` section. All generation runs in your browser; your image is never uploaded to any server.

Analysing an existing favicon set

If you already have a favicon set and want to know which files are redundant for modern browsers, the Favicon Bundle Size Analyzer lists every file in your set, identifies obsolete sizes (like the 57×57 and 72×72 iOS icons that modern iOS ignores), and recommends the minimal modern set. Reducing a bloated favicon set from 15 files down to 5 meaningfully reduces page weight on every request.

The favicon landscape has stabilised significantly. Here is the current consensus on the minimal correct implementation for 2026.

The minimal modern favicon set

You need five files and five link tags. Add `favicon.svg` as the primary icon (all modern browsers), `favicon.ico` as the fallback (legacy and tools that skip HTML parsing), `apple-touch-icon.png` at 180×180 for iOS, and `android-chrome-192x192.png` plus `android-chrome-512x512.png` referenced in your `manifest.json` for PWA installs. The HTML tags for the first three go in your `<head>`; the PWA icons are declared in the manifest only.

SVG favicons support dark mode, scale perfectly at any resolution, and replace all the PNG sizes modern browsers need. Favicon.ico exists purely as a fallback for the long tail of non-browser clients.

Dark mode favicons

SVG favicons can embed a `prefers-color-scheme` media query to show different colours in light and dark OS themes. This is the only favicon format that supports theme-aware icons without JavaScript. A dark mode SVG favicon keeps your branding readable on dark browser themes where a light icon might appear to disappear against the tab background.