ファビコン作成

1枚の画像から、小さなウェブサイト用アイコン一式を用意します。6サイズのPNG、3つの画像を含むICO、そのまま編集できるHTMLのlinkタグ、基本的なWebアプリマニフェストを作成します。ファイルはお使いの端末にダウンロードされるだけで、ウェブサイトのどこにいつ置くかはご自身で決められます。画像がブラウザーの外へ送信されることはありません。

使い方

1. できれば正方形で幅512ピクセル以上の、PNG・JPEG・WebP画像をアップロードします。
2. 「全体を収める（余白あり）」か「中央で切り抜く」を選び、背景も選びます。
3. サイト名を入力して、一式を生成します。
4. すべてのファイルをダウンロードして小さなアイコンを確認し、設置する前に付属のパスをお使いのサイトに合わせて修正します。

計算式

PNGのサイズ：16、32、48、180、192、512；ICOには16、32、48ピクセルのPNG画像を格納

ICOは、6バイトのヘッダー、16バイトのディレクトリエントリー3つ、PNG画像データで構成されます。180ピクセルのPNGはapple-touch-icon.pngという名前になります。マニフェストは192・512ピクセルの画像をpurpose:anyで参照し、maskable用のアートワークは作成しません。

計算例

512×512のロゴからは9個のファイルができます。正方形のPNG 6個、3サイズ入りのfavicon.ico、favicon-links.txt、site.webmanifestです。「全体を収める」は画像全体を保ち、「中央で切り抜く」は正方形ではない元画像の外側を切り落として正方形を埋めます。