アイコン・ファビコン生成ツール（無料・登録不要）
ブラウザ完結のアイコン・ファビコン生成ツール。テキスト入力・5形状（円/四角/角丸/ハート/星）・30種以上のプリセット・グラデーション/パターン背景。16×16〜1024×1024の7サイズをPNG/SVG/ICO形式で一括ダウンロード。登録不要・サーバー送信なし。
最終更新：2026年5月14日
アイコン生成ツールとは、テキストや記号からデジタルアイコン（favicon・SNSアイコン・PWAアイコン）を生成するツールです。本ツールは 1〜3 文字のテキストを入力し、円・四角・角丸・ハート・星の5形状・30種以上のカラープリセットから選ぶだけでアイコンを作成できます。PNG・SVG・ICO の3形式、16〜1024px の7サイズを個別またはZIP一括ダウンロード。ブラウザ内（Canvas API）で処理するためファイルをサーバーに送信しません。商用利用可能。
出力サイズ
1〜3文字推奨。絵文字対応。16px/32px等の小サイズでは1文字が最適。
形状
背景
境界線（ボーダー）
テキスト位置
ファイル名
アイコン・ファビコンの作り方（4ステップ）
- テキストを入力する — 「テキスト」タブで1〜3文字（日本語・英字・絵文字）を入力。プレビューがリアルタイム更新されます
- 形状と背景を選ぶ — 「形状・背景」タブで円/四角/角丸/ハート/星を選択。背景は単色・グラデーション・ドット・ストライプから設定
- サイズと形式を選ぶ — 用途に合わせてサイズ（16〜1024px）と形式（PNG/SVG/ICO）を選択
- ダウンロード — 「ダウンロード」で個別取得、または「全サイズ ZIP」でファビコン用7ファイルを一括取得
ファビコンとは？適切なサイズと形式の選び方（2026年版）
ファビコン（favicon）はブラウザのタブやブックマークに表示される小さなアイコンです。サイトのブランド認知に直結するため、視認性の高いデザインが重要です。
2026年推奨のファビコン構成
| ファイル | サイズ | 用途 | 形式 |
|---|---|---|---|
| favicon.ico | 16/32/48px 内包 | ブラウザタブ（全ブラウザ対応） | ICO |
| favicon-16x16.png | 16 × 16 px | 古いブラウザ互換 | PNG |
| favicon-32x32.png | 32 × 32 px | 標準ブラウザタブ | PNG |
| apple-touch-icon.png | 180 × 180 px | iOS ホーム画面追加 | PNG |
| android-chrome-192x192.png | 192 × 192 px | Android ホーム画面 | PNG |
| android-chrome-512x512.png | 512 × 512 px | PWA スプラッシュ | PNG |
| icon.svg | スケーラブル | モダンブラウザ（推奨） | SVG |
最小構成（3ファイル）: favicon.ico + apple-touch-icon.png(180px) + favicon-32x32.png でほぼ全環境に対応できます。
SNSプロフィールアイコンの最適サイズ（Twitter/Instagram/YouTube等）
各SNSのプロフィール画像は正方形で入稿し、プラットフォーム側が円形に切り抜くケースがほとんどです。
| SNS | 推奨入稿サイズ | 表示サイズ | 形状 |
|---|---|---|---|
| Twitter / X | 400 × 400 px | 200 × 200 px | 円形に自動クリップ |
| 320 × 320 px | 110 × 110 px | 円形に自動クリップ | |
| YouTube | 800 × 800 px | 98 × 98 px | 円形に自動クリップ |
| 180 × 180 px | 40〜160 px | 円形に自動クリップ | |
| LINE | 640 × 640 px | 最大640 px | 円形に自動クリップ |
| note | 512 × 512 px | 可変 | 円形に自動クリップ |
本ツールの512×512px出力（PNG）がSNSプロフィール用途に最適です。
アプリアイコン作成ガイド（iOS/Android/PWA対応サイズ一覧）
ブログ・Webサービス・PWA（プログレッシブウェブアプリ）向けアイコンサイズの一覧です。
PWA / Web アプリアイコン
- 192×192px（PNG）- manifest.json の icons 必須サイズ
- 512×512px（PNG）- PWA スプラッシュスクリーン・高解像度対応
- 1024×1024px（PNG）- マスタースケールから縮小用
manifest.json 記述例
{
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/icon.svg", "sizes": "any", "type": "image/svg+xml" }
]
}SVGアイコンは "any" サイズ指定で全解像度に対応できるため、本ツールのSVG出力が特に有効です。
ブログアイコンの作り方と設定方法（WordPress・はてな・note・Astro）
WordPress
- 「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」
- 512×512px 以上の画像（正方形）をアップロード推奨
- WordPress が自動で各サイズに縮小 + <link rel="icon"> を出力
はてなブログ
- 「設定」→「詳細設定」→「ファビコン」からアップロード
- 16×16〜256×256px の PNG 推奨
Astro（本ツールのサイトと同じ構成）
<!-- src/layouts/Layout.astro の <head> に追加 -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />他ツールとの比較（favicon.io / ao-system / Canva との違い）
主要アイコン生成ツールとの機能比較（2026年5月調査）。
| ツール | 形状 | SVG出力 | ICO出力 | プリセット | パターン背景 | 登録 |
|---|---|---|---|---|---|---|
| 本ツール（tools-navi.jp） | 5形状 | ✔ | ✔ | ✔ 30種+ | ✔ | 不要 |
| favicon.io | 3形状 | ✗ | ✔ | ✗ | ✗ | 不要 |
| ao-system.net | 画像のみ | ✗ | ✔ | ✗ | ✗ | 不要 |
| Canva（アイコンメーカー） | 多数 | △ 有料 | ✗ | ✔ 多数 | ✔ | 要登録 |
| rakko.tools/69 | 画像のみ | ✗ | ✔ | ✗ | ✗ | 不要 |
※ 2026年5月現在の調査。各サービスの仕様は変更される場合があります。
よくある質問（FAQ）
- 作成したアイコンは商用利用できますか？
- はい、完全無料・商用利用可能です。登録不要でダウンロードしたアイコンの著作権はご自身に帰属します。本ツールのプリセットカラーやデザインを使ったアイコンもご自由にお使いください。
- ICOファイルとは何ですか？PNGと何が違いますか？
- ICO形式はWindows・全ブラウザが標準サポートする「マルチサイズアイコン形式」です。1つのICOファイルに16/32/48pxなど複数サイズを内包できます。PNGはより汎用的ですが、1サイズ1ファイルです。ブラウザタブのファビコンにはICOが最も互換性が高く、モダンブラウザにはSVGが理想的です。
- SVGアイコンの利点は何ですか？
- SVGはベクター形式のため、どんな解像度・サイズに拡大縮小しても画質が劣化しません。HiDPIディスプレイや4K環境でも鮮明に表示されます。ファイルサイズも小さく、manifest.jsonで "sizes": "any" として全解像度に一括対応できます。デメリットは古いブラウザ（IE11以下）で非対応な点ですが、2026年現在は問題になりません。
- 日本語（漢字・ひらがな）のアイコンは作れますか？
- はい。テキスト欄に日本語を入力できます。ただし16×16px・32×32pxなど極小サイズでは2文字以上が潰れて読めなくなる場合があります。ファビコン用途では1文字（漢字1字 or 英字1〜2字）を推奨します。フォントはゴシック体が最も視認性が高く、明朝体は小サイズで潰れやすいです。
- 全サイズZIPに含まれるファイルは何ですか？
- 全サイズZIPには favicon.ico（16/32/48px内包）、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png（180px）、icon-192x192.png、icon-512x512.png、icon-1024x1024.png、icon.svg の合計8ファイルが含まれます。Webサイトのfaviconとして必要なファイルがそろいます。
- ハート形・星形のアイコンはどんな用途に使えますか？
- ハート形はSNSの「いいね」系アプリ・恋愛・ウェルネス系サービスのアイコンに最適です。星形はレビュー・評価・お気に入り機能のアイコン、または個人ブランドのロゴ代わりとして使われます。いずれも16px〜32pxの小サイズでは細部が潰れるため、SNSプロフィール（256px以上）やPWAアイコン（192px以上）用途に向いています。
- PWA（プログレッシブウェブアプリ）のアイコンにはどのサイズが必要ですか？
- PWA の manifest.json に必要な主なアイコンサイズは 192×192px（Android）と 512×512px（スプラッシュスクリーン・ストア用）です。本ツールの「全サイズZIPダウンロード」にはこれらのサイズが含まれており、manifest.json の icons フィールドに追加するだけで設定が完了します。Apple Touch Icon（iPhone のホーム画面追加）には 180×180px を使用します。
- ファビコン（favicon）の設定方法を教えてください。
- ダウンロードした favicon.ico を Webサイトのルートディレクトリに配置し、HTML の head に link rel=icon href=/favicon.ico と link rel=apple-touch-icon href=/apple-touch-icon.png を追記します。SVG ファビコンは link rel=icon type=image/svg+xml href=/favicon.svg で設定でき、ダークモード対応も可能です（Chrome 80・Firefox 76以降対応）。