正方形の画像をアップロードし、ファビコンパッケージを生成をクリックしてZIPをダウンロードします。生成ツールは1枚の元画像からfavicon.ico、PNGファビコンサイズ、Apple Touch Icon、Android Chromeアイコン、マニフェスト、HTMLコードを作成します。最良の結果には、512x512 px以上のロゴから始めてください。
ICO、PNG、SVGアイコン用の無料ファビコン作成ツール
1枚の画像から完全なファビコンパッケージを作成。favicon.ico、PNGアイコン、Apple Touch Icon、Android Chromeアイコン、Webマニフェスト、HTMLコードを取得できます。
このファビコン作成ツールが生成するもの
現在のファビコンは、もはや小さな画像1つだけではありません。ブラウザ、固定タブ、ブックマーク、モバイルのホーム画面、Androidランチャーは、それぞれ異なるファイルを要求することがあります。このファビコン作成ツールは、1枚の元画像から本番環境でよく使う一式を作成するため、各サイズを手動で書き出す必要がありません。
| 出力ファイル | サイズまたは内容 | 使用される場所 |
|---|---|---|
| favicon.ico | 16x16, 32x32, 48x48 | 従来ブラウザのフォールバックとルートの /favicon.ico 自動検出 |
| favicon-16x16.png | 16x16 | ブラウザタブやコンパクトなインターフェース |
| favicon-32x32.png | 32x32 | 高DPIタブとブックマーク |
| apple-touch-icon.png | 180x180 | iPhoneとiPadのホーム画面ショートカット |
| android-chrome-192x192.png | 192x192 | Android ChromeとWebアプリマニフェスト |
| android-chrome-512x512.png | 512x512 | 高解像度のAndroidとPWAアイコン |
| manifest.json | Webアプリのメタデータ | プログレッシブWebアプリのアイコン参照 |
| HTMLスニペット | <link>タグ | ページの<head>にコピー |
このツールはPNG、JPG、SVG、WebP、GIFのアップロードに対応しています。最もきれいな結果を得るには、512x512 px以上の正方形画像から始めてください。ファビコンは16x16や32x32ピクセルで表示されることが多いため、写真全体よりも透明背景のロゴのほうが通常はうまく機能します。
アップロードされたファイルはサーバー側で処理され、24時間以内に削除されます。
ファビコンの作り方：ステップ別ガイド
1
ステップ1：シンプルな元画像を用意する
正方形のロゴ、マーク、文字、シンボルを使います。元画像が正方形でない場合は、重要な形が中央に残るよう先に切り抜いてください。512x512 pxまたは1024x1024 pxの元画像なら、小さなファビコンサイズを作成するときも拡大せずに十分なディテールを使えます。
2
ステップ2：画像をアップロードする
ファイルをアップロードエリアへドラッグするか、画像を選択をクリックします。PNG、JPG、SVG、WebP、GIFからfaviconファイルを作成できます。PNGとSVGはエッジを鮮明に保ち、透明度も維持できるため、ロゴには通常最適です。
3
ステップ3：faviconパッケージを生成する
ファビコンパッケージを生成をクリックします。ツールはfavicon.icoファイル、PNGアイコンサイズ、Apple Touch Icon、Android Chromeアイコン、マニフェスト、HTMLコードを含むZIPを作成します。
4
ステップ4：ダウンロードして設置する
ZIPをダウンロードし、生成されたファイルをWebサイトへアップロードして、HTMLコードをページの<head>にコピーします。サイトに古いファビコンがある場合は、ブラウザキャッシュを削除するか、?v=2のようなバージョンクエリを追加して、ブラウザに新しいファイルを取得させます。
PNGからファビコン、SVGからファビコン、ICO出力
元になる形式によって、結果は少しずつ変わります。最適な選択は、どのようなアートワークから始めるかによって決まります。
| 元形式 | 最適な用途 | メモ |
|---|---|---|
| PNG | 透明度のあるロゴ | PNGからファビコンを作る場合の最も汎用的な元形式 |
| SVG | ベクターロゴとシンプルなマーク | 鮮明なエッジに適しており、生成ツールはラスタライズされたファビコンサイズを書き出します |
| JPG | 写真または透明でないアートワーク | 使用できますが、背景もアイコンの一部になります |
| WebP | 最適化済みのWeb画像 | 元素材がすでにWebPの場合に便利です |
| GIF | シンプルなアニメーションまたは古い素材 | 生成されるファビコンパッケージは、実用的な静的ファビコンファイル向けに設計されています |
SVGからファビコン
多くのデザイナーはベクターアートから作業を始めます。SVGは、クリーンなパス、フラットカラー、シンプルな幾何学的形状のロゴに最適です。アップロード後、ファビコン作成ツールはサイトが実際に必要とするブラウザ対応のラスターファイル（favicon.icoやPNGサイズを含む）を書き出します。
PNGからファビコン
PNGはサイト運営者にとって最も一般的な元形式です。明るいブラウザインターフェースと暗いブラウザインターフェースの両方でファビコンの形をきれいに見せたい場合は、透明PNGを使ってください。Webサイト用の完全なパッケージではなく、単一のWindows風ICOファイルだけが必要な場合は、PNGをICOに変換 も使用できます。
favicon.ico生成ツール
生成されるfavicon.icoには、16x16、32x32、48x48の画像が1つのファイルに含まれます。これは重要です。古いブラウザや多くのWebサーバーは、現代的なPNGやマニフェストリンクを提供している場合でも、/favicon.icoを自動的に探すためです。
HTMLにfaviconを追加する方法
ファビコンパッケージを生成したら、ファイルをサイトの公開ルートまたは静的アセットフォルダへアップロードします。その後、生成されたHTMLコードをドキュメントの<head>セクション内に配置します。
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="/manifest.json">Webサイトでフレームワークを使っている場合は、静的な公開アセットを配信するフォルダにこれらのファイルを置きます：
| プラットフォーム | 一般的な場所 |
|---|---|
| 通常のHTMLサイト | index.htmlと同じWebサイトのルート |
| Next.js | public/ |
| ViteまたはReact | public/ |
| WordPress | 設定に応じて、テーマのアセットフォルダまたはサイトルート |
| Shopify | テーマアセットに置き、そのアセットURLを参照 |
正確なパスはプロジェクトによって変わるため、hrefの値は実際にファイルがホストされている場所に合わせてください。ファビコンファイルで404が出る場合、通常はアイコンパッケージが壊れているのではなく、パスが間違っています。
鮮明なWebサイトファビコンにするコツ
🔍
16x16でも読めるデザインにする
ブラウザタブのサイズでは、細かい文字、グラデーション、細い線、詳細な写真はたいてい見えなくなります。シンプルな形、1文字、高コントラストのロゴマークは、ブランド名まで含めた完全なロゴより認識しやすくなります。
◐
透明度を意図的に使う
透明背景は、ブラウザタブ、ブックマーク、モバイルショートカット表示になじみやすくします。元画像の背後に白い四角がある場合、その四角は通常、生成されたファイルにも残ります。
◑
明るいテーマと暗いテーマでテストする
ファビコンはさまざまなインターフェース色の上に表示されます。暗いアイコンは暗いタブバーで消え、淡いアイコンは明るい背景で弱く見えることがあります。ロゴが特定の色に依存する場合は、控えめな輪郭線を加えるか、ファビコン用により太いバージョンを使うことを検討してください。
↙
拡大表示だけで判断しない
必ず実際の16x16と32x32サイズでアイコンをプレビューしてください。512x512では洗練されて見えるデザインも、縮小すると視覚的なノイズになることがあります。小さいバージョンが不明瞭な場合は、最終パッケージを生成する前に元画像を簡略化してください。
よくある用途
新しいWebサイトの公開
公開前に完全なパッケージを生成し、HTMLコードを追加します
リブランディング
古いファビコンファイルをすべて置き換え、キャッシュ対策用のバージョンを更新します
ブログまたはポートフォリオ
完全なワードマークではなく、シンプルなモノグラムやロゴマークを使います
PWAまたはインストール可能なサイト
ZIP内のマニフェストとAndroid Chromeアイコンを保持します
iPhoneホーム画面アイコン
180x180 の Apple Touch Icon を使います
アプリアイコンプロジェクト
iOSとAndroidのアプリストア向けアイコン一式が必要な場合は、アプリアイコン作成ツール を使用してください
このページはWebサイト用ファビコンパッケージが必要な場合に最適です。XcodeやAndroid Studioフォルダを含むネイティブアプリプロジェクトでは、アプリアイコン生成ツールのほうが適しています。
よくある質問
Webサイト用のファビコンファイルを作成するには、シンプルな正方形画像を用意し、ファビコンパッケージを生成し、ファイルをサイトの公開フォルダへアップロードして、生成された<link>タグをページの<head>に配置します。キャッシュをクリアしたあと、ブラウザタブでサイトをテストしてください。
これは、1枚の画像から一般的なWebサイト用アイコンファイルを作成する無料favicon作成ツールです。PNG、JPG、SVG、WebP、GIFのアップロードに対応し、小さなアイコン1つだけでなくZIPパッケージを提供します。
PNGは透明度と鮮明なエッジをサポートするため、ファビコン生成の元形式として非常に優れています。透明PNGロゴをアップロードすると、favicon.ico、16x16 PNG、32x32 PNG、Apple Touch Icon、Android Chromeアイコン、マニフェストを生成できます。
はい。SVGロゴをアップロードすると、ツールはブラウザやデバイス向けの実用的なfaviconファイルを書き出します。生成パッケージにはラスタライズされたPNGサイズとfavicon.icoが含まれます。すべてのfavicon表示でSVGだけに頼るべきではないため便利です。
このツールは16x16、32x32、48x48サイズを含むfavicon.icoファイルを生成します。favicon.icoを含めておくことは今でも有用です。ブラウザ、クローラー、レガシーシステムは/favicon.icoを自動的に要求することが多いためです。
生成されたファイルをWebサイトの公開フォルダへアップロードし、ファビコンのHTMLコードをページの<head>にコピーします。最低限、favicon.ico、16x16 PNG、32x32 PNG、Apple Touch Icon、そしてファイルがある場合はmanifest.jsonリンクを含めてください。
ICOのフォールバックとして<link rel="icon" href="/favicon.ico">を使い、その後に現代的なデバイス向けのPNGとApple Touch Icon のリンクを追加します。すべてのhrefパスがサーバー上の実際のファイル場所と一致していることを確認してください。
完全なファビコンHTML設定には通常、favicon.ico、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png、manifest.jsonへのリンクが含まれます。生成ツールはコピーして使えるコードを提供するため、これらのタグを手書きする必要はありません。
複数サイズを使ってください。パッケージにはブラウザインターフェース向けの16x16と32x32 PNGファイル、16x16、32x32、48x48を含むマルチサイズfavicon.ico、180x180 の Apple Touch Icon、さらに192x192と512x512のAndroidアイコンが含まれます。512x512 px以上の元画像から始めると、最もきれいに縮小できます。