PNGをICOに変換・ファビコン作成

PNGをICOに変換する手順

1. 画像を追加するPNG、JPG、WebP、SVGのファイルを選択するか、ボックスにドロップしてください。256 × 256px以上の正方形の画像だと、きれいに仕上がります。
2. アイコンのサイズを選ぶICOに入れるサイズにチェックを入れます。初期設定は16、32、48です。画像が正方形でない場合は、透明な余白を足すか、中央を切り抜くかを選べます。
3. ICOまたはキットをダウンロードする「ICOをダウンロード」を押すと、全サイズ入りのファイルが1つ保存されます。「ファビコンキットをダウンロード」を押すと、PNGアイコン、Webマニフェスト、貼り付け用のHTMLを含むZIPが保存されます。

ICOファイルとは

ICOは、Windowsやブラウザが、タブ、ブックマーク、ショートカットに表示する小さな絵に使うアイコン形式です。1つのICOに同じ絵を複数のサイズで入れておけるので、表示する場所に合わせて最適なサイズが選ばれます。ブラウザのタブには16px、タスクバーには32px、フォルダーの大きな表示には256pxといった具合です。

このICO変換では、各サイズをPNGのままICOの容器に収めます。透明部分や滑らかな輪郭がそのまま残り、現在のWindowsと主要なブラウザで問題なく読み込まれます。

Webサイト用のファビコンを作る

このページは、ファビコン作成に必要なファイルを一度にそろえます。favicon.ico、ブラウザ用の16pxと32pxのPNG、iPhoneやiPadのホーム画面用の180pxのapple-touch-icon、Android用の192pxと512pxのアイコン、それらを指すsite.webmanifestです。apple-touch-iconは白い背景に置いて作ります。iOSは透明な部分を黒で塗りつぶすためです。

ファイルをサイトのルートにアップロードし、プレビューの下に表示されるHTMLをページのheadにコピーしてください。アプリ名の欄に入力した名前は、マニフェストに書き込まれます。

検索エンジンも同じファイルを使います。Googleは、一辺が48pxの倍数であるファビコンを求めています。初期設定に48pxを含め、キットに192pxのアイコンを入れているのはそのためです。

参考資料： Google検索セントラル:ファビコンを定義する

JPGなど、ほかの形式の画像をICOにする

ほとんどの画像から変換を始められます。JPGをICOにするときは、JPGに透明がないため、アイコンが塗りつぶされた四角形になる点に注意してください。角を透明にしたいときは、最初から透明のあるPNGやSVGを使うか、先に「画像のトリミング」でロゴだけを切り出してください。

どの形式の画像でも手順は同じです。PNGとWebPは透明部分が保たれ、SVGは高い解像度で描画してから縮小するので、16pxでも線がくっきりします。

サイズの選び方と、正方形でない画像

小さなアイコンは、細かい部分がすぐ潰れます。細い文字のロゴは、16pxや32pxでは単純な形に直したほうがよいことが多いので、実際の見え方を示すプレビューで確かめてください。元の画像より大きいサイズは拡大されてぼやけることがあり、その場合はページに注意が表示されます。

アイコンは正方形です。横長や縦長の画像は、透明な余白を足せば全体が収まり、中央を切り抜けばアイコンいっぱいに表示されますが、両端は切れます。

• 16pxと32px: ブラウザのタブとブックマーク。
• 48px: Windowsのアイコンや検索結果のファビコンで、よく基準になるサイズ。
• 64pxから256px: デスクトップのショートカットと、Windowsの大きなアイコン表示。

よくある質問