ファビコンはフェイバリット・アイコン（favorite icon）の略称で、ブラウザのタブや検索結果、ブックマークやお気に入りに登録した際に表示されるアイコンです。
別になくてもサイトは見れるので必須というわけではありませんが、ファビコンはサイトを認識させやすく、ブランディング効果もあるので設定しておきたいものです。
ファビコンが正しく設定されていない場合、テキスト1文字が表示されたりブラウザのデフォルト画像などが自動的に設定されます。
そんなファビコンの作成の注意点や、HTMLまたはwordpressでの設定方法などをここにまとめています。
ファビコンの役割
ファビコンの役割はサイトを判別するための目印になることです。サイトのシンボルマークとも言えます。
ホーム画面やブックマークに保存した時の視認性はファビコンがあった方が上がります。ブラウザのタブをたくさん開いた場合はファビコンしか見えない、ということもあるのであった方がユーザーに優しいです。またアイコンがいまいちだとなんとなくホーム画面に置いておきたくなくなってしまうことも…。ユーザー体験を考えるなら必須とも言えます。
あまり意識せずともこのアイコンはこのサイトである、という認識できるサイトはいくつかあるのではないでしょうか。このサイトは信頼できると思っているリピーターの人が、検索でアイコンを見てクリックしてくれたりと、サイト流入にも一役買ってくれる存在です。
ファビコンの画像作成で意識すること
- シンプルなデザインにする
- 形は正方形。
- 角丸でもデザインが変わらないものにする。
ファビコンは小さく表示されるため、複雑なデザインにしても見づらくわかりにくいファビコンになってしまいます。パッとみてわかりやすいシンプルなデザインにしましょう。
基本的には正方形で表示されるため、画像も正方形で作成します。検索結果やiOSのホーム画面など、角が丸められて表示される場合もあるので、角が削られても問題のないデザインにしましょう。
ファビコンファイルを作成
ファビコンに使用する画像を作成したら、ファビコンとして設定するための画像形式やサイズにしたファイルを作ります。
- サイズは48pxの倍数にする。
- favicon.ico と apple-touch-icon.png を作る。
ファビコンが表示される箇所とサイズ
サイズは 48px × 48px の倍数が基本ですが、SVG画像であればサイズ指定はありません。これはGoogleガイドラインに記載されています。
検索結果に表示されるファビコンを定義する – Google Developers
このガイドラインの条件を満たしていない場合表示されないこともあるので確認しておきましょう。
ファビコンが表示される箇所によって表示サイズも様々ですが、全てのサイズを作成する必要はありません。きれいに表示されるサイズを確認しながら設定しましょう。
【ファビコンが使用される箇所一例】
| ブラウザタブ 検索結果 | 16px × 16px |
| お気に入り・ブックマーク | 32px × 32px |
| スマホのホーム画面 （ショートカットアイコン） | 180px × 180px 192px × 192px 256px × 256px |
| Windowsのホーム画面 | 48px × 48px 64px × 64px（高解像度） |
WordPressならサイトアイコンの設定をすれば、HTMLなどの記載がなくても自動的に対応してくれます。
WordPressのファビコン設定
ファビコンの拡張子は「.ico」
.ico というフォーマットは複数の画像サイズを格納できる画像形式で、表示される箇所によってその中から適切なものを選んで表示します。
gif や png といった画像形式も使えますが、フォーマットによっては対応していないブラウザもあります。.ico にしておけばどのブラウザでも共通で利用でき、設定の記述が少なくて済むので .ico のファイルは作成しておきましょう。
各ブラウザの対応画像 : Favicon – Wikipedia
大体のブラウザでは、ルートディレクトリに「favicon.ico」というファイルがあったらそれをファビコンとして表示してくれます。
apple-touch-icon
「apple-touch-icon」はiphoneで使用するファビコン名です。AndroidでもChromeならこの名前の画像を読み込んでくれます。
safariブラウザでホーム画面にお気に入りをした場合に表示されるのはこのapple-touch-iconのみで、fabicon.icoは読み込んでくれません。
iPhoneのApp Iconサイズが180pxなので、apple-touch-icon.pngはそのサイズが良いです。
App Icon – Icons and Images – iOS – Human Interface Guidelines – Apple Developer
ツールを使ってファビコンを作る
作成した画像からファビコンの .ico ファイルを作成できるツールがあるのでいくつか紹介します。
画像をアップロードすると必要なfaviconファイルを作成してくれます。pngの透過にも対応しており、これひとつでファビコン作成は十分。
設定後にどのように表示されるかチェックできるページもあります。
【ファビコンチェックページ】Favicon checker
上記のツールは英語表記のみとなっているので、日本語がいいなという方はこちらのツールもおすすめです。
Faviconジェネレーター
また念には念を！という方のために、豊富なサイズのファビコンや必要なファイルを一括生成してくれるこちらのジェネレーターがおすすめです。
様々なファビコンを一括生成。favicon generator
HTMLのサンプルコードもあるので、コードが苦手な方でも設定しやすいと思います。
ファビコンを表示させるためのHTML設定
ファビコンファイルを作成したらHTMLファイルに設定して表示させます。.ico を使用している場合、以下のようなHTMLコードを記述します。
<link rel=”icon” href=“/favicon.ico”>
<!-- スマホ用アイコン -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">favicon.ico があれば、基本的に他の拡張子画像を用意する必要はありません。
URLはファビコン画像のある場所を記述します。大体webサイトのファイルがある一番上の階層に設定しますが難しい場合は任意の場所でもOK。画像のURLさえ間違えなければ大丈夫です。
ルートディレクトリにあればコードを書かなくても表示される場合があります。（表示されなければコードを書く）
.ico 以外の拡張子の場合はtype属性を追加
pngやsvg、gifといった画像を使った場合はtype属性を追加します。
<!-- .png -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- .svg -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- .gif -->
<link rel="icon" type="image/gif" href="/favicon.gif">今は使われないけど以前使われていたファビコン設定コード
今ではファビコンを設定するために、そこまで多くの記述の必要はありません。
しかし一昔前は、ブラウザやOSなどによって使用されるファビコンがあまり統一されておらず、様々なファビコン設定が必要でした。
そのためサイトによっては古いコードを記載したままにしている場合もあります。必要な記述かどうかを見極めて取捨選択していきましょう。
IEの旧バージョンに対応したコード
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 では「使用してはいけない」という記述があるくらいで、むしろ書かない方が良いものです。
icon より以前はリンク種別 shortcut がよく使用されていましたが、これは非準拠で無視されますのでウェブ作者は今後使用してはいけません。
リンク種別 – HTML: HyperText Markup Language | MDN
“mask-icon” の記述もなしでOK
Safari でピン留めした時に表示されるアイコンを設定する時に、svg画像を用意し以下のように rel="mask-icon" とカラーの指定が必要でした。
<link rel="mask-icon" href="/safari_pagepin.svg" color="#eee">Safari12以降ではピン留めされたタブにも通常のファビコンを使用することができるため、この記述は不要になっています。
WordPressのファビコン設定
WordPressでは管理画面からファビコンの設定ができます。登録するだけで一通りのファビコンが表示されるので簡単です。
管理画面の「外観」＞「カスタマイズ」＞「サイト基本情報」へと移動します。サイト基本情報の下にある「サイトアイコンを選択」というボタンをクリックするとメディアライブラリが開くので、ファビコン画像をアップロードして設定します。
設定する画面にも書かれていますが、ここから設定するサイトアイコンは「512px × 512px以上」が推奨となっています。
これは簡単なファビコンの設定方法ですが、一律同じ設定となるので、表示される場所によってファビコンを変更したい場合は、別途HTMLに記載するなどの対応が必要です。
またうまく表示されない場合もHTMLにも記載してみてください。このサイトも一時期ここからの設定だけにしていたのですが、ブラウザタブにファビコンが表示されないことがあったのでHTMLの方にも記載するようにしています。（今は大丈夫かも？）
faviconが表示されないときに確認したいこと
簡単に設定できるファビコンですが、思わぬところで表示されず悩んでしまうことも。私が修正して解決できた内容についていくつかご紹介しますので、確認してみてください。
ファビコンがある場所と画像パスが異なっていないか
まず見直したいのはファビコンの画像がある場所と設定したURL。これが異なっていると、画像が読み込まれないため表示されません。
どこにファビコンの画像があって、href属性にその画像パスが書かれているかチェックしましょう。
BASIC認証をかけていないか
サイトの閲覧制限をかけるBASIC認証ですが、これがあるとファビコンが表示されない場合があります。
以前公開前のBASIC認証をかけているサイトをクライアントに見てもらった時に、ファビコンが表示されない、という指摘を受けたことがあります。
この時はBASIC認証解除したら問題なく表示されました。同じような状況の場合はサイトを公開した後に表示されるか確認してみてください。
キャッシュを削除する
画像変更後に反映されない、と言った場合はキャッシュが残っていることも考えられます。
あまり指摘されることはないかと思いますが、チャットツールのslackのようなURLを貼り付けると自動的にファビコンやタイトルが表示されるものも、キャッシュによってファビコンが表示されないことがあります。この場合はそのツールのキャッシュを削除して表示されるか確認しましょう。
検索結果に表示されない場合→ガイドライン見直し
設定方法やサイト環境に問題がない場合は、Googleのガイドラインも見直してみましょう。
検索結果に表示されるファビコンを定義する – Google Developers
ただし必ずしも表示されるとは限らないようです。設定に問題がなければ時間が解決してくれることもあります。
カテゴリー : HTML-CSS
