※この記事は2016年3月8日時点で執筆された記事です。現在では仕様が異なる可能性があります。
faviconって何？どのサイズまで用意すればいいの？Windowsのカスタムタイルって？Androidでうまく映らないんだけど？
単純なように見えて調べだすときりがないfaviconについて、基礎知識から説明いたします。
目次
- favicon（ファビコン）とは？
- faviconファイルの基礎知識
- どのサイズを用意すればいいの？
- 透過・非透過などデザイン時の注意点
- Android対応の注意点
- favicon実装確認の注意点
- favicon.icoファイルの作りかた
- まとめ
favicon（ファビコン）とは？
faviconとはfavorite iconの略で、主にブラウザのタブや履歴、お気に入りに表示されるアイコンや、スマホでサイトをホーム画面に置いたときの表示アイコンなどのことを指します。
ほか、Windows8のタイルの画面に出たりGoogle TVの画面に出たりもするものも含まれます。
多くのデバイスに対応しようと思うと色々なサイズや形式のファビコン用ファイルを用意する必要がありますが、何がどう表示されるかは OS・ブラウザ・ディスプレイがRetinaか否か などにより変化します。
ふくらむfavicon対応
大マルチデバイス時代のせいで、faviconの種類は膨れ上がっています。
現在なんと20種類以上あるようです。
とはいえこれらを全て作って設定するのはものすごく大変ですし、大きなサイズを１つ作っておけば適宜縮小表示してくれる箇所もありますので、必ずしもすべて用意する必要はございません。
では最低限どれを揃えておけばよいのでしょうか？
そのまえに・・・
faviconファイルの基礎知識
favicon画像の拡張子は、ico形式やpng,jpg形式のものを用意する必要があります。
WindowsのIEはicoしか読み取れなかったり、iOSのSafariはicoが読み取れなかったりするためです。
icoの性質・マルチアイコン
icoファイルはPDFのように、１つのファイルに複数枚の画像データを保持できます。
そういったicoファイルをマルチアイコンと呼びます。
例えばWebNAUTのファビコンファイルはこちらですが、
これをダウンロードして開いてみると 16*16、 32*32、152*152 の３サイズの画像が入っていることがわかります。
基本的に複数入れてるものの中からブラウザやデバイスが勝手に判断して、最適なサイズのアイコンを表示してくれます。
どのサイズを用意すればいいの？
さて、本題になりますが
faviconファイルを用意するとき、一体何種類用意すればよいのでしょうか。
そのサイトがPCサイトかスマホサイトかはたまた両方か、
そしてIEをよく使うユーザーが見るサイトか・・などにより変わってくるかと思いますが、
検証の結果、以下の優先順で用意するのが良いのではと結論付けました。
用意すべきfaviconサイズ一覧
| 優先度 | OS/ブラウザ(表示場所) | ファイル名の例 | 画像サイズ(px) | 備考 |
|---|---|---|---|---|
| ★★★★★ | Win/IE（タブ）、Win&Mac/Chrome（タブ）、Win&Mac/Firefox（タブ）、Mac/Safari（履歴） | favicon.ico | 16*16 | 必須 |
| ★★★★☆ | Win&MacのRetina/各種ブラウザ（タブ）、Win/IE（新規タブページ） | favicon.ico | 32*32 | Retina用や汎用的な用途のために用意 |
| ★★★★☆ | iOS/Safari（ホーム画面）、Android/Chrome&ブラウザの一部（タブ・ホーム画面）、Mac/Safari（お気に入り） | apple-touch-icon.png | 152*152 or 180*180 | 180pxはiPhone 6 Plus (@3x)対応の現最大サイズ、152pxはiPad and iPad mini (@2x)まで対応の主流サイズ ※1 |
| ★★★★☆ | Android/Chrome&ブラウザの一部（タブ・ホーム画面）、Win8/IE（ピン留め） | favicon.ico | 152*152 or 192*192 など | apple-touch-iconと同様のサイズにして展開の手間を減らすか、Andoroid Chrome推奨サイズ192*192が望ましい※2 |
| ★★☆☆☆ | Win8/IE11（カスタムタイル） | mstile-310×310.pngなど | 128*128 & 270*270 & 558*270 & 558*558 | ※3 |
| ★☆☆☆☆ | Win/IE（デスクトップ/タスクバー） | favicon.ico | 48*48 or 64*64 | Android用の大きめのfaviconがあれば補完されるため用意する必要性は薄め |
| ☆☆☆☆☆ | iOS/Chrome | – | – | AndroidのChromeと違って、iOSのChromeにはホーム画面に追加という機能自体がないので考える必要なし |
| ☆☆☆☆☆ | Win8/IE10（カスタムタイル） | – | – | Win8/IE11と同じ指定では同じようにタイルに映らない点に注意 |
| ☆☆☆☆☆ | Win&Mac/IE以外（デスクトップ） | – | – | デスクトップに追加してfaviconが出るのはIEのみの機能なので考える必要なし |
※1 参考：iOS Developer Library
※2 参考：Chrome DeveloperAdd to Homescreen
※3 参考：IE11 での Web サイト用カスタム タイルの作成
ちなみに、WebNAUTではこの表のうち上から４つまでを用意しております。
個人的にはファイル数が簡潔かつ、表示のカバー範囲も広いこちらを推奨します！
透過・非透過などデザイン時の注意点
iOS/Safari
iOS/Safariでホーム画面に追加した場合、apple-touch-icon.pngは透過をいれた部分は自動的に黒背景になり不格好なので、背景を含めたデザインにしましょう。
また、iOS/Safariでは角丸が強くかかるため要素が切れないようにする点に注意しましょう。
Android全般
Androidは機種とブラウザによって透過したりしなかったりします。
Win8/IE11（カスタムタイル）
左下に白文字でサイト名が表示されるので、サイト名が読めるようなデザインにしましょう。
Android対応の注意点
Androidはモノによって、favicon.icoとapple-touch-iconの両方を設定していると、
apple-touch-icon.pngを引っ張ってくる場合とfavicon.icoを引っ張ってくる場合があり、
どちらのファイルを引っ張ってくるかは機種とブラウザ、表示位置によってまちまちです。
Android faviconのつまずき例
- Android4.4.4（Xperia A2）の標準ブラウザでホーム画面に追加した時はapple-touch-icon.pngが表示され、 同機種のChromeでホーム画面に追加した時はfavicon.icoの一番大きなサイズが表示される‥。
- 同じOSでもfavicon.icoの大きなサイズがない場合apple-touch-iconを代わりに表示する機種もあれば、 どれも表示せずデフォルト表示にする機種もある‥。
- 標準ブラウザでホーム画面に追加した場合、リボン型などの共通の装飾を施す機種と施さない機種が混在している‥。
上記のように、Androidでは機種とブラウザによってかなりバラつきがあることを知っておくとよいでしょう。
favicon実装確認の注意点
BASIC認証のかかっているサイトだと、faviconがうまく表示されない場合があります。
特にIEではちゃんと設定できていてもBASIC認証がかかっていると表示されません。
逆に、AndroidでBASIC認証のかかっているテスト環境では問題なくても
本番にあげたらデフォルトアイコンに戻っていた・・という事例もあるようです。
確認する際はBASIC認証のかかってない状態か、ローカル環境で確認しましょう。
例：mampつないでファビコンを変える、gulp の browserSyncで見る 等
参考：MAMP環境でのファビコン設置方法
favicon.icoファイルの作りかた
肝心のicoファイルの作り方ですが、icoファイル対応のソフトを使用するか、 png画像をアップしたら自動生成してくれるサービスを利用するなどして作成できます。
マルチicoファイル作成に便利なサイト
半透過マルチアイコンfavicon.icoを作ろう!
icoファイルを生成したあとも、ジャギが出ていないかなど仕上がりを確認しましょう。
まとめ
いかがでしたか？
思った以上の種類、思った以上の環境差異で深追いすると頭が痛くなりそうですね。
ちなみにfaviconチェッカーなるものもあるので、気になるサイトをチェックしてみては？
Real Favicon Generator
※Android部分はこちらのチェッカーでエラーが出ていても実際は表示されたりするので、最終的には実機確認を行いましょう。