ファビコンの作り方｜サイズ・形式・設置方法を解説

ファビコン（favicon）はブラウザのタブ・ブックマーク・検索結果に表示される小さなアイコンです。サイトのブランドイメージを伝える重要な要素ですが、サイズや形式のルールを知らないと正しく表示されないことがあります。

ファビコンとは

favicon は「Favorites Icon」の略で、Internet Explorerがお気に入り登録時に使ったことが始まりです。現在はブラウザタブ・アドレスバー・スマートフォンのホーム画面アイコンなど、さまざまな場所で使われています。

推奨するファビコンのサイズと形式

最低限必要なファイル

ファイル	サイズ	用途
`favicon.ico`	16×16・32×32（マルチサイズ）	ブラウザタブ・ブックマーク（IE含む）
`favicon.png`	32×32	モダンブラウザのタブ

完全対応する場合

ファイル	サイズ	用途
`favicon.ico`	16×16 + 32×32 + 48×48	全ブラウザ対応
`favicon-32x32.png`	32×32	Safariピン留めタブ
`apple-touch-icon.png`	180×180	iOSホーム画面アイコン
`android-chrome-192x192.png`	192×192	Androidホーム画面アイコン
`android-chrome-512x512.png`	512×512	Android起動スプラッシュ
`favicon.svg`	ベクター	高解像度ディスプレイ対応（Chromeなど）

HTMLへの記述方法

<head> 内に記述します。

<!-- 基本（これだけで多くの環境に対応） -->
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<!-- Apple（iOS ホーム画面） -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- SVG（モダンブラウザ・ダークモード対応） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

### SVGファビコンのダークモード対応

SVG形式では CSS メディアクエリを使ってダークモードに対応できます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: #ffffff; }
    }
    .icon { fill: #017387; }
  </style>
  <rect class="icon" width="32" height="32" rx="4"/>
</svg>

## ファビコンの作り方

既存の画像から作る

ロゴ・アイコン画像（PNG推奨）を用意する
正方形にトリミングする（横長・縦長のロゴはマージンを付けて正方形に）
16×16 / 32×32 / 48×48 にリサイズする
ICO形式に変換する

ファビコン生成ツールでは、PNGまたはJPEGをアップロードするとマルチサイズの favicon.ico をブラウザ内で生成・ダウンロードできます。

デザインのポイント

シンプルに: 16×16pxでも識別できるデザインにする。細いフォントや複雑な図形は潰れる
正方形: タブでは必ず正方形で表示される
ブランドカラーを使う: サイトのメインカラーを使うと認識しやすい
背景は透過か白: 透過PNGがもっとも汎用性が高い

よくある問題と解決方法

ファビコンが更新されない

ブラウザがキャッシュを保持しているためです。

ハードリフレッシュ（Ctrl+Shift+R / Cmd+Shift+R）
ブラウザのキャッシュをクリア
URLにクエリ文字列を付ける: href="/favicon.ico?v=2"

特定のブラウザで表示されない

favicon.ico はルートディレクトリ（/favicon.ico）に置く
<link rel="shortcut icon"> は古い書き方。rel="icon" を使う
Safari はSVGを優先するためSVGが壊れていると表示されない

スマートフォンのホーム画面に追加したとき画像が出ない

apple-touch-icon.png（180×180px）が必要です。<link rel="apple-touch-icon"> の記述も確認してください。