画像から favicon を作る方法(無料)

公開日 2026年7月11日 · 更新日 2026年7月27日

ブラウザのタブ、ブックマーク、履歴に表示される小さなアイコンが favicon です。良い favicon はサイトを完成された印象にし、たくさん開いたタブの中でも見つけやすくします。

これは自分たちで計測しました。 favicon は本当に小さいものです。透明ロゴは 28.8 KB の PNG から 951 バイトの ICO になり、しかもその 1 ファイルに 16・32・48 px の 3 サイズが同時に入っています。出力がこれほど小さいので、元の解像度はほとんど影響しません。大事なのは 16 px でも形が判別できるかどうかです。計測データ全体を見る

favicon とは何か

慣例として /favicon.ico に置かれ、.ico は1 つのファイルに複数サイズを格納できるコンテナです——一般的には 16×16・32×32・48×48。ブラウザが場面(タブ・ブックマーク・タスクバー)に応じて最適なサイズを選びます。だからこそ本物の .ico は 1 枚の PNG より優れています。1 ファイルでどのサイズでも鮮明です。

正方形の画像から始める

正方形の元画像(できれば 256×256 以上)を使います。正方形でないと切り取られたり余白が付いたりします。
シンプルに——16px では細部が消えます。1 文字・マーク・太い形が最も読みやすいです。
透過 PNG がよく合います。

.ico を作る——アップロードなし

ロゴはあなたのブランドです。不明なサーバーに送る必要はありません。以下はすべてブラウザ内で動作します:

PNG を ICO に変換 / Favicon ジェネレーター:PNG をドロップして複数サイズ入りの favicon.ico を取得。

サイトに追加する

favicon.ico をサイトのルートに置き、ページの head 内で参照します:

<link rel="icon" href="/favicon.ico" sizes="any">

最新のブラウザは PNG アイコンも受け付け、両方を配置するサイトも多いです。アイコンが更新されない場合はスーパーリロードを——ブラウザは favicon を強くキャッシュします。

固定サイズのアイコンではなく拡大できるロゴが欲しい場合は、PNG を SVG に変換する方法をご覧ください。

実際に必要なサイズ

1 つの .ico で従来のデスクトップ用途はカバーできますが、最近の端末はさらに数枚の PNG を求めます。実用的な一覧です:

サイズ	ファイル	使われる場所
16×16・32×32・48×48	`favicon.ico`	ブラウザのタブ・ブックマーク・Windows のショートカット
180×180	`apple-touch-icon.png`	iOS の「ホーム画面に追加」
192×192	`icon-192.png`	Android のホーム画面
512×512	`icon-512.png`	PWA のインストール案内とスプラッシュ画面

一般的なサイトはすべてのサイズを用意する必要はありません——favicon.ico と 180×180 の Apple touch icon があれば、ほとんどの訪問者をカバーできます。

サイズは favicon が唯一間違えてはいけないものなので、私たちのPNG → ICO 変換がテストコーパスの透過付きロゴから実際に作った結果を置きます:

テスト画像	入力	出力	変化
透過付きロゴ	28.8 KB	951 B	-97%

入力は 28.8 KB、ICO は 951 B(-97%)になりました。ICO は複数のビットマップを収める容器で、私たちのものは 16・32・48 px を詰めます。ただしどれも小さいので、ファイル全体は全解像度の元 PNG のごく一部にとどまります。favicon とはそういうものです。ロゴの縮小コピーではなく、その小さな描画を数枚、1 リクエストで届けるものです。

タグ一式

ページの <head> で、ブラウザとスマホを正しいファイルに向けます:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

PWA なら、大きいアイコンを manifest に記載します:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

ICO と PNG

メインの favicon は .ico:1 ファイルで複数サイズ、古いブラウザでも動きます。
Apple touch icon と PWA アイコンは PNG——これらの仕様は単一サイズの PNG を前提とし、.ico ではありません。

両方を用意するのが標準で、やり過ぎではありません。

代替案は議論するより測る価値があります —— 正しいものを測る限りは。同じ元ロゴを JPG にすると 16.3 KB(-43%)、WebP にすると 7.5 KB(-74%)ですが、どちらも全解像度の画像で、上の ICO の 951 B の何倍にもなります。その ICO の最大のビットマップは 48 px しかありません。favicon の寸法まで来るとファイルサイズは重要でなくなり、別の 2 つの違いが前に出ます。JPG には透過がまったくないので、JPG の favicon はダークテーマのブラウザで白い箱になります。そして Safari が WebP に対応したのは 14 からなので、WebP のみの構成はそれより古い環境で既定アイコンに戻ります。旧来の枠には ICO、現代の枠には PNG、JPG は使わない。

よくある間違い

「効かない」の正体はキャッシュ。 ブラウザは favicon を強力にキャッシュします。スーパーリロード、シークレットウィンドウ、または URL にバージョンを付ける(/favicon.ico?v=2)を試してから、失敗と判断しましょう。
Apple touch icon を忘れる。 ないと、iOS はページのぼやけたスクリーンショットをホーム画面用に使います。
細かすぎる元画像。 細い線や文字は 16px で消えます。正方形で太い形から始め、必要なら先に正方形に切り抜きましょう。

よくある質問

まだ favicon.ico は必要?

必要です。すべてのブラウザが確認する信頼できるフォールバックであり、16/32/48 をまとめて持てる唯一のファイルです。

新しい favicon が表示されないのはなぜ?

ほぼキャッシュで、マークアップの誤りではありません。強制再読み込みかバージョン付きのクエリを加えて、もう一度確認を。

元画像はどのサイズにすべき?

256×256 以上、かつ正方形から始めます。ジェネレーターの縮小はきれいですが、小さなアイコンの拡大は決して鮮明になりません。

#favicon#ico#web