Webflowで新しい favicon をアップロードしたのに、ブラウザがまだ古い四角いアイコンを表示している場合、あなたは一人ではありません。症状としては、公開後でもタブバーに古いアイコンが残っていることです。

クイック修正（まずこれを実行）

以下の3ステップの回避策を適用し、ページをリロードしてください。

  1. Chrome（またはお好みのブラウザ）でページを開きます。
  2. favicon の URL にクエリ文字列を付加します。例: /favicon.ico?v=2。これは Webflow プロジェクトの Custom Code セクションの link タグを編集して行えます。
  3. サイトを再度公開します。新しい URL により、ブラウザはキャッシュされたコピーをバイパスします。

公開が完了したら Ctrl+F5（ハードリロード）を実行してください。更新されたアイコンが即座に表示されるはずです。

原因の解説

アイコンが古いままになる理由を理解すれば、同様の不具合を防げます。

ブラウザキャッシュ

favicon は非常に小さく、すべてのページ遷移でリクエストされるため、ブラウザは積極的にキャッシュします。URL が変わらない限り、多くのブラウザは新しい link タグを無視し、数日間ファイルを保持します。

Webflow の公開パイプライン

「Publish」をクリックすると、Webflow はファイルを CDN にプッシュします。CDN は前のバージョンを有効期限が切れるまで配信し続けることがあります。バージョン用クエリ文字列を付加すると、リソースが新しいことを CDN に伝えることができます。

rel 属性の誤り

Webflow の UI はデフォルトで <link rel='shortcut icon' href='...'/> を挿入しますが、最新のブラウザは HTML 仕様 HTML spec で定義された rel='icon' を推奨しています。レガシーな値を使用すると、一部のブラウザが新しいファイルを無視する可能性があります。

ファイルタイプの欠如または不一致

アップロードしたファイルが SVG で type 属性が省略されている場合、古い .ico ファイルがキャッシュから使用されることがあります。type='image/svg+xml' を明示すると曖昧さが解消されます。

CDN エッジキャッシュ

ハードリロード後でも、CDN のエッジノードが古いファイルを保持していることがあります。Webflow ダッシュボードの「Site Settings → Hosting → Clear cache」からエッジキャッシュをパージすれば解決しますが、クエリ文字列方式の方が多くの開発者にとって迅速です。

予防策

これらの手順に従えば、アイコンのパイプラインが整理され、将来の更新がスムーズになります。

実装例

以下は Webflow の Custom Code → Head エリアに貼り付け可能な、最小限かつ標準準拠のスニペットです。HTML 仕様に沿い、バージョン用クエリ文字列を含んでいます。

&lt;link rel='icon' type='image/svg+xml' href='https://example.com/favicon.svg?v=202308'&gt;
&lt;link rel='icon' type='image/png' href='https://example.com/favicon-32.png?v=202308' sizes='32x32'&gt;

https://example.com/ をご自身のドメインに置き換えてください。バージョン文字列はファイルが変更されるたびに変えるだけで構いません。

さらに読む

Webflow で favicon をアップロードする手順の全容は、公式ガイド Add a favicon or webclip を参照してください。デプロイ後に CDN の問題が残る場合は、記事 Favicon Not Updating After Deployment? The 2‑Minute Fix がエッジキャッシュのパージ方法を詳しく解説しています。

まずクイック修正を実施し、続いて根本原因に対処すれば、Webflow サイトのタブアイコンを常に最新の状態に保ち、ブラウザ間での一貫性を確保できます。