マルチサイズ ファビコンジェネレーターとは？
画像を1枚アップロードする、または1〜3文字や絵文字を入力するだけで、16×16 ICOから1024×1024 App Storeアイコンまですべての標準サイズに加え、拡大縮小可能なfavicon.svgも手に入ります。Apple Touch、Android Chrome、MSタイル、Safariピン留めタブに対応。個別ダウンロードもZIPの一括ダウンロードも可能です。
自分のロゴから始めても、数文字や絵文字に好きな色とフォントを組み合わせて手早くアイコンを作っても構いません。ジェネレーターはレガシーな favicon サイズ(16・32・48・64・96・128・256)、Apple Touch アイコン(152・167・180)、1024 の App Store アイコン、Android Chrome(192・384)、MS Tile(144・150・310)、PWA 512 をカバーする 17 種類の PNG を個別に出力します。グリッドをプラットフォーム別に絞り込み、出力形状を正方形・角丸・円形から選び、ダウンロード前にライト/ダークのタブで favicon を確認できます。各 ZIP にはマルチ解像度の favicon.ico、拡大縮小可能な favicon.svg、貼り付けるだけの HTML スニペット、Android サイズに maskable purpose を設定済みの manifest.json も含まれます。アプリ名と短縮名を入れれば PWA としてインストール可能になります。
使い方
- ソースとして高解像度の正方形画像（512×512px以上）をアップロードしてください。または、テキストモードに切り替えて1〜3文字や絵文字を入力すれば、すぐに作成できます。
- グリッドで生成されたすべてのサイズを確認。必要なプラットフォームに合わせてオン/オフを切り替えます。
- 個別サイズのダウンロード、マルチ解像度 favicon.ico の単体ダウンロード、または「全てダウンロード」で選択中の全サイズ・ICO バンドル・HTML スニペット・manifest をまとめた ZIP を入手できます。
使用するタイミング
- 新サイト公開時に、すべてのブラウザとOSでfaviconを揃えたいとき。
- ブランドリニューアル時に、新ロゴで全PWA・ホーム画面アイコンを作り直すとき。
- ホーム画面に追加対応を実装し、Androidでmaskableアイコンを正しく表示させたいとき。
結果
Web制作会社がクライアントのブランドリニューアル用に新しいロゴをアップロード。デスクトップ、iOS Safari、Android Chrome、Windowsタイル、PWAマニフェストアイコンの12サイズがすぐに使える状態で生成されます。
よくある質問
- ソース画像のサイズはどのくらい必要？
- 最低でも512×512ピクセル、正方形で、ロゴを中央に置き周囲に少し余白を取ること。これより小さいと512のPWAアイコンに拡大したときぼやけます。ベクター素材(SVGを1024でPNG化)が理想です。
- PNGとICOの両方のfaviconが必要なのはなぜ？
- モダンブラウザは link rel='icon' で複数サイズの PNG を読み込みますが、近年は単一の拡大縮小可能な SVG ファビコンを好む傾向があります。.ico ファイルは今でも古い Windows 系ブラウザや一部のホスティング、ピン留めサイトの仕様で必要です。本ツールは3種類すべてを出力します。モダンサイズの PNG 一式、拡大縮小可能な favicon.svg、さらに 16・32・48px をまとめた単一の favicon.ico です。
- maskableアイコンとは？なぜAndroidに必要？
- Androidはランチャーによってホーム画面アイコンを円形、スクワークル、角丸四角に切り抜きます。maskableアイコンは中央に約80%のセーフゾーンがあり、ロゴの重要部分が切れません。ソース画像の四辺に約10%の余白を入れてください。
- 生成されたファイルはどこに置く？
- すべてのPNGをサイトのpublicルート(または/static)に配置し、HTMLスニペットをページのheadに貼り、manifest.jsonをリンクします。Apple TouchとfaviconはHTML head内、PWAアイコンはmanifestから参照されます。
- 背景色とパディングオプションがあるのはなぜ？
- 透明ロゴはブラウザタブでは問題なくても、AndroidやiOSが背後に角丸長方形を追加すると配置が崩れます。ここで単色背景と8-12%のパディングを組み合わせると、どのランチャーでも安定したタイル表示になります。