ファビコンを設定するためのタグの基本は、rel="icon"を指定した<link>タグに、「.ico」拡張子のファイルを読み込ませます。
<link rel="icon" href="./favicon.ico">な〜んだ。簡単じゃないか。
でも、ちらっとファビコンのことが気になってググったが最期。
「色んなサイズのファビコンを用意しよう！」みたいな情報がいっぱいでてきて、rel属性には"shortcut"ついてたりついてなかったり、"apple-touch-icon"とかもいるし、type属性には"image/x-icon"や"image/vnd.microsoft.icon"とかでてくるし、ファイル形式も「.ico」じゃなくて「.png」だったりするしで、
Haaan? モウ、ワケワカンネェ。
って心が折れる。
とりあえず適当にセットして、見て見ぬ振り。で、しばらくしてまた調べて、「Haaan? モウ、ワ(ry」。
そんな人、多いんじゃないでしょうか？
なんでそんなに記述パターンがあるのか
こういうややこしいものの裏側にいるやつは基本「ヤツ」です。
そう、「Internet Explorer」様です。
IEのバージョン対応のために、タグの記述が何パターンもあるのです。
他には、普通にデバイスの種類によって色々設定が異なるってのもありますね。
IEのバージョン対応に対する記述
まずはIEのバージョン対応のせいでややこしくなっている記述パターンについて、整理していきましょう。
IE8に対応するための記述 - rel属性のshortcut
意外とまだ使われているrel属性の「shortcut」。
でもこれ、実はIE8へ対応する時に必要なだけなんですよね。
こういうの
<link rel="icon shortcut" href="./favicon.ico">rel="icon shortcut"のように、iconとshortcut の2つの値を指定しています。
一度これをみてしまったせいで、「icon」だけじゃ設定不足な気がしてしまい、念のため「icon」と「shortcut」を二つ書いてしまう習慣が着いてしまった...。
それ、ダメです。
最近のブラウザでは全く必要のない記述です。
それどころか、MDNでは以下のような注意書きがされています。
icon より以前はリンク種別 shortcut がよく使用されていましたが、これは非準拠で無視されますのでウェブ作者は今後使用してはいけません。
「ウェブ作者は今後使用してはいけません。」
なんと強烈な響き。笑
IE9,IE10に対応するための記述 - type属性の値
続いて、IE9,10への対応に必要な記述です。
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="./favicon.ico">こういうやつ。
IE9,IE10はtype属性の値にimage/x-iconもしくはvnd.microsoft.iconをつけなくてはなりません。
せめてどっちかに絞って欲しいですね...。
IE11以降の対応ならこんなにシンプル
IE11以降だけの対応でいいよ！って人はシンプルにこれでいい。
<link rel="icon" href="./favicon.ico">.ico以外の画像を使う時はtype属性を使う
type属性のimage/x-iconやvnd.microsoft.iconはIEのためのものでしたが、ファビコン画像にpngやgifを使う場合は、それに合ったtype属性を記述する必要があります。
pngを使う場合
<link rel="icon" type="image/png" href="./favicon.png">gifを使う場合
<link rel="icon" type="image/gif" href="./favicon.gif">このことは覚えておいた方が良さそうですね。
※ IE10以前ではファビコン画像にpngやgifは使えないので注意しましょう。
OS・ブラウザごとに用意すべきファビコンのサイズと種類
さて、ここからが少々ややこしいです。
基本的にここまでの話は 「favicon.ico」 だけの話でした。つまり、PCでの話。
今ではiOSやAndoridのことも気にしなくてはなりません。
何を気にすべきか、どのOSのどのブラウザでどのような挙動をするのか。
それらを詳しく知りたい人は以下の記事をお読みになることをオススメします。
めちゃくちゃ細かく、OS・ブラウザごとに検証してくれています。
この記事では、特に重要な点だけまとめていきます。
apple-touch-icon.pngは用意すべきか
まず先に結論をいうと、答えは「イエス」。
「apple-touch-icon.png」とはiPhoneに使用されるファビコン名です。（実はAndroidでもChromeなら読み込んでくれる）
基本的には apple-touch-icon.png がなくても favicon.ico があればそっちを読みこんでくれるのですが、
Safariでホーム画面にお気に入りした場合、apple-touch-icon.pngしか読み込んでくれない。
という仕様になっています。favicon.ico があっても読み込まれません。
天下のiPhone様の標準ブラウザのSafariのことですから、ここは無視できないでしょう。
しかも、AndroidにおいてもChromeでホームに追加した場合はapple-touch-icon.pngしか読み込んでくれないようです。
なので、apple-touch-icon.pngは用意すべき、と言えるでしょう。
favicon.pngは用意すべきか
こちらの答えは「ノー」です。
「favicon.png」をAndroid用に用意すべきだと書かれている記事も見かけますが、「favicon.ico」を読み込まずに「favicon.png」だけを読み込む、ような環境はありません。
なので、「favicon.ico」さえ用意していれば、png形式は不要です。
apple-touch-icon.pngのサイズは複数用意すべき？
サイズの用意は1つでいいでしょう。
というのも、複数のサイズを読み込んだとしても適切なサイズを読み込んでくれるのは iOSのSafariのみ だからです。(iPhoneなら120px、iPadなら152px)
他の環境では複数読み込んでいるうちの「最初」または「最後」に読み込んだいずれかが読み取られます。
適切なサイズを選んでくれるわけではありません。
180px か 152px あたりのサイズを1つだけ読み込むのが無難ではないかなと思います。
apple-touch-icon.pngの読み込み方
サイズは sizes属性 に指定し、rel属性はapple-touch-iconとします。
<link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180x180"> まとめると
IE8のことは無視します。
IE9,10 にも対応
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180x180">IE11以降の対応
<link rel="icon" href="./favicon.ico">
<link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180x180">
