Androidアプリアイコン
ランチャー密度別PNGとGoogle Play 512×512アイコンをまとめて準備します。
023 · CONTENT IMAGE
アプリアイコン・ファビコン生成ツール
1枚の画像からAndroidアイコン、PWA 192×192・512×512、favicon.icoとファビコン一式をブラウザ内で生成できます。
LOCALブラウザ内で処理
HOW TO USE
使い方
- 01
PNG・JPG・WebPの元画像を選択します。
- 02
全体表示/塗りつぶし、背景色、位置と拡大率を調整し、Android・PWAのマスクを確認します。
- 03
必要なプラットフォーム用ファイルを生成し、ZIPでダウンロードします。
USE CASES
活用例
PWAアイコン
192×192・512×512の通常アイコンとマスカブルアイコンを同時に生成します。
Webファビコン
16×16・32×32・48×48 PNGとマルチフレームfavicon.icoを生成します。
ブランドアイコン一式
1つのロゴからAndroid・PWA・Webファビコンを整理されたZIPで受け取れます。
EXPERT POST
アプリアイコンとファビコンを安定して作る実践基準
プラットフォーム別のセーフゾーン、小サイズの可読性、ICO・ZIP構造まで、実装前に確認する基準を作業フローに沿って整理しています。1つの元画像と複数の出力規格
アプリアイコンとファビコンは同じロゴを使えても、必要なサイズや表示方法はプラットフォームごとに異なります。1つのnormalized layoutを各presetで共有すると、出力ごとの位置や大きさの差を抑えやすくなります。
Android Adaptiveのセーフゾーン
Androidのランチャーは円形や角丸四角など異なるマスクを適用する場合があります。重要なロゴ要素を中央のセーフゾーン内に置き、108dp/66dpガイドで切れ方を事前に確認します。
通常PWAとMaskable
通常アイコンとmaskableアイコンは同じ元画像から作れますが表示目的が異なります。Maskableでは重要要素を中央safe zone内に置き、外側はfull-bleed背景として構成する方が安全です。
小さいFaviconは実寸で確認
大きなプレビューで鮮明なロゴでも16×16や32×32では細部がつぶれることがあります。生成された小サイズを実寸で確認し、必要なら元デザインを簡略化するか判断します。
ICOとZIPは構造まで確認
favicon.icoは複数サイズのフレームを1つにまとめられます。ZIPはAndroid・PWA・Faviconを分け、ファイル名と配置先が分かりやすい構造にしておくと実装時の迷いを減らせます。
ブラウザ内ローカル処理
元画像と生成結果は現在のブラウザ内で処理され、サーバーへのアップロードを前提としません。生成後は実際に保存したファイルのサイズ・寸法・用途を確認してから適用します。
最小サイズの結果から先に確認
512×512だけを見ると、縮小時の線のつぶれ、文字の消失、余白の崩れを見逃しやすくなります。16×16・32×32のfaviconとマスクプレビューを先に確認し、大きいサイズでも中心と余白が揃っているか比較します。
ファイル更新とキャッシュ更新を分けて確認
アイコンファイルを正しく置き換えても、ブラウザ・OS・インストール済みPWAのキャッシュで以前の画像が残る場合があります。生成ファイルの問題とキャッシュ表示を分け、manifestやHTMLの参照先も確認します。
IMPORTANT NOTES
注意事項
プラットフォーム別マスク、小サイズの可読性、キャッシュ差を分けて確認し、適用後の表示差を減らします。- Android adaptiveのセーフゾーン外はランチャーのマスクで切れる場合があります。
- PWAのマスカブルアイコンは透明ファビコンとは用途が異なるため、結果ファイルを分けて使用してください。
- Google Playの掲載要件は変更される場合があるため、公開前に最新の公式案内を確認してください。
- 複雑なロゴは小さいファビコンで読みにくくなる場合があります。
- ブラウザやOSがアイコンをキャッシュし、更新がすぐ見えない場合があります。
FAQ
よくある質問
01192×192と512×512はなぜ必要ですか？+
PWAで広く使われる主要サイズで、TOOLBOXは両方を標準生成します。
02通常PWAとマスカブルは同じファイルですか？+
元画像は共通にできますが用途が異なり、マスカブルではセーフゾーンと全面背景を考慮します。
03Androidアイコンが丸く表示されるのはなぜですか？+
Adaptive iconはランチャーにより異なるマスクが適用されるため、円形・squircle・角丸四角・四角を確認できます。
04favicon.icoには何が入りますか？+
16×16・32×32・48×48のフレームを1つのICOに含めます。
05画像はサーバーに送信されますか？+
いいえ。対応する画像処理は現在のブラウザ内で行います。
画像と生成結果はサーバーに送信されず、現在のブラウザ内で処理されます。