LoginSignup
15
14

More than 5 years have passed since last update.

Web Clipは登録しないとエラーでるから登録しようねって話。

Last updated at Posted at 2014-04-03

エラーログに、

  • 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の作成方法

15
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
14