Favicon ジェネレーター Favicon オンラインジェネレーター
画像を Web サイト用 favicon に変換し、favicon.ico、Apple Touch Icon、PWA アイコンに対応します。
正方形トリミング、複数サイズ生成、ZIP パッケージ、HTML 埋め込みコードを内蔵します。
画像をここへドラッグするか、 クリックしてアップロード
PNG · JPG · JPEG · SVG · WebP に対応
image を drag して位置を移動し、zoom 後に square crop を行います。
画像をアップロードして「Generate Favicon」をクリックした後
preview と download option はここに表示されます。
❓ FAQ FAQ
Favicon とサイトアイコンに関するよくある質問
a Favicon? Why does the website need it とは何ですか？
FaviconFavicon（Favorites Icon）は browser tab、bookmark、history などに表示される小さな Web サイトアイコンで、brand identity の重要な要素です。
favicon がない Web サイトは次のように表示されます空白または既定の地球アイコン, site が未完成で professional でない印象になる可能性があります。一貫した favicon capability を用意すると：
- ブランド認知を強化 — 多数のタブが開いていても、ユーザーがひと目でサイトを識別できます
- プロフェッショナルな印象を強化 — Web サイト全体をより完成度が高く、信頼感のある見た目にします。
- ユーザー体験を改善 — ブックマーク、履歴、コレクションから見つけやすくなります
- デバイス間で一貫 — モバイルのホーム画面とデスクトップアプリケーションの両方で同じ識別情報を使用します
Favicon はほぼコストなしで高い効果が得られる Web 最適化項目です。正式公開する Web site では設定しておくべき要素です。
favicon.ico と PNG Favicon にはどのような違いがありますか？
この 2 つは異なる Webサイト用アイコン形式で、それぞれ異なる歴史と用途があります。
favicon.ico — 長い歴史を持つコンテナ形式で、1 ファイル内に 16×16、32×32、48×48 など複数サイズを格納できます。すべての主要ブラウザと古いシステムに対応しています。
PNG Favicon — transparency と高品質な scaling に対応する modern format で、 <link rel="icon"> 異なるサイズを指定します。
推奨プラクティス： 両方を使用。指定 favicon.ico 旧ブラウザーやルートリクエストにも対応しつつ、現代のブラウザーや端末には複数サイズの PNG を配信できます。このツールが生成する HTML には、実用的な組み合わせがあらかじめ含まれています。
Apple Touch Icon とは何ですか？
Apple Touch Iconapple-touch-icon は iOS Safari 専用の icon で、ユーザーが Web サイトを「ホーム画面に追加」したとき iPhone / iPad のホーム画面へ表示されます。標準サイズは 180×180。
主な機能：
- iOS が icon へ自動適用します。角丸、光沢、枠線エフェクト、そのため図自体をあらかじめ角丸にしないでください。
- 推奨不透明な背景, iOS が透明部分を黒で塗りつぶすのを防ぐため
- 図の内容は安全マージンを確保して中央揃え（約 10%）。システムが周辺部分をトリミングするためです
- Apple device は「ホーム画面に追加」した場合だけこの icon を使い、browser tab では通常の Favicon を使用します
HTML 内で <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 宣言。
a PWA icon? How is it different from regular Favicon とは何ですか？
PWA（Progressive Web App） installable Web application です。PWA では次の条件を満たす必要があります。 site.webmanifest Google が必須としている Listing declaration icon には次を含める必要があります 192×192 付き 512×512 2 組の図解。
通常の Favicon との違い：
- 大きいサイズ — 512×512：インストール画面や起動画面向け
- 異なる告知方法 — 経由
manifest.json（または .webmanifest）の宣言であり、HTML link ではありません - より汎用的 — installation icon、startup screen、taskbar icon など。
- Android Chrome 192×192 と 512×512 を使用；iOS manifest アイコンを無視して apple-touch-icon を使用
💡 このツールが生成した ZIP にはすでに site.webmanifest file を download し、Web site の root directory に直接配置します。
適切な Favicon デザインを選ぶには？
Favicon は非常に小さい（16×16 は 256 pixel）ため、design 時には特に次へ注意してください：
- 単純な単一形状を使用 — ロゴを縮小すると細部がつぶれやすいため、簡略化したグラフィックを使うことをおすすめします。
- 細い線を避ける — 細すぎる線は小サイズで消えることがあります。線幅は最低でも 2px 程度を推奨します。
- 高コントラスト配色 — ライト・ダーク両方の画面で視認できることを確認します
- 避ける単語 — 16×16 では文字を読めないため、図形や記号のみを使用します
- 透明背景を有効活用する — 一部の古い browser は未対応なので注意してください。
- 高解像度の元画像をアップロード — 512×512 以上を推奨します。各サイズはツール側で拡大・縮小して生成します
💡 クイックチェック： 16×16 まで縮小しても形状を明確に識別できるなら、優れた Favicon design です。
ブラウザー内で ICO アーカイブを生成できますか？
はい！このツールを使用できます 100% 純粋なフロントエンド技術 ブラウザー内で ICO バイナリ形式をその場で組み立てます：
- Canvas API を使用してさまざまなサイズの PNG 画像を生成します
- 複数サイズの PNG データを、file header と directory area を含む標準 ICO コンテナーへまとめます。
- 生成済み
favicon.icoWindows、macOS、および主要なブラウザーに完全対応しています
全工程サーバーは一切不要です, 画像データは端末の外へ送信されないため、未公開のデザイン案でも安心して処理できます。
image は server へ upload されますか？privacy は保護されますか？
まったくありません！Favicon Generator は 純粋なフロントエンドツール：
- ✅ 画像はブラウザー内だけで処理され、FileReader で読み込み、メモリ上で直接計算されます。
- ✅ image data は外部 server へ upload / transfer されません。
- ✅ 登録、login、software installation は不要です。
- ✅ 生成したすべての file（ICO、PNG、ZIP）は端末へ直接 download されます。
💡 つまり、機密設計や未公開のブランドアイコンでも、安心してこのツールで処理できます。
📖 Favicon 完全ガイド：ICO から PWA まで
Web site icon の type、format、best practice を詳しく学びます。
機能紹介
Favicon Generator は ToolHub が提供する無料のオンラインアイコン生成ツールです。必要なのは画像をアップロード, Web サイトに必要な Favicon ファイルをワンクリックでまとめて生成できます。PNG、JPG、JPEG、SVG、WebP の 5 形式に対応し、正方形クロップ、ズーム、移動機能を内蔵しているため、画像の最適な範囲を正確に選択できます。
選択したサイズに基づいて自動的に生成されます。 16×16～512×512 合計 9 size の PNG icon を生成でき、複数 size を同時にまとめられます favicon.ico、ZIP をパッケージ化（含む site.webmanifest), Web サイトへそのまま貼り付けられる HTML quote code を自動生成します。処理はすべてブラウザー内でローカル計算され、データを upload しません。
Favicon とは何ですか？
Favicon 「Favorites Icon」の略で、ブラウザーのタブ、ブックマーク、履歴、アドレスバーなどに表示される小さな Web サイトロゴを指します。ユーザーがサイトブランドに最初に触れる視覚要素の 1 つであり、Web サイトの完成度を示す要素でもあります。
Favicon は 1999 年、Internet Explorer 5 とともに導入された機能にさかのぼります。 favicon.ico という概念です。現在の Favicon は複数サイズ・複数形式を含む一式の仕組みへ発展し、デスクトップブラウザ、モバイル端末のホーム画面、PWA インストール、OS 統合など幅広い場面をカバーします。
💡 基本概念： 現代の Favicon は「1 つのファイル」ではなく、端末や用途ごとに最適なサイズと形式を使い分ける、計画されたアイコン群です。
Apple Touch Icon：iOS 専用のブランドアイデンティティ
Apple Touch Icon iOS と iPadOS 向けの Web サイトアイコンです。Safari の「Add to Home Screen」でサイトをホーム画面へ追加すると、システムがこのアイコンを読み込み、アプリのように表示します。標準サイズは 180×180。
一般的な Favicon と異なり、Apple Touch Icon には次の注意点があります：
- 自動整形 — iOS はアイコンへ自動的に角丸と視覚効果を加えるため、元画像にあらかじめ角丸を付けないでください
- 安全余裕 — 画像外周のおよそ10%はシステムによって切り取られたり覆われたりする可能性があるため、重要な内容は中央へ配置してください。
- 不透明な背景 — iOS では透明部分が黒で埋まる場合があります。opaque color または Web background color の使用を推奨します。
- 独立宣言 — 経由
<link rel="apple-touch-icon">告知用。通常の Favicon とは別に設定します
PWA Icon：application installation に使う icon system
Progressive Web App（PWA） を通じて site.webmanifest manifest ファイルはインストールアイコンを含むアプリケーションのメタデータを宣言します。Google のインストール要件では明示的に 192×192（ホームページアイコン）と 512×512（インストール画面とスプラッシュ画面）2 セットのサイズ。
完全な PWA アイコン設定には以下が含まれます：
android-chrome-192x192.png— Android ホーム画面アイコンandroid-chrome-512x512.png— Android のインストール画面とスプラッシュ画面site.webmanifest— icon、name、theme color、display mode を宣言します。
このツールが生成する ZIP には必要なファイルがすべて含まれているため、展開して Web サイトのルートディレクトリへ配置すればそのまま利用できます。
Favicon のベストプラクティス
高解像度のオリジナル画像を使用します
アップロードを推奨 最低 512×512 高解像度の元画像を使うのが理想です。大きな画像を小さく縮小する方が高品質になりやすく、逆に小さな画像を拡大するとぼやけます。ズーム機能を使えば、拡大表示しながら最適な切り抜き範囲を選択できます。
小さいサイズ向けに特化した設計
16×16 の Favicon はわずか 256 pixels しかなく、このサイズでは細部が失われます。非常に小さく表示しても判別できるデザインにし、必要なら小サイズ向けに簡略版を用意してください。
完全なサイズ組み合わせを利用できます
完全な Favicon パッケージには次を含めます：
favicon.ico（16、32、48 などを含む）- ルートと旧ブラウザ向けfavicon-32.png— モダンブラウザのページネーションapple-touch-icon.png（180×180）— iOS ホーム画面android-chrome-192x192.png付き512x512.png— PWA
すべてのシナリオをテスト
生成後は、desktop browser のタブ、mobile browser、bookmark 追加、mobile home screen への追加、PWA install 画面など、さまざまな表示場面で必ず確認してください。このツールの即時プレビュー この機能は、browser pagination、bookmark、スマートフォンの home screen という 3 つの場面をシミュレーションし、実際に起きる前に表示結果を確認できます。
ブラウザー互換性
このツールは Canvas API、Blob、FileReader などの現代的な Web 標準に基づいて開発され、主要ブラウザの最新バージョンに対応しています。
- Google Chrome 60+
- Mozilla Firefox 60+
- Apple Safari 14+
- Microsoft Edge 60+
- Opera 60+
最適な利用体験のため、最新 browser version の利用を推奨します。
プライバシー保護
ToolHub はデータのプライバシーを重視しています。Favicon Generator では 100% 純フロントエンド構成：画像は browser の local FileReader で読み込み、Canvas API で処理します。すべての操作は端末上で完結します。image data が外部 server へ upload されることはありません。。upload した image content を保存、分析、共有することはありません。安心して利用できます。