webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

touch icon

概略

  • smart phone用に用意しておいたほうがいい。
  • faviconと同様、index.htmlと同じ階層(最上位)に置いておく。
  • サイズは、とりあえず192px*192pxのひとつ用意しておけば、共用できる。
  • appleガイドラインには、すべてのデバイス用に各種サイズを用意するように書いてある。下記参照。
  • touch iconの形は必ず正方形。見映えの角丸は、ブラウザが処理する。

android

f:id:ohta-felica:20160629181715p:plain

 i phone

f:id:ohta-felica:20160630050333p:plain

html記述内容

<!-- iOS Safari and Chrome -->
<link rel="apple-touch-icon"  href="touch-icon.png">
<!-- Android標準ブラウザ(一部) -->
<link rel="shortcut icon" href="touch-icon.png">