favicon と apple-touch-icon ブログのアイコンに関する設定

最近 New StartPress （アクセス解析プラグイン）のログにこんなログが見られるようになった。

apple-touch-icon という画像にアクセスしてるみたい。
だけれどそのサイトには apple-touch-icon を設置していないので順番に色々探している感じ。

サーバーのログを覗いてみた。
エックスサーバーでは
サーバーパネル > 統計 > ログファイル – アクセスログの一覧：当日ダウンロード

www.example 111.222.333.444 - - [02/Oct/2017:09:57:19 +0900] "GET /apple-touch-icon-120x120-precomposed.png HTTP/1.1" 404 17809 "-" "MobileSafari/602.1 CFNetwork/811.5.4 Darwin/16.6.0"
www.example 111.222.333.444 - - [02/Oct/2017:09:57:19 +0900] "GET /apple-touch-icon-120x120.png HTTP/1.1" 404 17809 "-" "MobileSafari/602.1 CFNetwork/811.5.4 Darwin/16.6.0"
www.example 111.222.333.444 - - [02/Oct/2017:09:57:19 +0900] "GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 17809 "-" "MobileSafari/602.1 CFNetwork/811.5.4 Darwin/16.6.0"
www.example 111.222.333.444 - - [02/Oct/2017:09:57:19 +0900] "GET /apple-touch-icon.png HTTP/1.1" 404 17809 "-" "MobileSafari/602.1 CFNetwork/811.5.4 Darwin/16.6.0"
www.example 111.222.333.444 - - [02/Oct/2017:09:57:19 +0900] "GET /favicon.ico HTTP/1.1" 200 - "-" "MobileSafari/602.1 CFNetwork/811.5.4 Darwin/16.6.0"
www.example 111.222.333.444 - - [02/Oct/2017:09:57:19 +0900] "GET /apple-touch-icon-120x120-precomposed.png HTTP/1.1" 404 17809 "-" "MobileSafari/602.1 CFNetwork/811.5.4 Darwin/16.6.0"
www.example 111.222.333.444 - - [02/Oct/2017:09:57:20 +0900] "GET /apple-touch-icon-120x120.png HTTP/1.1" 404 17809 "-" "MobileSafari/602.1 CFNetwork/811.5.4 Darwin/16.6.0"
www.example 111.222.333.444 - - [02/Oct/2017:09:57:20 +0900] "GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 17809 "-" "MobileSafari/602.1 CFNetwork/811.5.4 Darwin/16.6.0"
www.example 111.222.333.444 - - [02/Oct/2017:09:57:20 +0900] "GET /apple-touch-icon.png HTTP/1.1" 404 17809 "-" "MobileSafari/602.1 CFNetwork/811.5.4 Darwin/16.6.0"

404という数字が見えるので /apple-touch-icon-120×120-precomposed.png という名前のファイルがないよ。ってことかな。
設置してないし。

apple-touch-icon とは

このapple-touch-iconというのは、iOSのホーム画面にそのサイトのブックマークを保存するときに表示されるアイコンで、そのアイコンが設定されていない時はサイトが縮小されて表示される。
管理しているサイトは、アクセスがほぼスマートフォンなのでちゃんと設置しなければいけません。

でも、その人がホーム画面でうちのアイコン表示するたびに、その都度アイコンだけ探しに来るのかな？
同じアドレスから何度もアイコンだけ探しに来てるんだよな。

サイズ

各デバイスのサイズは色いろあるようですが、大きめのファイルであれば縮小して表示してくれるみたいです。
しかし、デバイスのサイズが多種多様存在するので、この際ファビコンを一括生成してくれるサイトで一気に作ってしまいます。

作成

様々なファビコンを一括生成　favicon generator
ここでファビコンを作成。
名前がファビコンと入ってますがしっかりapple-touch-iconも作成してくれます。
260ｘ260の以上の画像を一枚用意して作成します。
favicon generator にかけると
ファイルをダウンロードすると40個のファイルが表示されます。

ここで注意。
スマホに表示される大きめの画像（デザインA）とブラウザのタブの隅に表示される小さめの画像（デザインB）のデザインが同じでいいのかという問題がおこります。
なので今回は
16ｘ16、32ｘ32，48ｘ48　このサイズを別のデザインに変更します。

シンプルなデザインの画像を260ｘ260で用意してふたたび favicon generator にかけます。
そのうち小さい画像のファイル（デザインB）
favicon-16×16.png
favicon-32×32.png
favicon-48×48.png
favicon.ico

という4つのファイルを、ファイルを先ほどのデザインAのファイルと入れ替えます。

これで小さいデザインと、大きめのデザインを分けられます。

設置

favicon generator で作成すると、以下の様な画像をファイルをヘッダー内に書き加えるように言われますが、コードのままだとルートディレクトリにそのまま画像を置くことになります。
あとでデータを見るとわかりにくいので、今回は新たに favicons という新しいディレクトリを作成し、そこに画像を置いてそこから呼び出します。

新しくディレクトリを作成したら、このなかに40個の画像を全部入れる。

リンクを指定し直す。
href=”/apple-touch-icon-57×57.png
これを
href=”/favicons/apple-touch-icon-57×57.png

に全て変更する。

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicons/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicons/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicons/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-160x160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-196x196.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="manifest" href="/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#2d88ef">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

全て変更し終わったら
<header>・・・・</header> のなかに書き加えます。

チェックする

https://realfavicongenerator.net/
ファビコンとアップルタッチアイコンをチェックできるサイト

 

参考サイト

スポンサーリンク

タイトルとURLをコピーしました