コンゴトモヨロシク♪

ややこしくて面倒くさい日々の記録

はてなブログに apple-touch-icon を設定(2016年1月版)

iPhoneから はてなブログ をブックマークしてみると、例のダサい頭文字アイコンが表示された。apple-touch-icon を作るのか……苦行だ……と毎回うんざりさせられます。

しかも iPad Pro 用のアイコンがまた増えた。。。Appleの中の人に「流用」とか「再利用」という言葉は無いのだろうか?…効率よく仕事するとレイオフされてしまうから、仕様を増やしているのかもね(藁)。

先人と同様に、考慮するのはiOSAndroidのみ。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タグの中に書きます。

  1. タイトルバーから「設定」→「詳細設定」をクリック
  2. 検索エンジン最適化」の「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から「お気に入りに追加」と「ブックマークを追加」と「ホーム画面に追加」を試してみると、

f:id:miyazawayossy:20160111134121j:plain:w320

期待通りに動作しました。