ロゴからファビコンを作成
WordPress・Next.js・React・HTMLサイトに
ブラウザーのタブ、iPhoneのホーム画面、Android・PWA向けのアイコンをまとめて作成します。変換はブラウザー内で行われ、画像はサーバーに送信されません。
ロゴ画像を選択
PNG・JPG・SVG／10 MBまで
ここに画像をドラッグ＆ドロップ
必要なファビコンをまとめて用意
複数サイズのICOとPNGを作成し、対象ブラウザで確認できます。
元画像から各サイズを作成
各画像は元のロゴから作成します。16 × 16 pxでも見やすい、シンプルで輪郭のはっきりした画像がおすすめです。
PNG・JPG・SVGに対応
ビットマップ・ベクターを読み込み、ブラウザが各サイズのPNGに変換します。元画像の解像度と細部によって結果が変わります。
サイト用アイコンを一括出力
16・32・48 pxを含むfavicon.ico、180 pxのApple Touch Icon、192・512 pxのAndroid用PNG、150 pxのMicrosoft Tileを作成します。
暗い背景でも見やすく
このツールでは同じ元画像を各サイズに縮小します。SVGの明暗色を設定したい場合は、SVG Faviconを使ってください。
CMSやフレームワークで利用
画像とHTMLコードをダウンロードできます。WordPressやNext.jsでは、各プラットフォームの設定方法に合わせて導入してください。
画像をサーバーに送信しません
このツールはブラウザー内で変換します。選択したロゴ画像をサーバーにアップロードする必要はありません。
ファビコンの作り方
画像の選択からダウンロードまで、3ステップ。
画像を選ぶ
PNG・JPG・SVGのロゴを選択します。十分な解像度の正方形の画像がおすすめです。
ファビコンを作成する
「ファビコンを作成」を押し、各サイズのプレビューを確認します。
ダウンロードして設定する
一式または個別の画像をダウンロードし、HTMLタグをサイトに追加します。
作成方法による違い
入力と必要なファイルに合わせて選んでください。
| 機能 | このツール | PNG出力のみのツール | 手作業で編集 |
|---|---|---|---|
| ブラウザー内で処理 | ツールにより異なります | 実装により異なります | |
| 複数サイズの一括作成 | ツールにより異なります | 実装により異なります | |
| 複数解像度を含むICO | ツールにより異なります | 実装により異なります | |
| Apple Touch Icon | ツールにより異なります | 実装により異なります | |
| PWA・Android用アイコン | ツールにより異なります | 実装により異なります | |
| ダークモードの設定 | ツールにより異なります | 実装により異なります | |
| 画像をサーバーに送信せず処理 | ツールにより異なります | 実装により異なります | |
| 無料で利用 | ツールにより異なります | 実装により異なります |
チェックはこのツールの現在の出力を示します。同じ元画像を縮小するため、テーマに連動するSVGは作成しません。他の製品や手作業の対応範囲は実装次第であり、一律には評価しません。
既存画像から複数サイズのICO・PNGを作成します。基本的なmanifestと設置ガイドも含まれます。maskable調整とSVG配色は専用ツールで行います。
ベクター画像のライト・ダーク配色を設定するならSVG Faviconを使います。対象のブラウザや表示場所に合わせてPNG・ICOも用意してください。
Favicon Previewでタブ、検索結果、ホーム画面の模擬表示を比較します。公開処理やGoogle・実機での表示を保証する機能ではありません。
ファビコンの設定を詳しく知りたい方へ ブラウザー向けファビコン設定ガイド
ファビコンのサイズと用途
どの画像をどこに使うかを確認できます。
ブラウザーのタブとスマートフォンのホーム画面では、必要な画像が異なります。小さな画像1枚で兼用せず、用途に合ったサイズを用意しましょう。
| サイズ | ファイル | 主な用途 |
|---|---|---|
| 16x16 | favicon.ico | ブラウザーのタブ |
| 32x32 | favicon.ico | ブックマーク・タスクバー |
| 48x48 | favicon.ico | Windowsのアイコン・ショートカット |
| 180x180 | apple-touch-icon.png | iPhone・iPadのホーム画面 |
| 192x192 | android-chrome-192x192.png | Android・PWA用アイコン |
| 512x512 | android-chrome-512x512.png | 高解像度のPWA用アイコン |
favicon.icoには16・32・48 pxの画像が入ります。ブラウザーやOSが用途に合ったサイズを選びます。
ダウンロードできるファイル
サイト用アイコンと、そのファイルを参照するHTMLコードを用意します。
favicon.ico
16・32・48 pxを1つにまとめたファイル。タブ、ブックマーク、ショートカットなどに使用します。
apple-touch-icon.png
180 × 180 pxのPNG。iPhone・iPadのホーム画面に追加したサイトのアイコンに使用します。
android-chrome-192x192.png
192 × 192 pxのPNG。AndroidやPWAのインストール用アイコンに使用します。
android-chrome-512x512.png
512 × 512 pxのPNG。PWAで高解像度の画像が必要な場面に使用します。
HTMLコード
HTMLのhead内に追加するタグ。アイコン画像のパスを参照できます。
HTMLにファビコンを設定する
画像をサイトの公開ディレクトリのルートに置き、次のタグをhead内に追加してください。別のフォルダーに置く場合はパスを変更します。
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />ファビコンについてのよくある質問
元画像の選び方、設定方法、アイコンが表示されないときの確認事項をまとめました。
同じ手順で試せる出力例
1つの元画像から3サイズのfaviconへ
1024pxのSVGをFavicon Generatorの標準設定で書き出しました。右は実際の32px PNGを実寸で表示しています。ZIPには16・32・48pxのPNG、複数サイズのfavicon.ico、その他のアイコンと設置ガイドが含まれます。
16 / 32 / 48 px · ICO + PNG
タブで使う前に、16pxでもFの切り抜きが読めるか確認してください。大きい画像が鮮明でも、縮小で細部が消えることがあります。この出力には別のダークテーマ用デザインはありません。
このファイルは、掲載したオリジナルSVGを使い、既存のブラウザツールから書き出したものです。ログインせずにZIPの中身を確認できます。プレビューの丸い形状は模擬表示で、PNG自体に焼き込まれていません。
設定方法を詳しく見る
ブラウザー向けファビコン設定ガイド