🎨 Favicon ジェネレーター

画像・テキスト・絵文字からファビコンを簡単作成

⚙️

入力ソース設定

📥 画像をドラッグ&ドロップするか
100%
0%
0%
🎨

背景デザイン設定

🌐

ブラウザタブでの表示イメージ

favicon My Awesome Website
favicon My Awesome Website
📐

書き出しサイズ一覧

16x16
16 x 16 (標準タブ)
32x32
32 x 32 (高DPIタブ)
48x48
48 x 48 (デスクトップ)
180x180
180 x 180 (Apple)
192x192
192 x 192 (Android)
512x512
512 x 512 (PWA大)
💾

ダウンロード

💻

HTML記述用コード

ダウンロードしたファイルをWebサイトのルートディレクトリに配置し、HTMLの <head> 内に以下のタグを追記してください。

推奨設定 (ICO + SVG + manifest)
<!-- ファビコンの設置コード -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

ファビコンのサイズとファイル形式について

📁

favicon.ico (マルチサイズ)

1つのファイル内に 16x16、32x32、48x48 の複数の解像度を内包した形式です。クラシックなIE対策や、ブラウザのショートカット、お気に入りアイコンなどに依然として広く使われています。

🍎

apple-touch-icon.png

iPhoneやiPadなどのiOS端末で「ホーム画面に追加」した際に使われる 180x180 px のアイコンです。透過させず、背景色がしっかりと塗られた不透明なデザインにすることが推奨されます。

🤖

android-chrome / PWA

Android端末のChromeブラウザや、PWA(Progressive Web App)としてホーム画面に追加する際に使われる、192x192 px および 512x512 px の高解像度PNGアイコンです。

📱

site.webmanifest

アプリ名やテーマカラー、Android/PWA用のアイコンパス(192px/512px)を指定するメタデータ用のJSONファイルです。スマホでアプリ同様に立ち上げるPWA機能には必須です。

画像や入力データはブラウザでのみ安全に処理され、当サイトのサーバー等へ送信・蓄積されることは一切ありません。
✅ クリップボードにコピーしました