使い方
作り方を2つから選んでください。
- 画像から作る：ロゴ画像をドラッグするか、クリックして選ぶか、コピーした画像をCtrl+V（Macは⌘+V）で貼り付けてください。PNG、JPG、WebP、SVGを10MBまで入れられます。正方形でない画像は「中央に収める（余白）」で全体を入れるか、「中央を切り抜く」で中央部分だけを使えます。余白と透明部分は透明のままにするか、好きな色で塗ることができます。
- 文字・絵文字から作る：1〜2文字を入力し、背景色、文字色、形（四角・角丸・円）を選んでください。フォントは端末に入っているシステムフォントを使うため、絵文字は端末によって見た目が少し異なることがあります。
結果には16・32・48・180pxのアイコンが実寸で表示され、16・32・48pxのアイコンは拡大した表示も並びます。ライトテーマとダークテーマのブラウザのタブでどう見えるかも確認できます。ファイルは1つずつダウンロードするか、「まとめてダウンロード（ZIP）」で一度に受け取れます。
元画像は512px以上をおすすめします。それより小さいと、元画像より大きいアイコンは引き伸ばされてぼやけることがあるため、警告を表示します。
警告でどの辺を見るかは「正方形にする方法」の設定で変わり、「中央に収める（余白）」では長辺、「中央を切り抜く」では短辺が基準です。たとえば800×400pxの画像は、「中央に収める（余白）」なら警告が出ませんが、「中央を切り抜く」に変えると400pxが基準になり、警告が出ます。このとき引き伸ばされるのは512pxのアイコンだけで、残りの5サイズは400pxから縮小して作ります。SVGはサイズごとに描き直すため、警告は出ません。ただし、外部のフォントや画像を読み込むSVGは、ICO・PNGのファイルでその部分が抜けることがあるので、「プレビュー」で確認してください。大きな画像は半分ずつ段階的に縮小し、小さいサイズでも粗くならないようにしています。
SVGはimg要素で描画して変換するため、SVG内のスクリプトは実行されません。
画像モードと文字モードの形状設定: 「形」（四角・角丸・円）は「文字・絵文字から作る」にしかありません。「画像から作る」は画像を正方形に合わせるだけで、角を落とすことはしません。丸いアイコンが必要なときは、丸い形の外側にあたる四隅を透明にした画像をアップロードし、「余白・透明部分の背景」を「透明」のままにしてください。画像の透明な部分は、favicon.ico、icon-192.png、icon-512.pngにそのまま残ります。
作成されるファイルとサイズ
| ファイル | サイズ | 使われる場所 |
|---|---|---|
favicon.ico |
16・32・48px | ブラウザのタブ |
favicon.svg |
元のまま | ブラウザのタブ（SVGをアップロードしたときのみ） |
apple-touch-icon.png |
180×180px | iPhone・iPadのホーム画面 |
icon-192.png、icon-512.png |
192・512px | Webアプリマニフェスト（Androidのホーム画面など） |
site.webmanifest |
— | Webアプリマニフェストのファイル |
MicrosoftのICO形式の文書では、よく使われるアイコンサイズとして16・32・48pxを挙げているため、favicon.icoにはこの3サイズを入れます。この3サイズのアイコンはPNGとして別には出力されず、favicon.icoの中にだけ入っています。Appleの文書はiPhoneのRetinaディスプレイ用のapple-touch-iconのサイズとして180×180pxを例に挙げ、<link>がない場合はサイトのルートでapple-touch-icon.pngのような名前のファイルを探すと説明しています。web.devによると、Chromium系のブラウザではWebアプリマニフェストに少なくとも192×192pxと512×512pxのアイコンが必要で、マニフェストファイルの拡張子には仕様が勧める.webmanifestを使います。
apple-touch-iconはホーム画面に置かれるアイコンなので、透明部分を残さず背景を塗って作ります。画像から作るときに「余白・透明部分の背景」で「透明」を選んだ場合は、白で塗ります。文字・絵文字から作るときは、選んだ形に関係なく四角全体を背景色で塗ります。
ICOファイルにPNGを入れる仕組み
ICOファイルは、複数のサイズの画像を1つのファイルにまとめる形式です。先頭の6バイトのヘッダー（ICONDIR）に予約値0、種類1（アイコン）、画像の数を書き、その後に画像ごとの16バイトの項目（ICONDIRENTRY）で幅・高さ、データの長さ、データの開始位置を書きます。そのため、ICOファイルは必ず00 00 01 00のバイトで始まります。
もともとICOにはビットマップデータを入れていましたが、Windows Vista以降は画像の場所にPNGファイルをそのまま入れる方式も使えます。この場合のデータはPNGシグネチャで始まる32ビットARGBのPNG画像で、透明度はPNGのアルファチャンネルから取られます。このツールは16・32・48pxのPNGをこの方式で入れてfavicon.icoを作ります。別のライブラリを使わず、ブラウザ内でファイル構造を直接書き出します。
「まとめてダウンロード」のZIPファイルもブラウザ内で作ります。PNGとICOはすでに圧縮されたファイルなので再圧縮はせず、PKWAREのZIP仕様にある無圧縮（store）方式とCRC-32のチェック値でまとめます。
HTMLへの入れ方
- ダウンロードしたファイルを、サイトの一番上のフォルダ（ルート）にアップロードしてください。
- 結果の「HTMLの
<head>に入れるコード」をコピーし、すべてのページの<head>内に貼り付けてください。
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">SVGをアップロードした場合は、<link rel="icon" href="/favicon.svg" type="image/svg+xml">がfavicon.icoの次の行に加わります。MDNによると、rel="icon"のリンクが複数あるとき、ブラウザはtype・sizes・mediaを見て最も適したものを選び、同じくらい適していれば最後のものを使います。SVGに対応していないブラウザはfavicon.icoを使います。favicon.svgはアップロードしたファイルそのままです。「中央を切り抜く」や「色で塗る」で選んだ設定はICOとPNGのファイルにだけ反映され、favicon.svgには反映されません。すべてのアイコンを同じ見た目にそろえたいときは、HTMLコードからfavicon.svgの行を消し、そのファイルも置かないでください。
このコードでrel="icon"として指定されるファイルは、favicon.icoと、SVGをアップロードしたときのfavicon.svgだけです。そのため、文字・絵文字や、PNG・JPG・WebPの画像から作った場合にHTMLコードからfavicon.icoの行を消すと、rel="icon"の行が1つも残りません。apple-touch-icon.pngはrel="apple-touch-icon"からだけ、icon-192.pngとicon-512.pngはsite.webmanifestからだけ参照されます。
HTML標準には、ページにrel="icon"のリンクがなければ、ブラウザは代わりに/favicon.icoを要求することがあると書かれています。リンクを入れる場合でも、favicon.icoはルートに置いておくのが安全です。すでにWebアプリマニフェストがある場合は、新しいファイルの代わりに結果のiconsの部分だけを既存のマニフェストに移してください。