WordPressサイトがGoogleの検索結果でfaviconが変わらない時の対策方法

WPの設定やプラグインでfaviconを色々設定して、ブラウザ上のアイコンは無事変わったように見えても、Googleの検索結果を見ると検索結果一覧に表示されるアイコンが変わらない場合がある。例によって毎回忘れるのでメモ。

そういう時は、下記の通りsite.webmanifestファイルを設置し、HTMLのヘッダー部には16×16サイズのfavicon、32×32サイズのfavicon、iPhone用の180×180のfaviconファイルを指定する。

site.webmanifestファイル内は、192×192サイズのfaviconと、512×512サイズのfaviconと、カラーの定義を行い、設定した場所にfaviconファイルをアップしておけばOK。

当然、WP以外のサイトでも可。

site.webmanifest

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

HTMLヘッダー

        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="manifest" href="/site.webmanifest">

用意する必要があるアイコンサイズ

• 16×16
• 32×32
• 180×180
• 192×192
• 512×512