ファビコンの作り方とサイトへの設定方法
この記事のポイント
- favicon.ico 1つあれば十分です
- ルートに置いて<head>に1行追加
- 小さいサイズではシンプルな形が見やすい
ファビコン(favicon)は、ブラウザのタブ、ブックマーク、検索結果の横に表示される小さなサイトのアイコンです。小さいながらもサイトをひと目で見分けやすくしてくれ、ないと標準のアイコンが表示されて、少し未完成な印象を与えます。
必要なファイル
いちばん基本になるのはfavicon.ico1つです。ICOファイルは複数のサイズの画像を1つにまとめられるので、タブでは16px、デスクトップのショートカットではもっと大きいサイズ、というように場面に合ったサイズを選んで使わせることができます。これに加えて、次のファイルも一緒に置くことがよくあります。
| ファイル | 用途 |
|---|---|
| favicon.ico | すべてのブラウザの基本アイコン |
| favicon.svg | 最新のブラウザ用、どのサイズでも鮮明 |
| apple-touch-icon.png | iPhone・iPadのホーム画面に追加するとき用(180×180) |
作り方
- 正方形で256px以上のロゴ画像を用意します。SVGがあればいちばんです。
- ファビコン(ICO)を作るに入れると、16・32・48・256pxが入ったfavicon.icoができます。
- iPhone用のアイコンが必要なら、同じ元画像を画像サイズを小さくするで形式PNG、最大幅180にして作ります。このアイコンは背景が透明でないほうがきれいに見えます。
サイトに設定する
ファイルをサイトのルートフォルダにアップロードし、すべてのページの<head>の中に次の行を入れます。
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">WordPressやブログサービスを使っているなら、設定メニューに「サイトアイコン」という項目があることが多いです。そこに画像をアップロードすれば、こうしたコードを自動で入れてくれます。
小さいサイズで見やすくする
16pxは思った以上に小さいです。長いロゴや文字はほとんど見えないので、頭文字やシンボルだけを残したシンプルなバージョンを別に作るのがおすすめです。背景色のある四角や円の上に太い形をのせると、明るいタブでも暗いタブでも見やすくなります。
変えたのに古いアイコンが表示されるとき
ブラウザはファビコンを長く保存しています。スーパーリロード(Ctrl + F5、MacはCmd + Shift + R)をするか、アドレスに?v=2をつけてファイル名が変わったように見せると、新しいアイコンを読み込みます。検索結果のアイコンは、検索エンジンが再びクロールするまで時間がかかります。