localhostでfavicon_resetのtips

はじめに

この度は🎄RUNTEQ Advent Calendar 2025
のシリーズ２に参加させていただき誠にありがとうございます！

RUNTEQ受講生の　ほーぷ　と申します。
アドベントカレンダー初参戦🎅✨
そもそも記事を初投稿ということでちょっと緊張しますね。。。

今年のテーマが『みんなにおすすめしたい〇〇tips』ということで、
受講中の躓き・気づきからfavicon_resetについてまとめてみました。

本題

「え、なんでfaviconが変わらんの!?」

localhost の favicon が更新されない

本記事の操作説明は macOS の Google Chrome を使用し、  
localhost（開発環境）を対象に実行している前提 で記載しています。  

ご利用の端末（Windows / Linux / スマートフォン 等）や
ブラウザ（Safari / Firefox 等）によっては、  
メニュー名・操作手順が一部異なる場合があります。  

その場合は、お使いの環境に合わせて適宜読み替えてください。

ちょうど2025年秋のミニアプリウィークに参戦した時に、
ミニアプリ開発とカリキュラムの開発をlocalhostにて同時進行で行っていました。

ある日カリキュラムを進めていた時、ふと気がつくと、、、

↑ミニアプリのアイコン

カリキュラムでブログページ作成課題してるのに、
なんでかミニアプリのfaviconさんが「こんにちは😃」してたんです。

めっちゃ些細なことですが、、、

• なんかチラチラ目に入って鬱陶しい。
• ミニアプリウィークで個人的には苦い経験があってその思い出が想起されウザい。
• 最初3時間くらい気付かないで作業してたのに気づきだしたら、、、なんかウザい。

みたいな “ストレス” が地味〜に積み重なっていきましたw
そんなこともあり、どうにかこの「faviconさんこんにちは現象」を解消すべく、
「favicon をリセットして反映させる方法」 を調べました。

そもそもfaviconとは？

favicon（ファビコン）とは、「Favorite icon（お気に入りアイコン）」を略したもので、Webサイトを象徴する小さな画像のことです。faviconあるのとないのとで印象変わるなと個人的には思ってますし、自分のアプリやWebページにあるとなんかオリジナリティが出ていいですよね！

なぜ favicon が更新されないのか？

原因はめっちゃシンプルでした。

ブラウザが favicon を強力にキャッシュしているから

最初はRailsの問題かなぁ？と思っていましたが、
ほぼ ブラウザ側のキャッシュが悪さしてるみたいです。

最速の解決策

Chrome でキャッシュを無視して強制リロードする（ハードリロード）

1. 検証で開発者ツール（DevTools） を開く
   • Mac：⌘ + Option + I
   • Windows：Ctrl + Shift + I
2. ブラウザ左上の ⟳ 更新ボタンを長押しする
3. 「キャッシュの消去とハード再読み込み」 を選択

これだけで、favicon が即更新されます！

※開発者ツールを開いた状態で更新ボタン長押ししないと3. は出てこないみたいです！もし ⟳ 長押しで選択タブが3つ出てこない場合は、開発者ツール を開いていない可能性があります。

ただ、自分はこの方法では解消できず、、、

別解（１）： favicon をピンポイントでキャッシュ削除する

「ハード再読み込み（Hard Reload）しても favicon が更新されない…」
そんなときに使える、より精密なキャッシュ削除の方法です。

Chrome開発ツール の ネットワークタブを使って、
favicon.ico だけを個別に再取得させることができます。

1. 検証（DevTools） を開く
   • Mac：⌘ + Option + I
   • Windows：Ctrl + Shift + I
2. 上部のタブから 「ネットワーク」 を選ぶ
3. ページをリロードして、一覧に favicon.ico を表示させる
4. favicon.ico を右クリック
5. 「ブラウザキャッシュを消去」 を選択
   （※キャッシュが強力に残る場合は「ブラウザ Cookie の消去」も有効）
6. ページを再度リロード（通常リロード）
7. それでもダメなら、さらに 「ブロックリクエストのURL」 に設定し再度リロード
8. ブロックを解除して再度リロードを試してみる
   

この方法のメリット

• ページ全体のキャッシュを消さず、
  favicon だけをピンポイントで再取得できる
• ハードリロード よりも 確実に favicon の更新が反映されやすい
• 開発者視点で“原因を切り分け”しやすい

この方法で解決できました！

ハードリロード（基本技）で解決しなかった場合の
“切り札” として覚えておくと便利かも！

別解（２）：ファイル名を変える方法もあるが、、、

キャッシュが強すぎる場合は、ファイル名自体を変えてしまうのも有効みたい。。。

favicon.ico → favicon_v2.ico

Rails なら

<%= favicon_link_tag 'favicon_v2.ico' %>

と指定すると確実に反映されます。

ただしこの方法はほんまに“最終手段”であり（安易にファイル名変えるの怖い）、
まずは ハードリロード を試すのがおすすめです。

favicon問題から得た学び

今回のfavicon更新はちょっとした小ネタに見えて、
けっこう学び深いだなぁ感じました。

学んだこと：

• ブラウザキャッシュの仕組み
• なぜ “見た目だけ反映されない” が起こるのか
• フロントのデバッグ思考
• 小さな気づきから「調べる→知識と理解を深める」ことの重要性

RUNTEQでも、その後の自分にとっても、こういう経験が効いてくると信じています。

まとめ

今日から使えるtips

• faviconはブラウザキャッシュが超強力
• キャッシュの消去とハード再読み込み が最速
• 切り札「開発者ツールでURLのブロックリクエスト」設定
• どうしてもダメならファイル名変更 （最終奥義）

おわりに　

学習中のつまずきは、見方を変えれば全部 “tipsの宝庫” 。
そんないろんな方のtipsが見まくれるこの企画は控えめに言っても神企画ですね✨
他の人の見てもほんまに学びになります。

👇RUNTEQアドベントカレンダー2025のリンク🔗

この記事が誰かの
「あ、これで治った！」
につながれば嬉しいです🙌

良いお年を！🎄💫
ほーぷでした！

参考記事：

余談

話に出させていただいたミニアプウィーク時に作ったアプリです。
もしご興味があれば見てやってください。※DBの制限で今はサービス止めてます🙏