ファビコンが更新されない原因は、たいていブラウザー側にあります。ブラウザーはファビコンを独自のキャッシュに保存していて、通常のリロードでは消えません。最も手早いのは、アイコンのURLを変えることです。ファイル名を変えるか、/favicon.svg?v=2のようにバージョンのクエリを付けて、<link>タグを更新します。その前に、サーバーとCDNが本当に新しいファイルを返しているか確認してください。
まず確認: サーバーは新しいアイコンを返していますか？
プライベートウィンドウで、https://example.com/favicon.icoのようなアイコンのURLを直接開きます。そこで古いアイコンが表示されるなら、原因はサーバー側です。CDNやプロキシが古いファイルを保持している、デプロイでファイルが置き換わっていない、HTMLが別の場所を指している、といったことが考えられます。Favicon Checkerは、宣言されたアイコンをすべて新たに取得し、サーバーが返すキャッシュヘッダーも表示します。
URLを変更する
新しいURLにすれば、ブラウザーのキャッシュ、CDN、Googleのキャッシュを一度に避けられます。
<link rel="icon" href="/favicon.ico?v=2" sizes="32x32">
<link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png?v=2">マニフェストのアイコンも同様にします。/favicon.ico自体は、ブラウザーがそのパスをリクエストするため名前を変えられません。CDNのキャッシュを削除して対処します。
ブラウザーで削除する
- ChromeとEdge: アイコンのURLをタブで開き、Ctrl+Shift+R（MacではCmd+Shift+R）を押してから、自分のページをリロードします。アイコンは履歴と一緒に保存されているため、古いものが残る場合は、そのサイトの履歴を削除するか、ブラウザーを再起動してください。
- Firefox: URLを直接開いてリロードする方法がここでも使えます。Firefoxもアイコンを履歴と一緒に保存しています。ライブラリを開き、サイトを右クリックして「このサイトについて忘れる」を選んでください。
- Safari: Safariを完全に終了してから開き直します。Macでは、「開発」→「キャッシュを空にする」も有効です（「開発」メニューは、「設定」→「詳細」で表示できます）。
適切なキャッシュヘッダーを設定する
アイコンはほとんど変わらないので、アイコンを変えるときにURLも変えるのであれば、長期間のキャッシュで問題ありません。ファイル名かクエリにバージョンを入れたファイルは、1年間キャッシュさせられます。
Cache-Control: public, max-age=31536000, immutable/favicon.icoのようにパスが固定のアイコンは、1日から1週間にしておくと、リブランディングの際に訪問者が何か月も古いアイコンを見続けずに済みます。
Cache-Control: public, max-age=604800ホーム画面とインストール済みのアプリ
iOSは、サイトがホーム画面に追加されるときにApple touch iconをコピーし、その後は更新しません。訪問者がショートカットを削除して、追加し直す必要があります。インストール済みのWebアプリは別です。Chromeはインストール済みアプリのマニフェストを定期的に確認し、アイコンが変わっていれば反映します。Androidでは、切り替える前にユーザーに確認することがあります。
Google検索
Googleは、トップページを再クロールしたときにファビコンを更新します。数日から数週間かかることがあります。Search Consoleでトップページのインデックス登録をリクエストすると、促せます。それでもアイコンが変わらない場合は、Googleのファビコンの要件と照らし合わせてください。