ファビコンはフェイバリット・アイコン（favorite icon）の略称で、ブラウザのタブや検索結果、ブックマークやお気に入りに登録した際に表示されるアイコンです。
なくてもサイトは見れるので必須というわけではありませんが、サイトを認識させやすくブランディング効果もあるので、設定しておきたい要素のひとつです。
ファビコンが正しく設定されていない場合、テキスト1文字やブラウザのデフォルト画像が自動的に表示されます。
そんなファビコン画像の作成の注意点や、HTMLでの設定方法、今は使われていない古いコードなどをまとめています。
ファビコンの役割
ファビコンの役割はサイトを判別するための目印になることです。サイトのシンボルマークとも言えます。
ホーム画面やブックマークに保存した時の視認性は、ファビコンがあった方が上がります。アイコンがいまいちだと、なんとなくホーム画面に置いておきたくなくなってしまうこともあります。
あまり意識せずとも「このアイコンはこのサイトだ」と認識できるサイトはいくつかあるのではないでしょうか。サイトを信頼しているリピーターが検索結果でアイコンを見てクリックしてくれるなど、サイト流入にも一役買ってくれる存在です。
ファビコンの画像作成で意識すること
- シンプルなデザインにする
- 形は正方形。
- 角丸で切り取られてもデザインが崩れないようにする。
ファビコンは小さく表示されるため、複雑なデザインだと見づらくわかりにくいファビコンになってしまいます。パッとみてわかりやすいシンプルなデザインにしましょう。
基本的には正方形で表示されるため、画像も正方形で作成します。検索結果やiOSのホーム画面など、角が丸められて表示される場合もあるので、角が削られても問題のないデザインにしましょう。
ファビコンファイルを作成する
ファビコンに使用する画像を作成したら、ファビコンとして設定するための画像形式やサイズにしたファイルを作ります。
ファビコンが表示される箇所とサイズ
ファビコンが表示される箇所によって、実際に使われるサイズは異なります。全てのサイズを作成する必要はありませんが、どこでどのくらいの大きさで表示されるかを把握しておくと、画像作成やファイル準備の際に確認しながら設定できると思います。
| 表示される箇所 | サイズ |
|---|---|
| ブラウザタブ 検索結果 | 16px × 16px |
| お気に入り・ブックマーク | 32px × 32px |
| スマホのホーム画面 （ショートカットアイコン） | 180px × 180px 192px × 192px 256px × 256px |
| Windowsのホーム画面 | 48px × 48px 64px × 64px（高解像度） |
SVG形式であればサイズ指定自体が不要になるため、下記の「SVG + ICO + apple-touch-icon」で作成しておけばこの表を細かく気にする必要はなくなります。ただし.icoやPNGなど従来形式を使う場合は、48pxの倍数を目安にサイズを用意しておきましょう。
Google検索結果にファビコンを表示させるには、48pxの倍数のサイズ（48×48px、96×96pxなど）にし、最低でも48px以上を用意することが推奨されています。（SVG画像であればサイズ指定はありません）
併せてGooglebot-Imageによるファビコンファイルへのクロールと、Googlebotによるトップページへのクロールが許可されている必要があります。
参考：検索結果に表示されるファビコンを定義する – Google Developers
SVG + ICO + apple-touch-icon
現在はSVG形式のファビコンがChrome・Firefox・Edge・Safari14以降の主要ブラウザでサポートされています。1ファイルでどの解像度にもきれいに対応できるため、メインのファビコンとして推奨されています。ただし古いブラウザやiOSのホーム画面表示には別途ファイルが必要なため、以下の3ファイルを揃えておくのが実用的です。
- favicon.svg（メイン。ベクター形式でどの解像度でも綺麗に表示される）
- favicon.ico（SVG非対応の環境向けフォールバック）
- apple-touch-icon.png（180×180px。iPhoneのホーム画面用）
favicon.ico
.ico というフォーマットは複数の画像サイズを格納できる画像形式で、表示される箇所によってブラウザが適切なサイズを自動で選んで表示してくれます。
gif や png といった画像形式も使えますが、対応していないブラウザもあります。.ico にしておけばどのブラウザでも共通で利用でき、設定の記述が少なくて済みます。
各ブラウザの対応画像 : Favicon – Wikipedia
ルートディレクトリに favicon.ico というファイルを置いておくだけで、<link>タグを書かなくてもファビコンとして認識してくれるブラウザも多くあります（表示されない場合は後述のHTML設定を追加してください）。
apple-touch-icon
「apple-touch-icon」はiphoneで使用するファビコン名です。safariブラウザでホーム画面にお気に入りをした場合に表示されるのはこのapple-touch-iconで、favicon.icoは読み込んでくれません。
iPhoneのApp Iconサイズが180pxなので、apple-touch-icon.pngはそのサイズが良いです。
App Icon – Icons and Images – iOS – Human Interface Guidelines – Apple Developer
AndroidでChromeを使用する場合は、apple-touch-iconではなくWeb App Manifest（site.webmanifest）で192×192pxのアイコンを指定する方法が推奨されます。site.webmanifest がなければ、apple-touch-icon がフォールバックとして使用されます。
ツールを使ってファビコンを作る
作成した画像からファビコンの .ico ファイルを作成できるツールがあるのでいくつか紹介します。
私がよく使うのはこちら。
RealFaviconGenerator
画像をアップロードすると必要なfaviconファイルを作成してくれます。pngの透過にも対応しており、これひとつでファビコン作成は十分。
設定後にどのように表示されるかチェックできるページもあります。
【ファビコンチェックページ】Favicon checker
上記のツールは英語表記のみとなっているので、日本語がいいなという方はこちらのツールもおすすめです。
Faviconジェネレーター
Webサイトだけでなくアプリ開発も視野に入れている方は、App Asset Generator もおすすめです。
ファビコン生成に加え、iOS・Android向けのアプリアイコンやストアスクリーンショットも一括で書き出せます。
ファビコンを表示させるためのHTML設定
ファビコンファイルを作成したらHTMLファイルに設定して表示させます。.ico を使用している場合、以下のようなHTMLコードを記述します。
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">SVGに対応していないブラウザは自動的に.icoを読み込みます。Chromeでは.icoをSVGより優先して読み込んでしまう不具合があるため、sizes="any" を指定しておくと安定します。
URLはファビコン画像のある場所を記述します。大体webサイトのファイルがある一番上の階層に設定しますが難しい場合は任意の場所でもOK。画像のURLさえ間違えなければ大丈夫です。
ルートディレクトリに favicon.ico があれば、コードを書かなくても表示される場合があります（表示されなければコードを書く）。
.ico 以外の拡張子の場合はtype属性を追加
svgの他、pngやgifといった画像を使った場合はtype属性を追加します。
<!-- .png -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- .gif -->
<link rel="icon" type="image/gif" href="/favicon.gif">今は使われていない古いファビコン設定コード
一昔前はブラウザやOSによって使用されるファビコンが統一されておらず、様々な設定コードが必要でした。今ではファビコンを設定するために、そこまで多くの記述の必要はありません。
サイトによっては古いコードが残っている場合もあるので、不要なものは取り除いていきましょう。
IEの旧バージョン向けコード
IEはサポートが終了しているため、以下のようなコードが残っていれば削除して問題ありません。
<!-- IE9 -->
<link rel="icon" type="/vnd.microsoft.icon" href="/image/favicon.ico">
<!-- IE10 -->
<link rel="icon" type="image/x-icon" href="image/icon.png">
<!-- IE8 以下 -->
<link rel="shortcut icon" href="/favicon.ico">“shortcut” の記述は不要
<link rel="shortcut icon" href="/favicon.ico">rel属性に shortcut が含まれている場合もありますが、これは元々IE8に対応するためのものでした。
現在は不要というより、MDN では「使用してはいけない」という記述があるくらいで、むしろ書かない方が良いものです。
shortcut リンク種別が icon の前に見られることが良くありますが、このリンク種別は適合するものではなく、無視されるので使用しないでください。
リンク種別 – HTML: HyperText Markup Language | MDN
“mask-icon” の記述も不要
Safari でピン留めした時に表示されるアイコンを設定する時に、svg画像を用意し以下のように rel="mask-icon" とカラーの指定が必要でした。
<link rel="mask-icon" href="/safari_pagepin.svg" color="#eee">Safari12以降ではピン留めされたタブにも通常のファビコンを使用することができるため、この記述は不要になっています。
