Favicon Generator
Generate favicon.ico, Apple touch, Android, and maskable icons with a manifest
ソース
PNG・JPEG・WebP・SVG のロゴをドロップ
512 × 512 px 以上の正方形画像がおすすめです。SVG はレンダリング前にサニタイズされます。
クリップボードから貼り付けることもできます。
ファビコンパッケージ
HTML <head> スニペット
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">site.webmanifest
{
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/maskable-icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
ファビコンジェネレーターで作れるもの
1 つのロゴまたは数文字から、完全なファビコン一式を作成します: favicon.ico (16・32・48 px)、favicon-16x16.png、favicon-32x32.png、favicon-48x48.png、apple-touch-icon.png (180 px)、android-chrome-192x192.png、android-chrome-512x512.png、maskable-icon-512x512.png、site.webmanifest、そしてそれらを読み込む HTML タグです。
使い方
- 1.PNG・JPEG・WebP・SVG のロゴをドロップするか、テキストに切り替えて 3 文字まで入力します。
- 2.背景 (透明または色)、余白、形を選びます。
- 3.マニフェスト用にアプリ名、短い名前、テーマカラー、アイコンのパスを入力します。
- 4.明るい背景・暗い背景のプレビューとブラウザタブの見本を確認します。
- 5.ZIP または個別ファイルをダウンロードし、HTML スニペットを <head> に貼り付けます。
各アイコンの作り方
ブラウザ用と Android 用のアイコンは、形・余白・透明度の設定に従います。Apple touch アイコンは iOS が角を丸めるため、常に不透明な正方形です。maskable アイコンは不透明で、Android が円やスクワークルに切り抜けるよう、絵柄をセーフゾーン (余白 10% 以上) に収めます。小さいサイズは段階的に縮小するため、16 px でもくっきり表示されます。
形式・安全性・制限
favicon.ico は PNG 画像を内包しており、最新のブラウザと Windows Vista 以降はすべて対応しています。非常に古い Windows XP 向けツールでは読み込めない場合があります。アップロードした SVG はサニタイズされ、スクリプト、イベントハンドラー、外部参照はレンダリング前に削除されます。テキストアイコンはシステムの UI フォントを使います。すべてブラウザ内でローカルに生成されます。
