問題

Google検索結果で log.eurekapu.com のサイトアイコンが黒い丸で表示されている。

本来はターミナルウィンドウのアイコン（青い背景）が表示されるべき。

現状の設定

存在するファビコンファイル

nuxt.config.ts の設定

app: {
  head: {
    link: [
      { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }
    ]
  }
}

原因分析

1. favicon.ico の設定が不足

問題: nuxt.config.ts で favicon.svg のみ指定されており、favicon.ico がHTMLに含まれていない。

Googleは以下の優先順位でfaviconを探す：

1. <link rel="icon"> タグ
2. /favicon.ico（ルート直下）
3. Web App Manifest の icons

SVGファビコンはまだ一部のブラウザ・クローラーで完全にサポートされていないため、.ico のフォールバックが必要。

2. apple-touch-icon が未設定

問題: apple-touch-icon が設定されていない。

Googleは apple-touch-icon も参照することがあり、特にモバイル検索結果で使用される。

3. favicon.ico が古い可能性

問題: favicon.ico は2024年9月29日から更新されていない。

現在の favicon.svg（青いターミナルアイコン）と内容が異なる可能性がある。

4. Googleのクロール・インデックス遅延

問題: faviconの変更がGoogleに反映されるまで数週間から数ヶ月かかる場合がある。

推奨される解決策

1. nuxt.config.ts に favicon.ico を追加

link: [
  { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' }
]

2. apple-touch-icon.png を作成

180x180px のPNG画像を作成し、public/ に配置。

3. favicon.ico を最新の内容で再生成

favicon.svg から以下のサイズを含む .ico ファイルを生成：

• 16x16
• 32x32
• 48x48

オンラインツール例：

• RealFaviconGenerator
• favicon.io

4. Web App Manifest を確認

manifest.json または site.webmanifest に icons 配列が正しく設定されているか確認。

5. Google Search Console でクロールリクエスト

1. Google Search Console にアクセス
2. URL検査ツールで https://log.eurekapu.com/ を検査
3. 「インデックス登録をリクエスト」をクリック

参考リンク

• Google Search Central: Define a favicon to show in search results
• How Google selects favicons

次のアクション

• favicon.ico の内容を確認（現在のfavicon.svgと同じデザインか）
• apple-touch-icon.png を作成
• nuxt.config.ts にfallback設定を追加
• Google Search Console でクロールリクエスト