ファビコンのサイズ — 必要なファイルと何pxで作るか

なぜファビコンはこんなに種類が多いのか

ファビコンは、ブラウザのタブ・ブックマーク一覧・検索結果・スマホのホーム画面に表示されるサイトの小さなアイコンです。サイトの顔のようなもので、ないとどこか未完成に見えます。

厄介なのは、表示される場所ごとに求められるサイズと形式が違うことです。だからファビコンはファイル一つではなく、複数サイズを揃えた一式として用意します。

必要なファイル一式

• •favicon.ico — 16・32・48px を 1 ファイルに収めたもの。アドレスバー・タブ・ブックマーク用で、最も古い標準ながら今も必須
• •PNG 16px・32px — 最新ブラウザがタブに使う高精細版
• •apple-touch-icon 180px — iPhone・iPad でホーム画面に追加するときに使われます
• •PNG 192px・512px — Android のホーム画面と PWA インストール用。site.webmanifest に登録します

元画像はどう準備するか

大きな正方形の画像（512px 以上）から縮小していくのが定石です。小さい画像を拡大するとぼやけます。

16px でも見分けられる必要があるので、形はシンプルなほど良いです。文字の多いロゴよりシンボル一つが勝ち、縁に少し余白を置くと小さくしても窮屈に見えません。背景を透過にしておけば、ライト・ダークどちらのテーマでも自然です。

HTML にはこう入れる

作ったファイルをサイトの最上位フォルダに置き、HTML の head 内で link タグで指定します。rel="icon" で ICO と PNG を、rel="apple-touch-icon" で 180px アイコンを、rel="manifest" で site.webmanifest をつなぎます。

なお favicon.ico をサイトルートに置けば、タグがなくてもほとんどのブラウザが自動で見つけます。ただしサイズ別 PNG やホーム画面アイコンまできちんと使うなら、タグを入れるほうが確実です。

手作業でそろえない

サイズごとに画像を縮小して ICO にまとめる作業は手間がかかります。Image Converter NOW のファビコン作成ツールに画像を 1 枚入れると、favicon.ico・各サイズの PNG・site.webmanifest・貼り付け用 HTML タグまで ZIP 一つで出来上がります。

処理はすべてブラウザ内で行われ、ロゴファイルがサーバーに送信されることはありません。