1枚の画像からfaviconパックを作る

サイトに、従来のfavicon.icoと、スマホやブラウザが実際に表示するPNGアイコンがまだ必要なときに使います。元画像は1枚で足ります。正方形のPNGかSVGのロゴがいちばんきれいに出ます。画像は正方形のキャンバスへ、「収める」で合わせます。横長のロゴは引き伸ばされず、余白が入ります。

ダウンロードするPNGは、初期設定で透明なキャンバスです。ICOはマークの後ろに白、または選んだ色のべた塗りを置きます。古いタブの画面の多くは、まだ不透明なアイコンを想定しています。ここではレイヤー編集はしません。先に切り抜くか文字を足すなら、 Photasium で行い、その結果をここに置きます。

zipには、favicon.ico（16と32）、16、32、180、192、512のPNG、180のapple-touch-iconが入ります。コードは文書のheadに貼ります。任意の192と512は、Webアプリのマニフェストが通常求めるファイルです。そのファイル名はmanifest.jsonへ自分でコピーできます。

ダウンロードしたあと、PNGがまだ重ければ 圧縮します。faviconは小さく保ちます。共有用の画像には、このパックの代わりに OG画像 1200×630 を使います。

作業はこのブラウザの中で行われます。アカウントは不要です。アップロードもありません。タブを閉じると、ロゴはツールから消えます。