faviconとapple touch iconのメモ 2015
ファビコンとウェブクリップアイコンの設定に関するメモ
htmlも画像もごちゃごちゃしたくないので、最低限の設定を目指す。
設置場所と設置ファイル
ドキュメントルートに設置
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に関して
専用のアイコンがあるようだが、情報が上記サイトしかなかった。
環境がなく確認もできないため今回は特に対応しないことにした。