読者です 読者をやめる 読者になる 読者になる

bass-inu's blog

非IT企業Web担当者の孤独な雑記

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に関して

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