favicon・Webアイコン生成ツール
画像・絵文字・文字から、faviconやApple Touch Icon、PWAアイコンを一括で作成します。16px表示やmaskable切れの確認、HTMLタグとmanifestの生成までブラウザ内で完結します。
対応形式
使い方
- 1画像・絵文字・文字から作り方を選ぶ
- 2配置や背景を調整し、各環境の表示を確認する
- 3必要なファイルと設置コードを選んで保存する
STEP 1
素材を選ぶ
テキスト・絵文字・画像のいずれかから作り方を選びます。
小さいアイコンでは1〜2文字が最も見やすくなります。
STEP 2
デザインを調整
配色・拡大率・余白・位置・角丸などを設定します。
配色プリセット
背景
STEP 3
表示を確認
iPhoneホームはリアルタイム、それ以外は「プレビューに反映」ボタンで一括更新します。
リアルタイムプレビュー
iPhone
ホーム
プレビュー
実寸
16px
実寸
32px
Android
円形
Android
角丸
PWA
正方形
PWA
maskable
黄破線はmaskable safe zone（中央80%）の目安です。重要な部分が外側に出ていないか確認してください。
ブラウザ
ブラウザ
タブ
ブラウザ
ブックマーク
STEP 4
出力ファイルを選ぶ
基本セット・PWAセット・補助ファイルから必要なものを選びます。
基本セット
PWAセット
補助ファイル
STEP 5
公開設定・設置コード
manifest設定とHTMLタグ・Next.js・WordPress向けの設置コードを確認します。
manifest設定 （省略可）
設置コード
通常HTML（<head> 内に貼り付け）
<link rel="icon" href="/favicon.ico" sizes="any"> <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" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Next.js App Router
// app/layout.js (Next.js App Router)
// favicon.ico → app/favicon.ico に配置するとNext.jsが自動生成
// apple-touch-icon.png → app/apple-icon.png に配置
// site.webmanifest → app/manifest.js (またはmanifest.webmanifest) に配置
// 手動でlinkタグを追加する場合（metadata経由を推奨）:
export const metadata = {
icons: {
icon: [
{ url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
{ url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
],
apple: [{ url: '/apple-touch-icon.png', sizes: '180x180' }],
},
}Next.js では app/favicon.ico にファイルを配置するだけで自動認識されます。詳細はNext.js公式ドキュメントを確認してください。
WordPress
WordPress での設置方法:
【推奨】外観 > カスタマイズ > サイト基本情報 > サイトアイコン
- 管理画面から画像をアップロードするだけで自動設置されます。
- テーマ更新の影響を受けません。
【テーマへの直接設置】
- functions.php または header.php に下記を追加できますが、
テーマ更新で上書きされる可能性があります。
- 子テーマを使用するか、プラグインの利用を検討してください。site.webmanifest
{
"name": "My Website",
"short_name": "My Site",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/pwa-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/pwa-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/pwa-maskable-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}STEP 6
保存
まとめて保存するか、必要なファイルだけ個別に保存できます。
ダウンロード
個別ダウンロード
注意点
生成結果のWindows・主要ブラウザでの実機表示は環境ごとに確認してください。
サイト公開用のアイコンを「作って・確かめて・配布まで」
本ツールは、Webサイト公開に必要なfavicon、Apple Touch Icon、PWAアイコンを、画像・絵文字・文字のいずれからでも作れるブラウザ完結ツールです。単なるPNGからICOへの変換ではなく、素材作成、用途別出力、各環境のプレビュー、失敗防止、設置コード生成までを一つの流れで提供します。
faviconとPWAアイコンの違い
faviconはブラウザのタブやブックマーク、デスクトップショートカットなどで使われる小さなサイト識別アイコンです。一方でPWAアイコンは、サイトを「ホーム画面に追加」してアプリのように使う場合に表示されるアイコンで、ホーム画面・アプリ一覧・タスク切替などサイズの大きい表示面で使われます。同じデザインを共通利用することもできますが、表示サイズと用途が異なるため、見やすさの基準も変わってきます。本ツールでは両方のセットを同時に作成し、それぞれの用途に合わせた表示プレビューを用意しています。
主要サイズと用途
faviconはブラウザのタブで16px、ブックマークやURL欄で32px、Windowsのデスクトップショートカットや高密度環境で48pxが使われます。Apple Touch Iconは180pxで、iPhoneやiPadのホーム画面アイコンに対応します。PWAアイコンはAndroidホーム画面やデスクトップPWAで192pxと512pxの2サイズが基本で、Androidのマスク表示用に512pxのmaskableアイコンも合わせて用意します。
- favicon.ico（16/32/48内包）: 従来形式互換用
- favicon-16x16.png / 32x32.png / 48x48.png: モダンブラウザ向けPNG favicon
- apple-touch-icon.png（180×180）: iOSホーム画面
- pwa-192x192.png / 512x512.png: PWA標準・高解像度
- pwa-maskable-512x512.png: Androidマスク対応PWA
小サイズで見やすくするポイント
16px表示では、文字の細い部分や薄い線、低コントラストな配色は潰れて読めなくなることがよくあります。文字モードでは1〜2文字に絞り、太字で背景と前景のコントラスト比をしっかり確保することが大切です。絵文字モードでは絵文字自体が複雑な形状を持つため、過度に余白を詰めずに描画領域の80%程度に収めるとシルエットがはっきりします。画像モードでは元画像を512px以上で用意し、必要に応じて余白と拡大率を調整してください。本ツールは16pxの実寸プレビューと、透明余白・コントラスト・maskable safe zone外周の自動チェックを用意しています。
maskable iconの注意点
AndroidのいくつかのランチャーやChromeのPWAインストール時には、アイコンが円形・角丸・しずく型など端末固有のマスク形状で切り抜かれます。デザインの重要部分（ロゴ・文字・主要シルエット）が中央80%のsafe zoneの内側に収まっていないと、マスクで欠けてしまう恐れがあります。本ツールのプレビューでは黄色の点線でsafe zoneを表示し、外周に不透明ピクセルが多い場合に注意を出します。表示形状はOS・ランチャーごとに異なるため、本ツールの判定はあくまで目安として、最終的な見え方は実機での確認をおすすめします。
画像・絵文字・文字モードの使い分け
ロゴや既存のシンボル画像がある場合は画像モードが最も自然です。元画像のアスペクト比を維持しながら、余白・背景色・角丸を調整できます。素材がまだ用意できていない段階では、絵文字モードでサービスの雰囲気に合う絵文字をひとつ選んで仮アイコンを作る方法が早いです。サイト名の頭文字でブランドの印象を作りたい場合は文字モードが向いており、配色プリセットと文字色・フォント・太字を組み合わせるだけで均一なアイコンが作れます。後から本格的なロゴができたら、画像モードへ切り替えて差し替えるとスムーズです。
Next.js・WordPress・静的HTMLへの設置方法
Next.js App Routerでは、app/favicon.ico・app/icon.png・app/apple-icon.png・app/manifest.webmanifest のファイル規約に従ってファイルを配置すると、フレームワークが自動で必要な linkタグを挿入します。手動でmetadataを書く場合は、metadata.icons で個別に指定できます。WordPressでは「外観→カスタマイズ→サイト基本情報→サイトアイコン」からの設置が推奨で、テーマ更新の影響を受けません。静的HTMLや独自CMSでは、生成された favicon-tags.html の内容を head要素内に貼り付け、画像ファイルをサイト直下へ配置してください。本ツールの「設置コード」セクションでは各環境の手順と注意点をコピー可能な形でまとめています。
SVG入力の制約
本ツールはSVGを入力できますが、安全のため script や foreignObject、iframe、危険な href・style 値などをサニタイズしてから描画します。SVG内に外部URLで参照しているフォントや画像がある場合、ブラウザのセキュリティ仕様により描画されない可能性があります。文字や複雑なエフェクトを正確に再現したい場合は、事前にデザインソフトでラスタライズ済みのPNGなどを書き出してから入力するのが確実です。SVGが描画できなかった場合はエラーメッセージを表示します。
プライバシーと処理方式
- 入力画像・絵文字・文字・色設定・生成された各アイコン・manifest・HTMLコードは外部サーバーへ送信されません
- Canvas描画・ICO組み立て・ZIPの組み立てはすべてブラウザ内で処理されます
- ネットワーク接続を切った状態でも一度ページを読み込めば動作します
- 社内ロゴや未公開のブランド素材も、外部に出さずに作業を完結できます
favicon・Webアイコン生成ツールについてのよくある質問
関連ツール
画像形式変換（JPEG / PNG / BMP / WebP）
JPEG・PNG・BMP・WebP出力に対応。用途プリセット・品質スライダー・リサイズ・透過部分の塗りつぶし色指定・ZIP一括DLまで備えた画像形式変換ハブ。
画像圧縮
自動最適化または選択式で画像を軽量化。圧縮レベル・画質レベル・軽量化レベルを選べます。
画像リサイズ
用途別プリセットと5方式（幅・高さ・長辺・範囲内に収める・倍率）で画像を一括リサイズ。縦横が異なる複数画像も個別計算で処理し、実行前診断・処理前後プレビューに対応。
画像角丸化（アイコン作成）
画像を円形・角丸に切り抜き、SNS・アプリ・Web UI向けのアイコン素材を作成できるツールです。背景色・余白・枠線・小サイズプレビュー・PNG/JPEG/WebP出力に対応しています。