Why Your Favicon Doesn’t Show in Google (and How to Fix It)

Stop generating dozens of favicon files for every possible size. Modern browsers have simplified things dramatically, and you only need a small set of well-chosen icons to ensure your site looks perfect across every platform and device.

Why Most Favicon Setups Are Overcomplicated

Traditional favicon generators output 20 or more files — a relic from an era when every browser and OS required its own specific format and resolution. Developers still ship these bloated icon sets out of habit, adding unnecessary weight to projects without any measurable benefit.

The truth is that browser support has converged. A lean, intentional favicon setup performs identically to one with dozens of redundant files, while being far easier to maintain.

Favicon Not Showing in Google? Start Here

If your favicon doesn’t show in Google search results, it’s usually one of these:

  • The icon isn’t accessible at the expected URL (check /favicon.png and /favicon.ico).
  • The page hasn’t been recrawled yet (use Search Console URL Inspection and request indexing).
  • The favicon is blocked by robots.txt or returns a 4xx/5xx status.
  • The HTML is missing the icon tags or the manifest path is wrong.

Run the checker below to confirm what Google can actually fetch, then generate the fixed set in one click.

The Favicon Files That Cover Every Platform (and where to put them)

Use this exact layout — it matches the generator and the checker on this page:

  1. /favicon.png — 96×96 PNG at the site root
  2. /favicon.ico — 256×256 ICO at the site root
  3. /favicons/favicon.svg — scalable vector icon with dark mode support
  4. /favicons/favicon-16x16.png — small raster icon
  5. /favicons/favicon-32x32.png — taskbar-sized raster icon
  6. /favicons/favicon-48x48.png — desktop/high-DPI raster icon
  7. /favicons/apple-touch-icon.png — 180×180 PNG for iOS home screen
  8. /favicons/favicon-192.png — Android home screen icon (from the manifest)
  9. /favicons/favicon-512.png — PWA splash screen icon (from the manifest)
  10. /favicons/manifest.webmanifest — references the 192px and 512px icons for Android/PWA

1. favicon.png (96×96) — Root PNG

Browsers happily downscale this 96×96 PNG for tabs and pinned shortcuts. Keeping it at the root (/favicon.png) ensures every crawler and browser finds it instantly. Preview size kept small on purpose:

Preview: FQB

2. favicon.ico (256×256) — Root Legacy Fallback

The ICO format keeps old browsers happy. Shipping a single 256×256 image inside the ICO covers high-res Windows contexts without bloating multiple embedded sizes.

Tip: Browsers still auto-request /favicon.ico. Keeping this file at the root with an explicit rel="icon" tag gives you cache control while satisfying legacy behavior.

3. favicon.svg — Scalable Favicon With Dark Mode Support

SVG favicons are the modern standard, supported by Chrome, Firefox, Edge, Opera, and Safari 15+. Because SVGs are vector-based, they render crisply at any tab size without pixelation. Even better, you can embed a CSS media query directly inside the SVG to switch colors for dark mode users.

Tip: The SVG icon is the preferred format for modern browsers. It scales perfectly at any resolution and can adapt to light/dark mode automatically via CSS media queries.

4. favicon-16/32/48.png — Raster Browser Icons

Some contexts still prefer explicit raster icons. Keep these PNGs inside /favicons/ so the HTML links stay organized while providing sharp results for tabs, taskbars, and desktop shortcuts.

5. apple-touch-icon.png — iOS and macOS Safari

When users add your website to their iPhone or iPad home screen, iOS uses the apple-touch-icon.png file. This must be a 180×180 pixel PNG. iOS automatically applies rounded corners and visual effects, so provide a clean square image without your own masking or rounded edges.

Tip: Leave approximately 20 pixels of padding around your logo within the 180×180 canvas. This safe area ensures the icon doesn't appear clipped after iOS applies its corner rounding and drop shadow effects.

6. manifest.webmanifest — The Web App Manifest

The manifest in /favicons/ tells Android Chrome where to find your PWA icons and what sizes are available. Paths are relative to the manifest file itself:

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "favicon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "favicon-512.png", "type": "image/png", "sizes": "512x512" }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

Complete HTML Favicon Markup

Add these lines inside your HTML head section and you're done:

Root pair + eight files in /favicons/. Full favicon coverage on every major browser and device.

Favicon Sizes You Can Safely Skip

Many older tutorials recommend additional sizes. Once you ship the set above, you can skip the rest:

  • 128×128, 144×144 — Legacy for Chrome Web Store/Windows 8 tiles; modern browsers scale from 96px or the ICO.
  • Extra-large PNGs (256×256, 384×384) — Android/PWA already pulls 192px and 512px from the manifest; Windows uses the ICO.

Browser and Platform Compatibility

This focused ten-file favicon setup provides complete coverage:

  • Google Chrome — Prefers the SVG icon, falls back to ICO
  • Mozilla Firefox — Full SVG favicon support
  • Microsoft Edge — Uses SVG icon on Chromium-based versions
  • Safari (macOS) — SVG favicon support since version 15
  • Safari (iOS) — Uses apple-touch-icon.png for home screen bookmarks
  • Chrome (Android) — Reads icons from manifest.webmanifest
  • Internet Explorer / Legacy Edge — Falls back to favicon.ico
  • Opera, Brave, Vivaldi — Chromium-based, uses SVG icon

Favicon Implementation Checklist

  1. Design your icon as an SVG (favicon.svg) with optional prefers-color-scheme: dark media query
  2. Export PNG versions: 96×96 (root favicon.png) plus 16×16, 32×32, 48×48 in /favicons/
  3. Export a 192×192 PNG (favicon-192.png) for Android home screen
  4. Export a 512×512 PNG (favicon-512.png) for PWA splash screens
  5. Convert or export a 256×256 pixel .ico version for legacy browser support
  6. Export a 180×180 PNG with 20px inner padding for Apple devices
  7. Create a manifest.webmanifest file referencing both Android PNGs
  8. Add the link tags to every page's head section

Common Favicon Mistakes to Avoid

  • Using only favicon.ico — You miss out on crisp SVG rendering and proper mobile home screen icons.
  • Forgetting the apple-touch-icon — iOS will show a low-quality screenshot of your page instead of your icon.
  • Skipping the manifest — Android Chrome won't display your icon correctly for installed PWAs.
  • Generating 20+ icon files — Unnecessary complexity that adds no real-world benefit over the focused ten-file approach.
  • Not testing dark mode — An SVG favicon that looks great on light backgrounds may be invisible in dark mode without the media query.

Free Favicon Checker

Validate your favicon setup across ico, PNG sizes, and SVG.

Free Favicon Checker: Check Icons for Every Platform

Run a focused favicon check to confirm your icon loads everywhere it should: browsers, mobile home screens, and search results.

What we validate for you:

  • favicon.ico availability and correctness.
  • Apple touch icon and Android icon readiness.
  • Common PNG sizes used across major platforms.
  • SVG support for modern browsers.
  • Clear pass/fail results for quick fixes.

Favicon Creator

Upload an image and generate all the favicon files you need.

📁

Click to upload or drag & drop your image

PNG, JPG, or SVG — at least 512×512 recommended

Source image

Generated Icons

HTML Code

Default: favicon.png + favicon.ico in /, everything else in /favicons/

Manifest Editor

Bing / Windows Tile (browserconfig.xml)

We generate a browserconfig.xml with Windows tile logos. It’s also included in the ZIP.

Favicon Analysis

Favicons help your site stand out in browser tabs, bookmarks, and search results.

Need Help Fixing These Issues?

Our team of experts can help improve your website's favicon and branding setup.