faviconを作る
ブラウザのタブに出る小さなアイコンを用意します。作業自体は数分で終わりますが、図案の選び方で仕上がりが決まります——ロゴをそのまま縮めると、多くの場合タブでは何も読み取れません。理由を先に押さえてから手順に進みます。作業はブラウザの中だけで完結し、画像はどこにも送信されません。
faviconは1枚の画像ではなく、詰め合わせです
faviconが表示される場所は1つではありません。場所ごとに必要な大きさが違うため、複数のサイズを1つのファイル（.ico）にまとめて置きます。ブラウザは、その中から表示する場所に合う大きさを選びます。
| 使われる場所 | 必要な大きさの目安 |
|---|---|
| ブラウザのタブ | 16px |
| ブックマーク・履歴の一覧 | 32px |
| Windowsのタスクバー・ショートカット | 48px |
| 高解像度画面・タイル表示 | 256px |
PNGを1枚置くだけでも動く場面はありますが、その場合はブラウザ側が縮小します。縮小の仕方は自分では選べません。16px用の見え方を自分で決めたいなら、サイズごとの画像を用意して詰め合わせるのが確実です。
16pxに縮めると、何が起きるか
「ロゴをそのまま使えばいい」と考えがちですが、16pxは漢字1文字を判読できる大きさではありません。実際に2つの図案を16pxまで縮めて比べました。左は細い線と小さな文字で組んだ図案、右は塗りと大きな1文字で組んだ図案です。
輪郭が途切れ、文字は消えた
形は残る。ただし文字は読めない
画素のばらつき（明暗の標準偏差）を測ると、細い図案は27.8、太い図案は100.5でした。数字が小さいほど、画面上では「ぼんやりした灰色の塊」に近づきます。細い図案は、輪郭も文字も溶けて消えています。
重要なのは、太い図案でも文字は読めていないことです。16pxで文字を読ませるのは無理だと考えて、形と色で見分けさせる設計に切り替えてください。図案の条件は3つに絞れます。
| 条件 | 理由 |
|---|---|
| 線ではなく塗りで作る | 細い線は縮小で消える。実測で輪郭が途切れた |
| 要素は1つに絞る | 16pxに収まる情報量は、図形1つか文字1つが限界 |
| 背景とはっきり色が違う | ブラウザのタブは白と濃色の両方があり、淡い色は背景に溶ける |
作る手順
-
正方形の元画像を用意する
512px前後の正方形で作ります。長方形のロゴをそのまま使うと、縮小時に余白が入って中身がさらに小さくなります。ロゴの一部（シンボルだけ・頭文字1つ）を切り出して正方形に組み直すほうが、16pxでの見え方は良くなります。
元画像に余白を入れないでください。周囲の余白は、そのまま表示領域の損失になります。
-
複数サイズを1つのICOにまとめる
用意した画像を読み込ませると、16・32・48・256pxを1つの
ICO 変換をひらく → 画像 リサイズをひらく →.icoにまとめます。それぞれのサイズは元画像から個別に縮小されるので、ブラウザ任せの縮小より仕上がりが安定します。 -
サイトに置いて、HTMLから指す
できた
favicon.icoをサイトのいちばん上の階層に置きます。多くのブラウザは/favicon.icoを自動で探しに来るため、置くだけで表示されることもあります。確実にするには、HTMLの<head>に1行書きます。<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
2行目はiPhoneやiPadでホーム画面に追加されたときのアイコンです。180×180pxのPNGを別に用意します。ICOには含まれないため、こちらは別ファイルになります。
-
更新しても変わらないときは
faviconはブラウザに強くキャッシュされます。差し替えたのに古いままなら、
/favicon.ico?v=2のように名前を変えて指すか、ブラウザのキャッシュを消して確認してください。サイトを見に来る人にも同じことが起きるため、更新の反映には時間差があります。
よくある質問
画像はどこかに送られますか？
送られません。読み込みから変換・ダウンロードまで、すべてブラウザの中だけで処理します。未公開のロゴをアップロードせずにfaviconを作れます。
PNGを1枚置くだけではだめですか？
動く場面もあります。ただしその場合、16pxへの縮小はブラウザ任せになります。細部が潰れたときに手の打ちようがないため、16px用の見え方を自分で確認したいなら、サイズごとに用意してICOにまとめるほうが確実です。
透過（背景が透明）のロゴは使えますか？
使えます。ただしブラウザのタブは白背景とは限らず、濃い色のこともあります。透明のまま使うと、背景によっては見えなくなります。背景色を敷いた図案にするほうが安全です。
会社名の文字を入れたいのですが。
16pxでは読めません。実測でも、太い図案の中の1文字が判読できませんでした。文字を使うなら1文字だけにして、読ませるのではなく形として見分けさせてください。社名を見せる場所は、タブではなくページの中とOGP画像です。