このツールでできること
ロゴ画像を1枚入れるだけで、favicon.icoやPNG各サイズ、PWA用のマスク付きアイコンまで一式まとめて生成します。 サイト名やテーマカラーなどを入力すれば、PWAの設定ファイル(site.webmanifest)と、そのまま貼れるHTMLコードも一緒に書き出されます。 処理はすべてブラウザ内で完結し、画像がサーバーに送信されることはありません。
使い方(3ステップ)
- 1. ロゴ画像を1枚入れる … 点線の枠に画像をドロップするか、「ファイルを選択」ボタンで指定します。推奨は512×512px以上の正方形・透過PNGです。
- 2. アイコンの設定を確認する … サイト名・テーマカラー・背景色などを必要に応じて入力します。実寸プレビューでブラウザタブ・iOS・Androidでの見え方をその場で確認できます。
- 3. 一式を生成してダウンロード … 「favicon一式を生成する」を押すと全ファイルが作られ、ZIPでまとめてダウンロードできます。
正方形でない画像を入れたときの扱い
入力画像が正方形でない場合、「余白を足す」(はみ出さず全体を収める)か「中央で切り抜く」(余白なしで埋める)かを選べます。 「余白を足す」を選んだ場合は、余白を透過にするか、指定した背景色で塗るかも選択できます。 ロゴの周囲に十分な余白がある画像を使うと、どちらの方法でもきれいに仕上がります。
生成されるファイルの内訳
- favicon.ico … 16/32/48pxを内包した、ブラウザタブ・ブックマーク用の定番ファイルです。
- favicon-16x16.png / favicon-32x32.png … 高DPI環境向けのPNG版favicon です。
- apple-touch-icon.png … iOSのホーム画面に追加したときのアイコン(180px)です。
- icon-192.png / icon-512.png / icon-512-maskable.png … Android・PWA向けのアイコンです。maskable版は端末側で丸くトリミングされても中央のロゴが欠けないよう、内側に余裕を持たせています。
- site.webmanifest / head-snippet.html / README.txt … PWA設定ファイル、HTMLへの貼り付けコード、設置手順です。
設置方法
ダウンロードしたZIP内のファイルをすべてサイトのルート(例: https://example.com/ の直下)に置き、head-snippet.html の中身を各ページの <head> 内に貼り付けるだけで設置は完了です。 詳しい手順はZIPに同梱されるREADME.txtにも記載されています。
知っておくと安心なこと
- iOS・Androidのアイコンは透過にできません … iOSは透過部分を黒く塗ってしまうため、指定した背景色で塗りつぶして生成します。
- SVGは画像として読み込まれます … 外部ファイルを参照するSVGは正しく描画されない場合があるため、単体で完結したSVGをご用意ください。
- 設定を変えたら再生成が必要です … 色やサイト名を変更すると、生成済みの一覧は破棄され、再度「生成する」を押す必要があります。
まとめ
favicon・アプリアイコン生成ツールは、ロゴ画像1枚からブラウザ・iOS・Android向けのアイコン一式を無料で生成できるツールです。 ロゴの余白を整えてから使いたい場合は、一括トリミングツールで先に余白を切り詰めておくと、より意図通りの仕上がりになります。