ファビコン作成ツール

ファビコンの作り方

1. ロゴやアイコンを追加します。 PNG・JPG・SVGに対応しています。シンプルな形の正方形の画像がいちばんきれいに仕上がります。
2. 余白、角の形、背景を調整します。 アイコンのまわりに余白を入れたり、角を丸めたりできます。透過背景に暗い色のロゴなら、背景を塗りつぶしてください。
3. ブラウザタブでの見え方を確認します。 プレビューでは、実際の16 pxのサイズで、明るいタブと暗いタブに表示したアイコンを確認できます。
4. ZIPをダウンロードし、HTMLを貼り付けます。 ファイルをサイトのルートにアップロードし、タグを<head>に貼り付けます。

ファビコン作成ツールで作られるファイル

192 pxと512 pxのアイコンは、web.devにあるWebアプリマニフェストの例にならっています。iOSは透明な部分を黒で表示するため、Apple Touch Iconには必ず単色の背景をつけます。

画像やPNGからfaviconを作成する

手元にあるいちばんきれいなロゴを使ってください。ファビコンはタブの中で16×16ピクセルで表示されるため、細かい文字や細い線は消えてしまいます。シンボルマークや頭文字だけを使うブランドも多くあります。元の画像が正方形でない場合は、透明な余白をつけて正方形のキャンバスの中央に配置します。

ロゴが端に接しているときは余白のスライダーを使い、透過背景に暗い色のロゴなら背景を塗りつぶしてください。ダークモードのタブでも見えるようになります。

SVGからファビコンを作成する

SVGをドロップすると、一式にicon.svgとして含まれ、HTMLにも追加のアイコンとして記述されます。SVGファビコンに対応したブラウザはどのサイズでもそれを使い、対応していないブラウザはfavicon.icoを使います。PNGのアイコンはベクターから描くので、くっきり仕上がります。

Google検索に表示されるファビコン

Googleは、検索結果にサイトのファビコンを表示することがあります。ガイドラインでは8×8ピクセル以上の正方形の画像が求められ、48×48ピクセルより大きいものが推奨されています（Google 検索セントラル）。favicon.icoに含まれる48 pxと、192 pxのアイコンでこれを満たせます。詳しくはファビコンのサイズのガイドをご覧ください。

ファビコン作成のよくある質問