ファビコン・アプリアイコン生成ツール

このツールについて

各プラットフォームが使うファイル

デスクトップのブラウザは、タブやブックマークのアイコンを <link rel="icon"> から取得します。通常、標準解像度の画面では 16 ピクセル、高解像度の画面では 32 ピクセルの PNG が使われます。ページでアイコンが指定されていない場合、ブラウザは代わりに /favicon.ico を要求します。

iPhone と iPad は、サイトがホーム画面に追加されたときに 180 ピクセルの apple-touch-icon.png を使います。Android とインストールされた Web アプリは、Web マニフェストの icons リストを読み込みます。ホーム画面には 192 ピクセル、スプラッシュ画面には 512 ピクセル、ランチャーがアイコンの形を自ら整える場合はマスカブルアイコンが使われます。mstile-150x150.png は古いバージョンの Windows のタイル用で、念のため含めています。

favicon.ico が今も必要な理由

タブで開いた PDF、画像、JSON レスポンスなど、アイコンを指定する HTML の head がないものについては、ブラウザが自動的に /favicon.ico を要求します。フィードリーダーやクローラーなどのツールも、よくこの場所を参照します。ICO 形式は 1 つのファイルに複数のサイズを格納でき、このファイルには 16、32、48 ピクセルのアイコンがそれぞれ PNG データとして入っています。この形式は Windows では Vista 以降で読み込め、現行のすべてのブラウザも対応しています。

マスカブルアイコンとセーフゾーン

Android のランチャーは、アプリアイコンを円や角丸の正方形などの形に切り抜きます。通常のアイコンは、切り抜かれても崩れないよう、縮小されて白いプレートの上に置かれるのが一般的です。これに対してマスカブルアイコンは、正方形全体を不透明な背景で覆い、重要な要素をすべてセーフゾーン内に収めます。セーフゾーンとは、アイコンの幅の 80% を直径とする中央の円です。この円の外側は切り取られることがあります。

このツールは、マスカブルアイコンをアプリの背景色で塗りつぶし、アートワークの周囲の各辺に 14% 以上の余白を取ります。円形のプレビューを確認し、アートワークの角が切れている場合は余白を増やしてください。

Apple は透過を無視する

iOS はホーム画面のアイコンの透明なピクセルを保持せず、黒で塗りつぶします。角丸も iOS 側で付けます。そのため、ここで作る Apple タッチアイコンは常に不透明な正方形で、アプリの背景色で塗りつぶされ、8% 以上の余白が付き、設定した角丸は適用されません。

動作のしくみ

アイコンは、WebAssembly にコンパイルされた Go の画像パッケージが、ブラウザのバックグラウンドスレッドで Catmull-Rom リサンプリングを使って描画します。非常に大きな元画像は、変更のたびにすばやく再描画できるよう、先にページ内で縮小されます。画像はアップロードされません。