ファビコン作成 — PNGアイコンと複数サイズICO

画像から16〜512pxのPNGと、16・32・48・64・256pxを含むICOを作成。プレビューして必要なファイルを保存できます。

画像の端を切り取らずに標準アイコンサイズを作成します。

またはこのページのどこにでも画像を1つドロップ

favicon.ico には 16、32、48、64、256 px のフレームが含まれます。PNG は表示サイズで保存され、180 px は apple-touch-icon.png として保存されます。

画像を選択してください。

ICO と PNG のファビコンを作成

知っておきたいこと

1 枚の元画像から 2 種類の出力が得られます。favicon.ico ボタンは 16、32、48、64、256px の 5 フレームを持つ ICO ファイルを 1 つ作り、8 つの PNG ボタンは 16、32、48、64、180、192、256、512px のファイルをそれぞれ作ります。180px の PNG は apple-touch-icon.png として、その他は favicon-16.png、favicon-32.png などの名前で保存されます。

元画像はまず 512 x 512 の正方形に切り取らずに収められます。横長のロゴは幅が収まるまで縮小され、上下の空き帯は透明のまま残るため、端が切れることはありません。便利ですが、余白が少しある正方形の元画像のほうが、バナー形状の画像よりタブのアイコンが大きく見えます。

入力は PNG、JPG、WebP、GIF、SVG、AVIF、BMP を一度に 1 枚ずつ使え、2 枚目をドロップすると 1 枚目が置き換わります。アニメーション GIF は静止フレーム 1 枚だけが使われ、SVG は 512px サイズにラスタライズされるので、ベクターのロゴもくっきり出力されます。

一般的なサイト構成では、既定で要求するブラウザー向けにルートの favicon.ico、iOS のホーム画面向けに 180px の apple-touch-icon.png、Web アプリマニフェスト用に 192・512px の PNG を使います。すべてのサイズのプレビュータイルが画面に並ぶので、ダウンロード前に 16px でマークがどう見えるか確認できます。

入力と出力の例

16 × 16でも判別できる単純なマークを使います。画像を引き伸ばさず正方形に収めるため、正方形でない原稿には透明な余白が付きます。PNGは個別画像、ICOは複数サイズを含むファイルです。

入力

PNG / JPG / WebP / GIF / SVG / AVIF / BMP

出力

ICO: 16, 32, 48, 64, 256 px
PNG: 16, 32, 48, 64, 180, 192, 256, 512 px

ファイルをサイトに配置しHTMLから参照して適用します。生成だけではサイトにインストールされません。公開前に小さなプレビューを確認し、細かい文字に注意してください。

ファビコン作成 — PNGアイコンと複数サイズICOの使い方

512px 以上の正方形の PNG や SVG など、画像を 1 枚選ぶかドロップします。
16～512px のプレビュータイルを見て、16px のものも判読できるか確認します。
複数サイズの ICO は「favicon.ico をダウンロード」を押します。
180px と 192px の PNG もダウンロードし、ページの head とマニフェストに追加します。

よくある質問

Web サイトに実際に必要なファイルはどれですか。

サイトルートの favicon.ico、iOS 用の 180px の apple-touch-icon.png、Web アプリマニフェストを公開するなら 192・512px の PNG です。他のサイズは任意です。

横長のロゴがタブで小さく見えるのはなぜですか。

画像全体を正方形の中に収めるため、横長のロゴは細い帯しか使えません。マークの正方形版を作ると最もきれいに仕上がります。

アニメーション GIF はどうなりますか。

静止フレーム 1 枚だけが使われます。ここで作るファビコンは静止画です。

ダウンロードされるファイル名は何ですか。

ICO は favicon.ico、180px の PNG は apple-touch-icon.png、残りは favicon-16.png、favicon-32.png などです。