ファビコンという名前は「favorite icon」、つまりブックマークと一緒に保存されるアイコンに由来します。今ではその役割をはるかに超えて、ブラウザのタブ、アドレスバー、デスクトップのショートカット、iOSとAndroidのホーム画面、Googleの検索結果、そしてPWA（プログレッシブウェブアプリ）のアイコンにまで使われています。そして、その場面ごとに必要なサイズが違います。
よくある失敗は、16×16ピクセルの favicon.ico を1つ作っただけで終わりにしてしまうことです。Retinaディスプレイやスマホで見ると、そのアイコンはぼやけて表示されます。解決策は必要なサイズを一式そろえること。手間がかかりそうに見えますが、道具さえあれば数秒で済みます。
.icoファイルとは何か、いつ使うのか
.ico は、1990年代にマイクロソフトが作ったファビコン本来の形式です。特徴的なのは、1つのファイルに複数のサイズを収められること。たとえば16×16と32×32を同居させられます。ブラウザは場面に応じて適したサイズを選び取ります。
O favicon.ico が2026年になっても必要な理由ははっきりしています。古いブラウザや一部の検索クローラーが、サイトのルートにある /favicon.ico を自動的に取りに来るからです。存在しないと、サーバーのログに不要な404が並びます。ほかをすべて最新のPNGでまかなうとしても、ルートには favicon.ico を置いておきましょう。
ファビコンのサイズ一覧
2026年時点で、一式そろえるならカバーしておきたいサイズは次のとおりです。
| サイズ | 形式 | 使われる場所 |
|---|---|---|
| 16 × 16 px | .ico / PNG | ブラウザのタブ（標準） |
| 32 × 32 px | .ico / PNG | Windowsのデスクトップショートカット、高精細ディスプレイのタブ |
| 48 × 48 px | .ico / PNG | エクスプローラーのショートカット |
| 57 × 57 px | PNG | iPhone（iOS 1〜6、非Retina） |
| 60 × 60 px | PNG | iPhone（iOS 7以降、非Retina） |
| 72 × 72 px | PNG | iPad（iOS 1〜6、非Retina） |
| 76 × 76 px | PNG | iPad（iOS 7以降、非Retina） |
| 96 × 96 px | PNG | Chromeのショートカット（Android） |
| 114 × 114 px | PNG | iPhone Retina（iOS 1〜6） |
| 120 × 120 px | PNG | iPhone Retina（iOS 7以降） |
| 144 × 144 px | PNG | iPad Retina（iOS 1〜6）、Windows 8のタイル |
| 152 × 152 px | PNG | iPad Retina（iOS 7以降） |
| 167 × 167 px | PNG | iPad Pro（iOS 9以降） |
| 180 × 180 px | PNG | iPhone 6 Plus以降 |
| 192 × 192 px | PNG | Android Chrome、PWA（manifest.json） |
| 512 × 512 px | PNG | Android Chromeのスプラッシュ画面、高解像度のPWA |
💡 うれしい話： これらを1つずつ手作業で作る必要はありません。ImageToolsの ファビコン作成 ツールなら、画像を1枚渡すだけで全ファイルを自動生成します。複数サイズを内包した.icoも、PNG一式をまとめたZIPも含まれます。
元にする画像の選び方
元画像は少なくとも 512×512ピクセル 必要です。これが最大サイズにあたるため、大きい画像から縮小していけば小さいサイズも高品質に仕上がります。逆に小さい画像を元にすると、大きいサイズがぼやけます。
受け付けられる入力形式
- 背景が透過されたPNG が理想です。タブやホーム画面の背景が何色でも、アイコンがきれいに収まります。
- 背景が塗りつぶされたPNG も、その色がサイトのデザインと合っていれば問題ありません。
- JPG も使えますが、透過には対応していません。
- SVG があるなら、それが最良の出発点です。ベクター形式なので、どのサイズでも劣化しません。
ファビコンのデザインで気をつけること
ファビコンに与えられた面積は驚くほど小さく、16×16版はわずか256ピクセルしかありません。この制約は、見落とされがちですがデザインを大きく左右します。
- ブランドでいちばん単純な要素を使う。 ロゴ全体は16pxではまず成立しません。頭文字だけ、シンボルだけ、あるいは簡略化したアイコン版を使いましょう。
- 細い文字は避ける。 32pxを下回ると、どんな文字も読めなくなります。
- コントラストを強くする。 ファビコンは開かれた何十ものタブと並びます。コントラストが弱いアイコンは、その中に埋もれて見えなくなります。
- 透過より塗りつぶしの背景が有利な場面もある 。明るいタブでも暗いタブでも、アイコンがはっきり浮かび上がります。
- 16pxで必ず確認する 。512pxで完璧に見えるデザインが、16pxでは何が描いてあるか分からなくなることは珍しくありません。
必要なサイズを一度にそろえる
画像をアップロードすれば、.icoとブラウザ・iPhone・Android・PWA用のPNG一式をZIPでダウンロードできます。無料・登録不要です。
ファビコンを無料で作成サイトへの設置方法
ファイルを生成したら、HTMLの <head> 内で読み込みます。2026年時点で推奨されるコードは次のとおりです。
<!-- ブラウザ向けの基本ファビコン -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon（iPhone・iPad） -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- AndroidとPWA -->
<link rel="manifest" href="/site.webmanifest"> favicon.ico はサイトのルート（ index.htmlと同じ階層）に置いてください。ほかのPNGはルートでもサブフォルダでもかまいませんが、HTML内のパスが正しいことが前提です。
site.webmanifestファイル
PWAに対応させ、Android Chromeにアイコンを正しく認識させるには、サイトのルートに site.webmanifest を置きます。中身の基本形は次のとおりです。
{
"name": "サイト名",
"short_name": "サイト",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}📦 ファビコン作成ツールのZIP には、 site.webmanifest が正しいパスで設定済みの状態で入っています。解凍して、サイトのルートにアップロードするだけです。
主要プラットフォームでの設定方法
WordPress
WordPressではファビコンを「サイトアイコン」と呼びます。設定は 外観 → カスタマイズ → サイト基本情報 を開き、「サイトアイコンを選択」をクリックします。アップロードした画像から必要なサイズはWordPressが自動生成してくれるので、512×512ピクセル以上の正方形画像を用意すれば十分です。
Shopify
Em オンラインストア → 環境設定を開き、「ストアのファビコン」まで進んで、512×512ピクセル以上の正方形画像（PNGまたはJPG）をアップロードします。
Wix
Em 設定 → ブランド設定 → ファビコンを開き、PNGかJPGの正方形画像を設定します。
Squarespace
Em デザイン → ブラウザアイコンの「Favicon」欄で設定します。推奨は100×100ピクセルの正方形PNGで、残りはSquarespace側が処理します。
素のHTML/CSSやフレームワーク
生成したファイルをプロジェクトのルートに置き、上で示した <link> タグを各ページの <head> に追加します。Next.jsやNuxtのようなフレームワークを使っているなら、共通レイアウトに書けば済みます。
正しく反映されているか確かめる
設置したらサイトをブラウザで開き、タブにアイコンが出ているか確認します。すぐに表示されない場合は次を試してください。
- ブラウザのキャッシュを消す（WindowsはCtrl+Shift+R、MacはCmd+Shift+R）。
- シークレットウィンドウで開く。キャッシュが使われません。
- 数分待つ。ブラウザはファビコンを一定期間キャッシュに保持します。
- HTML内のパスが正しいか、ファイルが実際にサーバー上にあるかを確認する。