ロゴからファビコンを作成
WordPress・Next.js・React・HTMLサイトに
ブラウザーのタブ、iPhoneのホーム画面、Android・PWA向けのアイコンをまとめて作成します。変換はブラウザー内で行われ、画像はサーバーに送信されません。
ロゴ画像を選択
PNG・JPG・SVG／10 MBまで
ここに画像をドラッグ＆ドロップ
必要なファビコンをまとめて用意
ブラウザーやスマートフォン向けの画像を、サイズごとに作り直す手間を減らします。
元画像から各サイズを作成
各画像は元のロゴから作成します。16 × 16 pxでも見やすい、シンプルで輪郭のはっきりした画像がおすすめです。
PNG・JPG・SVGに対応
お手元の画像をそのまま使用できます。ベクター画像のSVGは、複数サイズの書き出しに適しています。
サイト用アイコンを一括出力
16・32・48 pxを含むfavicon.ico、180 pxのApple Touch Icon、192・512 pxのAndroid用PNG、150 pxのMicrosoft Tileを作成します。
暗い背景でも見やすく
明るいタブと暗いタブの両方で、ロゴのコントラストを確認してください。テーマ別のアイコンにはSVGファビコン作成ツールも利用できます。
CMSやフレームワークで利用
画像とHTMLコードをダウンロードできます。WordPressやNext.jsでは、各プラットフォームの設定方法に合わせて導入してください。
画像をサーバーに送信しません
このツールはブラウザー内で変換します。選択したロゴ画像をサーバーにアップロードする必要はありません。
ファビコンの作り方
画像の選択からダウンロードまで、3ステップ。
画像を選ぶ
PNG・JPG・SVGのロゴを選択します。十分な解像度の正方形の画像がおすすめです。
ファビコンを作成する
「ファビコンを作成」を押し、各サイズのプレビューを確認します。
ダウンロードして設定する
一式または個別の画像をダウンロードし、HTMLタグをサイトに追加します。
作成方法による違い
ブラウザー内での一括作成、PNGのみの書き出し、手作業での編集を比較します。
| 機能 | このツール | PNG出力のみのツール | 手作業で編集 |
|---|---|---|---|
| ブラウザー内で処理 | |||
| 複数サイズの一括作成 | |||
| 複数解像度を含むICO | |||
| Apple Touch Icon | |||
| PWA・Android用アイコン | |||
| ダークモードの設定 | |||
| 画像をサーバーに送信せず処理 | |||
| 無料で利用 |
チェックは対応を示します。非対応の項目は、別の作業やツールが必要です。
一般的な作業方法を比較しています。他のツールの機能は製品によって異なります。
ファビコンの設定を詳しく知りたい方へ ブラウザー向けファビコン設定ガイド(英語)
ファビコンのサイズと用途
どの画像をどこに使うかを確認できます。
ブラウザーのタブとスマートフォンのホーム画面では、必要な画像が異なります。小さな画像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" />ファビコンについてのよくある質問
元画像の選び方、設定方法、アイコンが表示されないときの確認事項をまとめました。
設定方法を詳しく見る
ブラウザー向けファビコン設定ガイド(英語)