faviconとは
faviconはブラウザのタブ、ブックマーク、履歴などでWebサイトを識別するための小さなsite iconです。小サイズでも形や色が判別できる画像が適しています。
favicon.ico
ICOは複数サイズを1ファイルへ格納できる形式です。このツールではPNG binaryの16・32・48pxを収録したmulti-size ICOを生成します。
PNG favicon
16×16、32×32、48×48を個別のPNGとして生成します。HTML例では16pxと32pxを参照し、必要に応じて48pxも利用できます。
Apple Touch Icon
iPhoneやiPadのホーム画面などで使われる180×180pxのPNGを生成します。画像自体へ角丸は付けず、表示側の処理へ任せます。
PWAアイコン
Web App Manifestで一般的に使われる192×192pxと512×512pxを生成します。maskable専用のsafe zoneは設計しないため、maskable対応とは扱いません。
全体を収める・中央をトリミング
「全体を収める」は縦横比を保って画像全体を512pxの正方形へ配置し、余った部分を背景にします。「中央をトリミングして埋める」は縦横比を保って全面を埋め、はみ出す部分を中央基準で切り取ります。
透明背景
PNGの透明度は保持できますが、透明なfaviconはOS・ブラウザ・テーマによって見え方が異なります。明るい背景と暗い背景の小サイズpreviewで確認してください。
PWAについて
iconsの指定だけではPWAになりません。Manifest全体、Service Worker、HTTPS、各ブラウザの要件を別途確認してください。
プライバシー
画像、ファイル名、配置、背景色、生成Blobは外部へ送信せず、Cookie・localStorage・sessionStorage・IndexedDB・URL query/hashへ保存しません。共有するのはこのページのcanonical URLだけです。
よくある質問
faviconは何pxがおすすめですか？
用途が異なるため、16・32・48pxのfaviconと、180・192・512pxのWebアイコンを使い分けるのがおすすめです。
favicon.icoとPNGは両方必要ですか？
必須ではありませんが、互換性を補いやすいためICOとPNGを併用できます。
画像が正方形でなくても使えますか？
使えます。画像全体を残すcontainか、中央を切り取るcoverを選べます。
透明背景でも使えますか？
使えます。ただし表示環境によって見え方が変わるため、小サイズpreviewで確認してください。
Apple Touch Iconとは何ですか？
Apple端末でWebサイトをホーム画面へ追加した際などに使われるアイコンです。
192px・512pxは何に使いますか？
主にWeb App Manifestから参照するWebアプリ用アイコンとして使われます。
このツールだけでPWAになりますか？
なりません。Manifestの他項目やService Workerなども必要です。
画像はアップロードされますか？
されません。読み込み、preview、PNG・ICO生成は端末のブラウザ内だけで行います。