1. はじめに
卒業制作のRailsアプリにファビコンを設定しました。
「小さい部分だし後回しでいいかな…」と思っていたのですが、
入れてみると一気に“それっぽさ（プロダクト感）”が増します。
この記事では：
- PNG画像から.icoを作る方法
- Railsへの組み込み方
- 本番で反映されない時のチェックポイント
をまとめます。
2. faviconとは？
- ブラウザタブに表示される小さなアイコン
- ブックマーク時にも表示される
- スマホのホーム追加時にも使用される
ブランド印象を決める意外と重要な要素です。
▼タブに表示されるこれ
3. まずは画像を.icoに変換する
icoって何？
faviconの標準的な形式。
複数サイズを1ファイルに含められるのが特徴です。
PNG → ICO に変換する方法
- 方法①：オンラインツール（最も簡単）＊私もこの方法でやりました
・favicon.io
・realfavicongenerator.net
・favicon Generator
PNGをアップロードするだけで
複数サイズ入りの.icoを生成してくれます。
- 方法②：Macで変換（ImageMagick）
ImageMagickが入っている場合：
convert input.png -define icon:auto-resize=64,48,32,16 favicon.ico
おすすめサイズ
| 用途 | サイズ |
|---|---|
| favicon基本 | 32x32 |
| Retina対応 | 48x48 |
| 旧ブラウザ | 16x16 |
4. Railsへの組み込み方法
- ① 画像の保存場所
app/assets/images/favicon/
例：
app/assets/images/favicon/favicon.ico
app/assets/images/favicon/favicon-32x32.png
app/assets/images/favicon/apple-touch-icon.png
- ② application.html.erb に追記
<%= favicon_link_tag "favicon/favicon.ico" %>
<link rel="icon" type="image/png" sizes="32x32"
href="<%= asset_path('favicon/favicon-32x32.png') %>">
<link rel="apple-touch-icon"
href="<%= asset_path('favicon/apple-touch-icon.png') %>">
たったこれだけでアイコン変更ができます！
▼変更したファビコン（左端のペンギンアイコン）
5. .icoだけでいいの？
✔ 最低限なら .icoだけでOK
<%= favicon_link_tag "favicon/ai_bloom_favicon.ico" %>
これだけでも表示されます。
✔ でも公開アプリならPNGも推奨されるようです。
理由：
- 高解像度対応
- iPhoneホーム追加対応
- 一部ブラウザ互換性
結論：本番公開なら.ico + PNGが安心
6. 本番で反映されないときのチェックリスト
ここが一番ハマりやすいポイントです。
✔ 1. ブラウザキャッシュを疑う
- Cmd + Shift + R
- シークレットモードで確認
faviconは強くキャッシュされます。
✔ 2. public/に古いfaviconが残っていないか
public/favicon.ico
これがあると優先される場合があります。
✔ 3. 直リンクになっていないか
- ❌ NG例
<link rel="icon" href="/icon.png">
- ⭕ 正しい例（asset経由）
<%= asset_path('favicon/favicon-32x32.png') %>
✔ 4. 本番でassetsがビルドされているか
Renderなどの場合：
- マージ後に自動デプロイが走っているか
- ビルドログでエラーが出ていないか
7. デザイン上の注意点
また、以下私がファビコンアイコンを作成してみて感じた点です。
- 小さいので文字は潰れる
- シンプルなシルエット推奨
- ブランドカラーを使うと識別性UP
8. まとめ
- PNGから.icoに変換する
- Railsでは favicon_link_tag を使う
- 本番で反映されないときはキャッシュを疑う
-公開アプリならPNGも用意しておくと安心
参考になれば幸いです！
ぺ