はてなブログに apple-touch-icon を設定(2016年1月版)
iPhoneから はてなブログ をブックマークしてみると、例のダサい頭文字アイコンが表示された。apple-touch-icon を作るのか……苦行だ……と毎回うんざりさせられます。
しかも iPad Pro 用のアイコンがまた増えた。。。Appleの中の人に「流用」とか「再利用」という言葉は無いのだろうか?…効率よく仕事するとレイオフされてしまうから、仕様を増やしているのかもね(藁)。
先人と同様に、考慮するのはiOSとAndroidのみ。Opera、Metro、Firefoxは無視。集客力がある商用サイトでさえ、年に数回しかアクセスされないアイコンは作りたくない。
2015年4月の情報が既に古くなっていて、相変わらずカオスな状態。
Apple公式のドキュメントからアイコンサイズを抜き出します。
端末 | サイズ |
---|---|
iPhone 6s Plus and iPhone 6 Plus (@3x) | 180x180 |
iPhone 6s, iPhone 6, and iPhone 5 (@2x) and iPhone 4s (@2x) | 120x120 |
iPad and iPad mini (@2x) | 152x152 |
iPad 2 and iPad mini (@1x) | 76x76 |
iPad Pro (@2x) | 167x167 |
iOSの仕様変更でドキュメントから省かれたアイコンサイズを抜き出します。
Everything you always wanted to know about touch icons · Mathias Bynens
端末 | サイズ |
---|---|
non-Retina (@1×) iPhone, iPod Touch, and Android 2.1+ devices | 57x57 |
iPad mini, 1st and 2nd generation iPad (@1×) ≦ iOS6 | 72x72 |
iPhone (@2×) ≦ iOS6 | 114x114 |
iPad (@2×) ≦ iOS6 | 144x144 |
Chromeの公式っぽいドキュメント。こちらも仕様の一貫性は期待できない。
Add to Homescreen - Google Chrome
<link rel="icon" sizes="192x192" href="nice-highres.png"> <link rel="icon" sizes="128x128" href="niceicon.png"> <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png"> <link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">
Android標準ブラウザは、機種やOSバージョンごとにバラバラな振る舞い。「古い端末が他界して一時期よりはマシになったが、相変わらずの断片化状態」という印象。とりあえず「apple-touch-iconナントカ」を書いておけば勝手に拾ってくれる感じ。
俺が第4世代 iPod touch を愛用している都合上、iOS6以降のサポートに必要なアイコンサイズを大きい順に並べてみた。
端末 | サイズ |
---|---|
Chrome for Android | 192x192 |
iPhone 6s Plus and iPhone 6 Plus (@3x) | 180x180 |
iPad Pro (@2x) | 167x167 |
iPad and iPad mini (@2x) | 152x152 |
iPad (@2×) ≦ iOS6 | 144x144 |
Chrome for Android | 128x128 |
iPhone 6s, iPhone 6, and iPhone 5 (@2x) and iPhone 4s (@2x) | 120x120 |
iPhone (@2×) ≦ iOS6 | 114x114 |
iPad 2 and iPad mini (@1x) | 76x76 |
iPad mini, 1st and 2nd generation iPad (@1×) ≦ iOS6 | 72x72 |
non-Retina (@1×) iPhone, iPod Touch, and Android 2.1+ devices | 57x57 |
仕事ならば、最大サイズの画像だけを用意して縮小はスマホに任せますが、趣味のblogなので所定サイズの画像を作って、HatenaFotolifeに直リンクしたURLをHEADタグの中に書きます。
- タイトルバーから「設定」→「詳細設定」をクリック
- 「検索エンジン最適化」の「headに要素を追加」に以下の行をコピペして「変更する」をクリック
<link rel="icon" sizes="192x192" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014445.png"> <link rel="icon" sizes="128x128" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014453.png"> <link rel="apple-touch-icon-precomposed" sizes="180x180" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014446.png"> <link rel="apple-touch-icon-precomposed" sizes="167x167" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014448.png"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014450.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014451.png"> <link rel="apple-touch-icon-precomposed" sizes="128x128" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014453.png"> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014454.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014455.png"> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014456.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014457.png"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014501.png"> <link rel="apple-touch-icon" sizes="180x180" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014446.png"> <link rel="apple-touch-icon" sizes="167x167" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014448.png"> <link rel="apple-touch-icon" sizes="152x152" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014450.png"> <link rel="apple-touch-icon" sizes="144x144" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014451.png"> <link rel="apple-touch-icon" sizes="128x128" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014453.png"> <link rel="apple-touch-icon" sizes="120x120" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014454.png"> <link rel="apple-touch-icon" sizes="114x114" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014455.png"> <link rel="apple-touch-icon" sizes="76x76" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014456.png"> <link rel="apple-touch-icon" sizes="72x72" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014457.png"> <link rel="apple-touch-icon" sizes="57x57" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014501.png"> <link rel="apple-touch-icon" href="http://f.st-hatena.com/images/fotolife/m/miyazawayossy/20160111/20160111014501.png">
Chrome用アイコン、apple-touch-icon-precomposed、apple-touch-iconの順に指定。機種ごとに動きがバラバラなAndroid標準ブラウザが拾えるように大きい順に書き、sizesを認識できない機種の滑り止め(57x57)も書きます。
iPhoneから「お気に入りに追加」と「ブックマークを追加」と「ホーム画面に追加」を試してみると、
期待通りに動作しました。