ファビコン・アプリアイコン作成 (PNG・ICO・manifest)

ロゴ画像や1〜2文字からファビコンとアプリアイコンのセットをまとめて作ります。新しいサイトを公開するときや、ホーム画面に追加されるアプリを作るときに、16〜512 pxの各サイズとfavicon.ico、apple-touch-icon、マニフェストを一度のダウンロードで受け取れます。

使い方

1. 「作り方」で「文字から」または「画像から」を選びます。「文字」に1〜2文字を入力するか、画像ファイルをドロップするか「例を読み込む」を押します。
2. 「背景の形」「背景色」「余白」を調整すると、プレビューがすぐに変わります。画像では「背景を透明にする」も使えます。
3. 「アプリ・サイト名」と「短い名前」はsite.webmanifestに入ります。Android向けには「マスカブルアイコンも作る」をオンにします。
4. 「zipで保存」を押し、ファイルをサイトのルートにアップロードしてから、「HTML headスニペット」をhead要素の中にコピーします。

計算方法と補足

• まず512 pxの原版を描き、半分ずつ段階的に縮小して16・32・48・180・192・512 pxのPNGを作ります。小さなサイズでも細い線がつぶれにくくなります。
• favicon.icoは16・32・48 pxのPNGをICO形式の中に収めたファイルです。現在のブラウザはICO内のPNGをそのまま読み取ります。
• マスカブルアイコンは内容を中央80%のセーフゾーンに収めたもので、Androidが円や角丸四角に切り抜いても内容が欠けません。
• 画像と文字はこのブラウザの中だけで処理され、アップロードされません。設定は次回のためにこのブラウザに保存されます。

よくある質問

ファビコンのサイズは何pxにすべきですか?

ブラウザのタブは16・32 px、ショートカットは48 px、iPhoneのホーム画面は180 px、AndroidやPWAは192・512 pxを使います。このページは6種類をまとめて作ります。

.icoファイルはまだ必要ですか?

古いブラウザや、/favicon.icoを自動で取りに行くクライアントのために役立ちます。PNGのリンクも入るので、現在のブラウザはPNGを優先します。

文字アイコンにはどのフォントが使われますか?

お使いの端末にインストールされたシステムフォントで、選んだ書体の系統が使われます。別の端末では同じ系統でも違うフォントで描かれることがあります。

背景が透明なアイコンも作れますか?

画像の場合は「背景を透明にする」をオンにするとPNGの背景が空になります。文字アイコンには常に背景色が付きます。