ページ

2013/03/24

Retinaディスプレイ対応のマルチサイズfaviconの作り方と指定方法

前にDon't Forget About Favicons on Retina Screens
Retina ディスプレイ用の favicon を作らなきゃなぁと思っていたのだけどすっかり放置していた。
ググってみるとちょうどいい記事を発見した。
Retinaディスプレイに対応できるマルチサイズのファビコンの作り方。 | オレっち.com
Bradicon! でマルチサイズ favicon が作れる。
Bradicon! - converting icons since... LITERALLY FOREVER
include large icons にチェックして Browse で favicon にしたい画像を選択したら生成されるまで待つだけ。
生成されたら画像をクリックすればダウンロードできる。
ico ファイル が 1 ファイルだけなんだなぁと思ったらマルチサイズに対応していて、複数入っていて驚き!

後はコレを以下のように指定すれば良いらしい。
<link rel="shortcut icon" href="http://www.your-domain.com/favicon.ico">
HTML5 だと shortcut はいらなくて icon だけで良いらしい。Favicon(ファビコン)に纏わる色々 | 10press
<link rel="icon" sizes="16x16 32x32 48x48 128x128 256x256" href="http://www.your-domain.com/favicon.ico">
HTML5 から sizes 属性を指定できる。スペース区切りで指定すれば良い。4.12 Links — HTML 5.1
MIME タイプは ico ファイルなら指定しなくても良いかも?
どうせ IE が ico ファイルしか対応していないっぽいし。Favicon - Wikipedia, the free encyclopedia