かつてファビコンの設定をせっせとした記憶がありますが、時代が変わりましたね～。
スマホやタブレット用に、ホーム画面ショートカット用アイコンを用意する時代です。
サーバーのエラーログで、画像がないというエラーが頻発。
（会社の）サーバーのエラーログを見ていたら、ファイルがないというエラーがちらほら。
[html]
File does not exist:
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-114x114.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
[/html]
数年前に外部に作ってもらったサイトだったけど、まさかファイルが入ってなかったなんてことないよな…と思って調べてみたら、スマホやタブレットのホーム画面用アイコンのファイル名だということが分かりました。ウェブクリップと呼ぶらしいです(・∀・)
よし、やろう(・∀・)
ウェブクリップの設置のルール
- サイトのrootディレクトリ（ルートディレクトリ＝indexファイルと同じ階層）にファイルを置く
- PNG形式（拡張子がxxx.png）
- 正方形で画像サイズは適当OK（デバイスによって拡大縮小・正方形にトリミングされます） ←詳細は以下
ウェブクリップの設定で気を付けたいこと
光沢あり・なしについて
iPhone
rel属性を書き換えれば、光沢ありなしが設定できます。
- 光沢あり apple-touch-icon
- 光沢なし apple-touch-icon-precomposed
Androidは気にしないって場合は、画像に光沢処理して下のファイル名つけてサーバーに放り込むだけでOK。
linkタグ設定しなくてもいいんです。
- 光沢あり apple-touch-icon.png
- 光沢なし apple-touch-icon-precomposed.png
Android
relを設定しても光沢なしになる。
光沢を入れたかったら、画像に光沢処理をしたものを入れておく。
iPhone・Androidで光沢ありの画像を使いたい場合
- 光沢処理したPNG画像を用意
- relは、光沢なし apple-touch-icon-precomposed を書いておけば、iPhone・Androidで光沢処理された画像が表示される
[html]
<link href="apple-touch-icon-precomposed.png（ファイル名は任意でOK）" rel="apple-touch-icon-precomposed" />;
[/html]
画像サイズについて
私の場合は以下
- 正方形（角丸は自動でなるからやらなくてOK）
- 150 × 150px で作成。（デバイスに応じて自動的に縮小拡大される）
正方形にトリミングされてしまうので、最初から正方形で作る方が良いです。
サイズは、大きすぎて読み込みの負荷になっても困るけど、小さすぎて大きいデザインで見て荒かったらｲﾔなので、iPhone4の144pxより大きめの150pxで作成しました。
面倒だからおススメしないけど…デバイス毎に画像設定も可
デバイス毎に画像を用意して設定したい場合は、linkタグにデバイス毎のsize属性でサイズを設定する。
[html]
<!-----iPad用--------------------------------->
<link rel="apple-touch-icon" sizes=&"72x72" href="apple-touch-icon-72x72.png" />
<!-----iPhone 4用--------------------------------->
<link rel=”apple-touch-icon” sizes=”114×114″ href=”apple-touch-icon-114×114.png” />
[/html]
ウェブクリップは画像を用意しなければサイトのキャプチャになるから、別にやらなくても大丈夫
私は出来るだけ楽にやりたいので、linkタグでrel属性を光沢なしで設定し、画像に光沢処理をしましたｗ
こうすればAndroidもiPhoneも同じ画像が表示されますからね♪
左がウェブクリップ設定前・右がウェブクリップ設定後。
ちなみに、このサイトのfaviconはWPのテンプレートで設定されていたので新たに作りましたが、仕事ではfaviconと同じものを使いまわしましたｗ
これからは、favicon設定したらこれもやっておきたいですね♪
