faviconとapple touch iconのメモ 2015

ファビコンとウェブクリップアイコンの設定に関するメモ
htmlも画像もごちゃごちゃしたくないので、最低限の設定を目指す。

設置場所と設置ファイル

ドキュメントルートに設置

• Windows、MacなどのPC用は、「favicon.ico」

• iPhoneやiPad、Androidなどのスマホ用は、「apple-touch-icon.png」

アイコンのサイズ

• favicon.ico　32px×32px

• apple-touch-icon.png　144px×144px

htmlヘッダへの記述

• ドキュメントルートに設置している場合は、ブラウザが勝手に読み込んでくれるので、特に何も記述しなくてもよい。(かなり古いブラウザは除く)

• ただしAndroidでは何も書かないと小さいアイコン(普通にアプリ等で表示されるアイコンとは違う大きさ)でしか表示されなかった。機種やブラウザによる。

ということで、htmlのhead内に一行追加しておく。

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

これでAndroidでもホームに大きなアイコンで表示された。

ファビコンを簡単に作成したい、もっと細かく設定したい場合

260px×260px以上の画像を用意。下記のサイトにいけば簡単に作成できる。
全ての環境に適したファビコンを全部作ってくれる上、htmlタグも出力してくれるので、細かく設定したい人も安心！笑
サイト下部にはファビコンチェック機能もある。

Favicon Generator for all platforms: iOS, Android, PC/Mac...

Windows8に関して

専用のアイコンがあるようだが、情報が上記サイトしかなかった。
環境がなく確認もできないため今回は特に対応しないことにした。