ファビコン・アプリアイコンを一括生成する
正方形の画像を 1 枚用意するだけで、Web サイトとアプリに必要なアイコンサイズをまとめて書き出します。ブラウザのタブに出る 16px から、PWA やストア用の 512px まで。マルチサイズの favicon.ico、site.webmanifest、HTML に貼り付ける link タグの例も同じ ZIP に入っています。
どのサイズが必要か
16px と 32px はブラウザのタブとブックマーク、48px は Windows のサイトアイコン、180px は iOS のホーム画面(apple-touch-icon)、192px と 512px は Android のホーム画面と PWA のインストール時に使われます。迷ったら既定のまま生成すれば、現在の主要な環境をひととおりカバーできます。
元画像の準備
正方形で、余白が少なく、シルエットがはっきりした画像が向いています。16px まで縮小されることを前提に、細い線や小さな文字は避けてください。長方形の画像を読み込んだ場合は、中央を正方形に切り出してから縮小します。透過 PNG をそのまま使えます。
生成される favicon.ico について
16・32・48 px の 3 サイズを 1 つのファイルにまとめたマルチ解像度の .ico を生成します。中身は PNG なので、Windows Vista 以降と現行のすべてのブラウザで表示できます。サイト直下に置いて `<link rel="icon" href="/favicon.ico">` で参照してください。
よくある質問
どのファイルが ZIP に入りますか?
選択したサイズの PNG(icon-16x16.png のような名前)、マルチ解像度の favicon.ico、site.webmanifest、そして HTML に貼り付ける link タグを書いた snippet.html が入ります。
元画像は正方形でなければいけませんか?
正方形が理想ですが、長方形でも生成できます。その場合は中央を正方形に切り出して使用します。意図しない切れ方を避けたい場合は、先にトリミングツールで 1:1 に整えてください。
背景を透明のままにできますか?
できます。既定では透過を維持します。背景色を指定した場合のみ、透明部分がその色で塗りつぶされます。iOS のホーム画面アイコンは透過が黒で表示されるため、180px 用に背景色を指定するのが一般的です。
SVG から生成できますか?
できます。SVG を読み込むと各サイズで描画するため、小さいサイズでも輪郭がきれいに出ます。
写真はアップロードされますか?
されません。このページを開いた時点で必要なプログラムはすべてブラウザに読み込まれており、選んだ写真はあなたのパソコンやスマートフォンの中だけで処理されます。ネットワークに画像が流れることはないため、通信を監視されていても写真の中身が漏れることはありません。