AI Skills
favicon-google-fixer

favicon-google-fixer

Fixes favicon visibility issues in Google search results. Use when Google isn't showing the site's favicon, when favicon 404 errors appear, or when updating favicon configuration for SEO.

0Star
0Fork
更新于 1/20/2026
获取 Skill源代码
SKILL.md
readonly只读
name
favicon-google-fixer
description

Fixes favicon visibility issues in Google search results. Use when Google isn't showing the site's favicon, when favicon 404 errors appear, or when updating favicon configuration for SEO.

When fixing favicon issues for Google, follow this systematic approach:

Step 1: Audit Existing Favicon Files

Check what favicon files exist in the project:

# Using find (works everywhere)
find public -name "*favicon*" -o -name "*icon*" -o -name "*manifest*" 2>/dev/null

# Or using ls with grep
ls public/ | grep -i -E "(favicon|icon|manifest)" 2>/dev/null || ls public/

Step 2: Fix 404s in Metadata

The most common issue is referencing files that don't exist. Search for icon references:

# Find all icon references in the codebase
grep -r "favicon\|apple.*icon\|manifest" --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" --include="*.html" --include="*.json" .

Next.js (App Router)

// app/layout.tsx
export const metadata: Metadata = {
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "48x48", type: "image/x-icon" },
      { url: "/favicon-96x96.png", sizes: "96x96", type: "image/png" },
      { url: "/favicon.svg", type: "image/svg+xml" },
    ],
    apple: "/apple-touch-icon.png",
    shortcut: "/favicon.ico",
  },
  manifest: "/site.webmanifest",
}

Nuxt.js

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: "icon", href: "/favicon.ico", sizes: "48x48" },
        { rel: "icon", href: "/favicon-96x96.png", sizes: "96x96", type: "image/png" },
        { rel: "icon", href: "/favicon.svg", type: "image/svg+xml" },
        { rel: "apple-touch-icon", href: "/apple-touch-icon.png" },
        { rel: "manifest", href: "/site.webmanifest" },
      ],
    },
  },
})

Astro

<!-- src/layouts/Layout.astro -->
<head>
  <link rel="icon" href="/favicon.ico" sizes="48x48" />
  <link rel="icon" href="/favicon-96x96.png" sizes="96x96" type="image/png" />
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />
</head>

SvelteKit

<!-- src/app.html -->
<head>
  <link rel="icon" href="%sveltekit.assets%/favicon.ico" sizes="48x48" />
  <link rel="icon" href="%sveltekit.assets%/favicon-96x96.png" sizes="96x96" type="image/png" />
  <link rel="icon" href="%sveltekit.assets%/favicon.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" />
  <link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
</head>

React (CRA) / Vite / Plain HTML

<!-- index.html -->
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" href="/favicon-96x96.png" sizes="96x96" type="image/png" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Step 3: Create/Update Web Manifest

Create public/site.webmanifest (or manifest.json):

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

Step 4: Update JSON-LD Organization Logo (if exists)

Search for existing JSON-LD and update logo path:

grep -r "@type.*Organization\|jsonLd\|json-ld" --include="*.tsx" --include="*.ts" --include="*.jsx" --include="*.js" .

const jsonLd = {
  "@type": "Organization",
  logo: "https://yoursite.com/web-app-manifest-512x512.png",
  // ...
}

Step 5: Check robots.txt

Ensure favicon access is allowed:

User-agent: *
Allow: /

Never have: Disallow: /favicon.ico

Step 6: Generate Proper Favicons

Option A: From SVG (best quality)

macOS:

brew install librsvg

Linux (Debian/Ubuntu):

sudo apt install librsvg2-bin

Linux (Fedora/RHEL):

sudo dnf install librsvg2-tools

Windows (via Chocolatey):

choco install rsvg-convert

Generate all sizes:

rsvg-convert -w 96 -h 96 public/favicon.svg -o public/favicon-96x96.png
rsvg-convert -w 180 -h 180 public/favicon.svg -o public/apple-touch-icon.png
rsvg-convert -w 192 -h 192 public/favicon.svg -o public/web-app-manifest-192x192.png
rsvg-convert -w 512 -h 512 public/favicon.svg -o public/web-app-manifest-512x512.png

Option B: From existing PNG

macOS:

brew install imagemagick

Linux (Debian/Ubuntu):

sudo apt install imagemagick

Linux (Fedora/RHEL):

sudo dnf install ImageMagick

Windows (via Chocolatey):

choco install imagemagick

Generate all sizes:

magick public/source-icon.png -resize 96x96 public/favicon-96x96.png
magick public/source-icon.png -resize 180x180 public/apple-touch-icon.png
magick public/source-icon.png -resize 192x192 public/web-app-manifest-192x192.png
magick public/source-icon.png -resize 512x512 public/web-app-manifest-512x512.png

# Generate .ico with multiple sizes
magick public/source-icon.png -background none -define icon:auto-resize=48,32,16 public/favicon.ico

Note: ImageMagick may not render SVGs with gradients correctly. Use rsvg-convert for complex SVGs.

Recommended sizes for Google:

File Size Purpose
favicon.ico 48x48 (or 16,32,48) Legacy browsers
favicon-96x96.png 96x96 Google, high-DPI
apple-touch-icon.png 180x180 iOS devices
web-app-manifest-192x192.png 192x192 PWA small
web-app-manifest-512x512.png 512x512 PWA large

Step 7: Deploy & Request Re-indexing

  1. Deploy changes
  2. Go to Google Search Console
  3. Enter your URL → Click "Request Indexing"
  4. Wait 1-4 weeks for Google's favicon cache to update

Verification

# Check favicon returns 200 (replace with your domain)
curl -I https://yoursite.com/favicon.ico

# Check Google's cached favicon
# macOS:
open "https://www.google.com/s2/favicons?domain=yoursite.com&sz=64"
# Linux:
xdg-open "https://www.google.com/s2/favicons?domain=yoursite.com&sz=64"
# Windows:
start "https://www.google.com/s2/favicons?domain=yoursite.com&sz=64"

# Verify PNG files exist and check sizes
file public/favicon*.png public/apple-touch-icon.png public/web-app-manifest*.png

Common Gotchas

  1. Silent 404s: Metadata references non-existent files - always audit first
  2. Google caching: Takes days to weeks to update even after fixes - be patient
  3. Wrong sizes: Google prefers 48x48px minimum, ideally 96x96px or larger
  4. SVG issues: Some crawlers don't handle SVG favicons well - always include PNG fallback
  5. Transparent backgrounds: Apple touch icons should have solid backgrounds
  6. Case sensitivity: Some servers are case-sensitive (Favicon.ico ≠ favicon.ico)

You Might Also Like

Related Skills

cache-components

cache-components

137Kdev-frontend

Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.

vercel avatarvercel
获取
component-refactoring

component-refactoring

128Kdev-frontend

Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.

langgenius avatarlanggenius
获取
web-artifacts-builder

web-artifacts-builder

47Kdev-frontend

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

anthropics avataranthropics
获取
frontend-design

frontend-design

47Kdev-frontend

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

anthropics avataranthropics
获取
react-modernization

react-modernization

28Kdev-frontend

Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.

wshobson avatarwshobson
获取
tailwind-design-system

tailwind-design-system

28Kdev-frontend

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

wshobson avatarwshobson
获取