ただこのガイドライン、すぐに気になった事として「ファビコンのサイズが 48 ピクセルの倍数になっていること」、「16 × 16 ピクセルのファビコンは指定しないでください」という記述がありました。 16x16, 32x32のfaviconってなくても大丈夫なんだっけ？ 有名なfaviconジェネレータではまず間違いなくこの2つを生成しています。
そこで16x16、32x32は何のために必要なのか、改めて調べてみました。 色々なページの結論をまとめると、48x48以下のサイズは以下の使われ方をしている事がわかりました。
- 16x16: IE9のアドレスバー他
- 24x24: IE9のピン留め機能
- 32x32 たいていのブラウザのタブ
これらの指定が必要かどうかについてはStackflowにドンピシャの解答が見つかりました。 MicrosoftはIE9時代には16x16, 32x32のサイズ指定を推奨していたようなのですが、より大きなサイズのfaviconがあればそちらを使っているのが現状のようです。 つまりIE9が死滅し、今後 IE11 も死滅していくことを考慮に入れると16x16, 24x24 の favicon 生成は不要と思います。
では今でもたいていのブラウザの表示に使われている32x32の記述はなくても大丈夫なのでしょうか。 対応状況をチェックしたテーブルがありましたが、いまいちよくわからない。 仕方ないので実機で検査してみると、IE11、Edge、Safari、Firefox、Chrome、どのブラウザも16x16, 32x32のサイズがなくても表示できました。 なんだレガシー系を捨てれば32x32も要らなかったのか。 ようするにこれらの指定は、これまでも通信量とレスポンスの観点以外では指定する必要がなかった事になります。
32x32と48x48では通信量が2倍くらい違ってくるので、普段のタブ表示ではどちらが優先されるかDevToolsでさらに調査してみました。 その結果、32x32のfaviconがあれば、タブ表示ではそちらが優先されるようになっていました。 つまり以下のような指定が今後は良さそうという事になりますね。
# before
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
# after
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
たかがfavicon、されどfavicon。
0 件のコメント:
コメントを投稿