ブラウザのタブ、ブックマーク、履歴に表示される小さなアイコンが favicon です。良い favicon はサイトを完成された印象にし、たくさん開いたタブの中でも見つけやすくします。
favicon とは何か
慣例として /favicon.ico に置かれ、.ico は1 つのファイルに複数サイズを格納できるコンテナです——一般的には 16×16・32×32・48×48。ブラウザが場面(タブ・ブックマーク・タスクバー)に応じて最適なサイズを選びます。だからこそ本物の .ico は 1 枚の PNG より優れています。1 ファイルでどのサイズでも鮮明です。
正方形の画像から始める
- 正方形の元画像(できれば 256×256 以上)を使います。正方形でないと切り取られたり余白が付いたりします。
- シンプルに——16px では細部が消えます。1 文字・マーク・太い形が最も読みやすいです。
- 透過 PNG がよく合います。
.ico を作る——アップロードなし
ロゴはあなたのブランドです。不明なサーバーに送る必要はありません。以下はすべてブラウザ内で動作します:
- PNG を ICO に変換 / Favicon ジェネレーター:PNG をドロップして複数サイズ入りの
favicon.icoを取得。
サイトに追加する
favicon.ico をサイトのルートに置き、ページの head 内で参照します:
<link rel="icon" href="/favicon.ico" sizes="any">最新のブラウザは PNG アイコンも受け付け、両方を配置するサイトも多いです。アイコンが更新されない場合はスーパーリロードを——ブラウザは favicon を強くキャッシュします。
固定サイズのアイコンではなく拡大できるロゴが欲しい場合は、PNG を SVG に変換する方法をご覧ください。