エラーログに、
- apple-touch-icon.png(apple-touch-icon-precomposed.png)
- browserconfig.xml
が無いよーと出てて、色々対応したのでめも。
apple-touch-icon.png
iPhoneとAndroid用のfavicon
PC用のページでもapple-touch-iconが要求されるっぽい
設置方法
1.「apple-touch-icon.png」というファイル名のPNG画像としてサイトのルートディレクトリに置く
大きさはとりあえず256×256px位
2.headに下記コードを記述
<link href="http://URLが入ります/apple-touch-icon.png"
rel="apple-touch-icon">
- iPhoneは記述しなくても勝手に読みにいくけど、
Androidではこの設定が必要 - precomposedというオプションは今はあまり気にしなくてもいいけど
もしAndroid2.1に対応する場合は必要
気をつけること
- 透過色は真っ黒になるので注意。
角丸処理は勝手にやってくれるから無視。 - アイコン画像が置かれるURLにベーシック認証がかかっていると確認できない。
- URLはフルパスで記述。
(Androidではサイトルートや相対パスだと認識しないことがある) - Galaxyの場合は一度ブックマークで登録してからでないと、
アイコンが反映されない
参考サイト:Androidは「apple-touch-icon」でいろいろハマるので要注意
browserconfig.xml
Windows8のIE11のライブタイルで、ユーザーがサイトをピン留めするときに自動的に読み取られるファイル。
下記URLで画像とXMLファイル勝手に生成してくれる。
Web サイトを Windows 8.1 のタイルにしよう - Web サイトをピン留めする
画像サイズが4つ分(128×128、270×270、270×558、558×558)必要なので、558×558以上でなおかつ高さ270でもトリミングしやすいファイルを用意する必要有。めんどい。
rssを設定すると、設定した画像が小さく表示され、タイトルが流れるようになるっぽい。
あと、まじめに検証したわけではないけど、
Basic認証かけていると確認できないやつかも。
(Basic認証がかかった開発環境では確認できなかったものの、本番では表示された経緯があるので。)
参考サイト:browserconfig.xmlの作成方法