画像から favicon.ico を作成
1枚の画像から、複数サイズ入りの .ico ファビコンを作成します。
ファビコン作成ツールを使うと、JPG、PNG、WEBP、GIF、BMP の画像から favicon.ico を作成できます。ロゴやアイコンをアップロードし、16x16 から 256x256 までのサイズにチェックを入れてダウンロードするだけです。選んだサイズはすべて1つの ICO ファイルにまとめられ、ブラウザや OS が適切なサイズを選んで使います。ファビコンはとても小さく表示されるため、元画像にはシンプルな形の正方形の画像を使うのがおすすめです。
ファビコンの作り方
20 MiB までの画像をアップロードし、含めたいサイズを選んで送信します。選べるサイズは 16、32、48、64、128、256 ピクセルで、初期状態ではすべて選択されています。チェックを入れたすべてのサイズを含んだ favicon.ico という1つのファイルをダウンロードできます。
どのサイズを含めるべきか
ブラウザのタブでは 16x16 と 32x32 が使われます。Windows のショートカットや一部のブックマークバーでは 48x48 以上のサイズが使われます。6サイズすべてを含めておけば安心で、ファイルサイズも小さく収まります。チェックをすべて外した場合は、6サイズすべてを含める動作になります。PNG の透明部分は ICO の中でも維持されます。
元画像の準備
正方形で、できれば 256 × 256 ピクセル以上の画像を用意し、細かい文字を避けて太くシンプルなマークにしてください。16 ピクセルでは細部が見えなくなります。正方形でない画像は歪むことがあるため、先に正方形に切り抜いておきましょう。ダークモードでも明るいテーマでもきれいに表示したい場合は、背景が透明な PNG を作るのがおすすめです。
サイトでの使い方
favicon.ico をサイトのルートにアップロードし、head 内に /favicon.ico を指す rel=icon の link タグを追加します。このツールが出力するのは ICO のみで、Apple タッチアイコンや Web マニフェストは作成されません。元画像を整えるには「画像サイズを変更」を、SVG から書き出した PNG を別形式にするには「画像変換」を使えます。
よくある質問
ファビコンにはどんな画像を使えばよいですか？
正方形のロゴやアイコンで、できれば 256 × 256 ピクセル以上、形がシンプルでコントラストがはっきりしたものがおすすめです。細かい画像や小さな文字は、ブラウザのタブの 16 ピクセル表示では読めなくなります。
ファビコンにはどのサイズが含まれますか？
16、32、48、64、128、256 ピクセルの正方形を含められます。初期状態ではすべて選択されており、1つの favicon.ico にまとめられるため、ブラウザや OS が必要なサイズを自動的に選んで使います。
PNG や Apple タッチアイコンも作成できますか？
できません。出力は favicon.ico の1ファイルのみです。特定サイズの PNG が必要な場合は「画像サイズを変更」を使ってください。SVG が元の場合は、「SVG 変換」で好きな幅の PNG にできます。
ファビコンでも透明部分は維持されますか？
はい。ICO を書き出す前に画像を RGBA に変換するため、PNG の透明な部分は透明のまま残ります。JPG には透明という概念がないため、単色の背景が付いた状態になります。
favicon.ico はサイトのどこに置けばよいですか？
サイトのルートフォルダに置き、ページの head 内で /favicon.ico を指す rel=icon のリンクを指定します。ブラウザは初期状態でこのパスも確認するため、タグがなくても表示される場合があります。