ICOとPNGを両方作る理由
favicon.icoには16・32・48pxのPNGが入ります。Appleタッチアイコン用180px、マニフェスト用192・512pxも用意します。環境ごとに参照ファイルが異なるためです。
Web素材
ファビコン・PWA生成
ICO・PNGアイコンとWebマニフェストをまとめて作成します。
ファイルはこのブラウザ内で処理します。ファイルをドロップまたは選択。画像の貼り付けにも対応。
JPG・PNG・WebP / 最大40MB・1600万画素 / アニメーション・回転メタデータ非対応プレビュー
ファイルを選択してください。
結果
使い方
-
元画像を用意
ロゴやシンボルを選びます。細い線や小さい文字は16pxで見えない場合があります。
-
名前と色を設定
アプリ名、テーマ、背景色、通常アイコンの余白を指定します。マスカブル用は専用の安全余白を使います。
-
サイトに配置
ZIPをサイトのルートに展開し、integration.htmlのタグをheadに追加します。サブディレクトリ配信ではパスを変更してください。
書き出す前に確認したいこと
マスカブルとマニフェスト
マスカブル画像は幅56%の中央正方形に図柄を収め、安全円内に配置します。マニフェストは名前・開始URL・表示・アイコンを定義しますが、サービスワーカーやオフライン動作は実装しません。
現在の制限
- JPG・PNG・WebP / 最大40MB・1600万画素 / アニメーション・回転メタデータ非対応
- サイズは正の整数、1辺8192px・1600万画素以下にしてください。
- SVGはSVG仕上げでPNGに変換してから使ってください。
- 生成するパスはサイトのルート配置を前提とします。
- 生成ファイルだけでインストール可否やオフライン動作は保証しません。
画像ツールについて
ICOはPNGと違いますか？
ICOは複数サイズのアイコンを収める形式です。このツールは3サイズのPNGを1つにまとめます。
マスカブルの図柄が小さいのは？
OSが円や角丸で切り抜いても主要な図柄が残るように、広めの余白を設けています。
古いアイコンが表示される場合は？
まずパスとheadタグを確認します。古いアイコンがキャッシュされる場合があるため、新しいタブや別プロファイルでも確認してください。