使い方
- アイコンの元を選びます。画像か、背景色の上の文字か絵文字です。
- 画像を選ぶか、文字または絵文字を入力します。背景色と文字の色を設定します。
- テーマの色とサイト名を設定し、アイコンを作るを押します。
- ZIPをダウンロードします。ファイルをサイトの最上位のフォルダに置き、HTMLのタグを各ページの head に貼り付けます。
ファイルとそのサイズ
favicon.ico は、16、32、48ピクセルの3つの画像を含み、ブラウザのタブ、ブックマーク、Windowsがそれぞれ合うサイズを見つけられます。apple-touch-icon.png は、iPhone や iPad のホーム画面用の180ピクセルです。android-chrome-192x192.png と android-chrome-512x512.png は、マニフェストに挙げられた Android のアイコンです。site.webmanifest は、アプリの名前と色を定めます。
透明部分と背景
ファビコンは透明な部分を残すので、ロゴはブラウザが表示する色の上に載ります。AppleとAndroidのアイコンは背景色で塗りつぶされます。Appleのタッチアイコンの透明な角は、iPhone と iPad では黒く表示されるからです。
ファイルを置く場所
ファイルはウェブサイトの最上位のフォルダに置き、/favicon.ico と /site.webmanifest のアドレスで開けるようにしてください。ブラウザはアイコンを長く保存しておくため、変更後に新しいアイコンを見るには、リンクにバージョン番号を付けるか、キャッシュを消してください。
例：濃い青の上に文字「FT」
背景色の上の文字か絵文字を選び、FT と入力して、濃い青の背景のままにします。ツールは、角の丸い正方形の中央に文字を描き、正方形に合うように大きさを整えるので、16ピクセルのファビコンでも読めます。
よくある質問
ファビコンを作るとき、画像はアップロードされますか？
いいえ。アイコンはブラウザの中で描かれ、端末の中でZIPファイルにまとめられます。ページを読み込んだ後にインターネット接続を切り、アイコン一式を作って確かめられます。
タブのアイコンには、ブラウザはどのファイルを使いますか？
ブラウザは favicon.ico を使うか、ページ内で PNG や SVG のファイルを指すリンクタグを使います。このツールが作るタグは favicon.ico と Apple のアイコンを指定するので、どのブラウザでも適切なサイズのアイコンが見つかります。
16ピクセルで、ファビコンがぼやけて見えるのはなぜですか？
小さいアイコンは画素がとても少ないため、細い線や小さな文字がぼやけます。太い線の単純な形か、多くても2文字を使い、ICOファイルの16と32ピクセルの画像を確かめてください。
Appleのアイコンになぜ背景色が必要なのですか？
透明な角を持つAppleのタッチアイコンは、iPhone と iPad でその角が黒く表示されます。ツールは、選んだ背景色で正方形全体を塗りつぶします。
ページの head には何を貼り付けますか？
HTMLのタグの欄にある4行を、各ページの head 要素に貼り付けてください。favicon.ico、Appleのアイコン、マニフェスト、テーマの色を結びます。
ウェブアプリのマニフェストは、どう使われますか？
site.webmanifest をサイトの最上位のフォルダに置いてください。訪問者がサイトをアプリとしてインストールするとき、ブラウザがそれを読みます。アプリの名前、短い名前、色を定め、2つのAndroidのアイコンを挙げます。
出典
- MDN（英語）: link 要素（アイコンとマニフェストのリンクを含む）
- MDN（英語）: ウェブアプリのマニフェスト
- Microsoft Learn（英語）: アイコン、ICOファイルのICONDIRとICONDIRENTRYの構造
数値と文章の最終確認日：2026年11月10日火曜日。