← 一覧へ戻る

画像からFaviconを作成する方法(ICO+PNG、全サイズ対応)

2026-07-27

手っ取り早く言うと: 画像からFaviconを作成するには、ToolKoalaのFavicon Generatorを開いて正方形の画像を落とし、ダウンロードします。favicon.ico(16・32・48pxを内包)に加えて、16、32、48、180、192、512pxの単体PNGと、そのまま貼り付けられるHTML <link>タグ一式が手に入ります。無料で、すべてブラウザ内で処理されるので画像はアップロードされません。16ピクセルのアイコンをダウンロードするだけなのにログインを求めてくるようなFaviconサイトにうんざりして、その週のうちにこれを作りました。

なぜFaviconは複数サイズ必要なのか

昔は16×16の.icoが1つあれば済みました。でも今は違います。場所によってアイコンの表示サイズはさまざまです。

  • 16 / 32 / 48px — 定番のブラウザタブやブックマークのアイコン。これらはfavicon.icoの中に格納されます。
  • 180px — Apple Touch Icon。誰かがあなたのサイトをiPhoneのホーム画面に追加したときに使われます。
  • 192 / 512px — AndroidとPWAのアイコン。ホーム画面へのインストールやアプリ切り替え画面で使われます。

16pxのアイコンしか用意していないと、タブの中ではくっきり見えても、誰かがスマホに保存した瞬間にぼやけてしまいます。このツールは1枚の元画像から必要なセット全部を生成するので、そこを気にする必要がなくなります。

Faviconを作成する手順

  1. ToolKoalaのFavicon Generatorを開き、画像を落とします。
  2. 16から512まで、全サイズのプレビューが即座に表示されるので、小さいサイズでアイコンがどう見えるか確認できます。
  3. 必要なものをダウンロードします。
    • favicon.ico — ブラウザタブ用の複数解像度アイコン(16+32+48)。
    • すべてのPNG — ワンクリックで全サイズを個別のPNGとして取得。
    • あるいは各プレビューをクリックして、そのサイズだけをダウンロードすることもできます。
  4. 表示されたHTMLスニペットをコピーして、ページの<head>に貼り付けます。

スニペットにはあらかじめ正しいrel・type・sizes属性が入っています。

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

ファイルをサイトのルート(またはhrefが指すパス)に置き、タグを貼り付ければ完了です。

16ピクセルでも読み取れるアイコンにするコツ

  • 正方形でシンプルに始めましょう。 16×16では、1つの大胆な形か1文字ぶんくらいのスペースしかありません——キャッチコピー付きのフルロゴは入りません。ロゴが凝っているなら、これ専用のシンプルな「アイコンマーク」版を作りましょう。
  • 大きめの元画像を用意しましょう。 大きなPWAアイコンをくっきり保つために、512px以上でアップロードしてください。このツールは縮小はできますが、ディテールを作り出すことはできません。
  • 高コントラストが有利です。 アイコンは自分ではコントロールできないブラウザのUIやスマホの壁紙の上に乗ります。強いコントラストがあれば、どこでも視認性を保てます。
  • 小さいプレビューを確認しましょう。 このツールは16pxと32pxのバージョンをピクセル単位で正確に表示します。その大きさで潰れて見えるなら、公開前にデザインをシンプルにしましょう。

正直な限界

このツールは画像を正方形のキャンバスに描画するので、正方形でない元画像は引き伸ばされます——きれいに仕上げたいなら先に(切り抜きなどで)正方形にクロップしてください。角丸やパディングを自動で加えることもしません。アップロードしたものがそのまま拡大縮小されます。そして生成されるのは現代の標準的なセットです。すべての古いMicrosoftタイルやSafariのピン留めタブSVGまで網羅したいなら、もっと重量級のジェネレーターがそのエッジケースをカバーします。ただ99%のサイトにとっては、ここで手に入るICO+PNGのセットが、まさにブラウザが実際に求めているものです。

よくある質問

画像からFaviconを作るには? ToolKoalaのFavicon Generatorのようなブラウザベースのツールを開き、正方形の画像を落として、favicon.icoと全サイズのPNGをダウンロードします。そのあと提供されたHTMLタグをページの<head>に貼り付けます。

どんなサイズ・形式が手に入る? 16・32・48pxを含むfavicon.icoに加えて、16、32、48、180(Apple Touch)、192、512px(Android/PWA)の単体PNGです。

.icoファイルは今でも必要? それともPNGだけでいい? 両方必要です。favicon.icoはブラウザタブに対して最も互換性が高く、大きめのPNGはApple TouchやAndroid/PWAのホーム画面アイコンをカバーします。このツールは両方を用意するので、どこでも対応できます。

画像はアップロードされる? いいえ。Faviconはブラウザ内でcanvasを使って生成され、画像が端末の外に出ることはありません。

元画像が正方形じゃないけど大丈夫? 正方形でない画像は正方形に引き伸ばされます。きれいなアイコンにするには、先に1:1の比率にクロップしてください。

— Milo 🐨