ファビコン。
小さい。地味。後回しにされがち。
それでも、2026年のWeb制作において、ファビコンは確実に「体験の一部」になっています。
タブ、ブックマーク、スマホのホーム画面、PWA、SNSプレビュー。
どこにでも顔を出すのに、設定は一瞬で終わったことにされがち。
この記事では、2026年現在の実情に合わせて、
・なぜ昔のファビコン作法をやめる必要があるのか
・実務で通用する作成方法
・HTMLの正しい書き方
・なぜ「3つのアイコン」で足りるのか
このあたりを、フロントエンド視点で徹底的に掘ります。
勉強中の人にも、現場でコードを書いている人にも向けた内容です。
順序は気にしません。現場感覚優先で進めます。
そもそもファビコンとは何者なのか
ファビコンは、もともとブラウザのタブに表示される16px四方のアイコンでした。
しかし今は違います。
ブックマーク、履歴、スマホのホーム画面、PWAの起動アイコン。
役割が増えすぎた。
つまり、ファビコンは「1枚の画像」ではなく、「複数の用途を持つUI要素」になった。
それなのに、favicon.icoだけ置いて満足していませんか。
なぜ昔のファビコン運用をやめる必要があるのか
理由はシンプルです。
デバイスが増えすぎた。
PCブラウザ、iPhone、Android、iPad、PWA。
それぞれが「欲しいサイズ」「欲しい形式」を主張してくる。
全部に対応しようとして、
・10種類以上のアイコンを作る
・HTMLがlinkタグだらけになる
そんな時代がありました。
でも2026年の現実は違う。
主要ブラウザとOSはかなり収束しています。
2026年に必要なファビコンは3つだけ
結論めいたことは言いませんが、実務で困らない構成はほぼ決まっています。
1. favicon.svg ベクターアイコン
最優先です。
SVGは解像度に依存しない。
Chrome、Firefox、Safari、Edge。
主要ブラウザはすでにSVGファビコンをサポートしています。
高解像度ディスプレイでもボケない。
これを使わない理由はほぼありません。
2. favicon.ico フォールバック用
過去との和解枠です。
古い環境、企業内IE残党、謎の組み込みブラウザ。
全部を救う必要はないけど、置いておくと平和。
中身は16pxと32pxが入っていれば十分。
3. apple-touch-icon.png ホーム画面用
iOS向けのホーム画面アイコン。
これだけはPNGが必要です。
180px四方が事実上の標準。
透明は不可。角丸も不要。iOSが勝手に処理します。
作成するべきファビコン画像の仕様まとめ
favicon.svg
- 正方形
- 余白を意識する
- 単色または2色程度
細かい線は避ける。
16px相当で見えるか、一度自分で縮小確認すると安心です。
favicon.ico
- 16×16
- 32×32
複数サイズ入りICOを1ファイルで。
ツール任せで問題ありません。
apple-touch-icon.png
- 180×180
- 背景色あり
- 角丸なし
iOSが勝手に角丸にします。
自前で丸くすると二重に事故ります。
2026年版 正しいHTMLの記述方法
ここが一番大事です。
そして、一番やりすぎなくていい部分。
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
これだけです。
昔あった、sizes="16x16" sizes="32x32" の大量指定。
2026年の今、不要です。
ブラウザは自分で判断します。
全部指定したくなる気持ち、分かりますが任せた方が楽です。
WordPressでも基本は同じ
WordPressの場合、管理画面の「サイトアイコン」を使う選択肢もあります。
ただし、SVGは未対応。
結果、PNGだけになる。
本気でやるなら、
・SVGとICOとapple-touch-iconは手動で配置
・WordPressのサイトアイコンは使わない
この方が制御しやすいです。
ファビコンを軽視した時のデメリット
意外と多い。
・タブが識別しづらい
・ブックマークで埋もれる
・ホーム画面に追加した時の違和感
UXは積み重ねです。
この小さな違和感、ユーザーはちゃんと感じています。
あなた自身、ファビコンが無いサイトをブックマークしたことがありますか。
やりすぎファビコンの落とし穴
逆もあります。
・10種類以上のPNG
・意味のないsizes指定
・メンテ不能なHTML
これは未来の自分を殴る行為です。
2026年の現実解は、少なく、正確に。
関連して知っておくと役立つこと
- PWAを使うならmanifest.jsonで別管理
- SVGはダークモード対応を意識する
- ファビコンはロゴの簡略版と考える
特にSVGのprefers-color-scheme対応。
ここまでやると一段上です。
個人的な偏見として
ファビコンを丁寧に作っているサイトは、だいたい他もちゃんとしている。
逆もまた然り。
細部は、全体の姿勢を裏切らない。
小さなアイコンですが、2026年のWebでは確実に意味を持っています。
その3つのファイル、今すぐ見直してみませんか。
