apple-touch-icon.png , apple-touch-icon-precomposed.png の404エラーの対処

公開日| 2011年9月2日   更新日| 2012年9月14日   コメントはありません。

今回は、appleの iPhone , iPad に関してです。

apple-touch-icon.png
apple-touch-icon-precomposed.png
の2つの画像ファイルが存在しないとアクセスログにあった場合の対処です。

この2つの画像は、iPhone , iPad からアクセスされたときに、無条件にサイトのルートディレクトリに先の2つの画像をダウンロードしようとします。
(この2つの画像が何に使われているかは、以降を参照。)

エージェント名には、
Reeder/2.5.1 CFNetwork/485.12.7 Darwin/10.4.0
のようにDarwinの記載があるでしょう。

これは、結構、iPhone , iPad からのアクセスが多いサイトでは、頻繁に発生しているでしょう。
この対処について、簡単に解説してみます。

apple-touch-icon.png
iPhone , iPad でサイトのアイコンに利用される画像ファイルになります。
この画像は、iPhone , iPad用にサイズとデコレーション(光沢感を出すためのシェーディングや四隅を角丸にするなどの加工)を行います。

apple-touch-icon-precomposed.png
この画像もiPhone , iPad でサイトのアイコンに利用される画像ファイルになります。
ただし、この画像は、iPhone , iPad用にサイズと四隅を角丸に加工するサイズあわせのみを行います。
画像の加工処理が、サイズ以外はほとんど行われないことがapple-touch-icon.pngとの違いです。

対処は簡単、画像ファイルを設置するだけ

この対処は、非常に簡単で、先の2つの画像ファイルを設置するだけです。

サイズは、自動的に変更してくれますから、あまり意識する必要はないと思います。

最終的なアイコンサイズは、

iPad : 72 x 72 (px)
iPhone : 57 x 57 (px)

です。

このサイズへの拡大・縮小に耐えられる程度のデザインなり、画像サイズが良いでしょうね。

apple-touch-icon-precomposed.png の画像が設置されると、この画像が優先的に使用されるみたいです。

アクセスの順番は、
1. apple-touch-icon.png
2. apple-touch-icon-precomposed.png
なので、毎回、両方ともに読み込もうとしていますから、単純にファイルを設置する場合は、エラー出力させないために2つの画像ファイルを設置することになると思います。

また、ヘッダ情報に指定することもできます。
必ず、コンテキスト情報を読み込んだ後に、各画像ファイルを読み込みますから、ヘッダ情報にiPhone , iPad 用のアイコン用画像ファイルがどこにあるか指定してあげると良いことになります。

<link rel="apple-touch-icon" href="http//exmaple.com/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="http//exmaple.com/apple-touch-icon.png" />

のように指定すれば、先のデフォルトのファイル名で探すことはないようです。

Wordpressなら、header.phpに以下のように追加すると良いでしょう。

<link rel="apple-touch-icon" href="<?php bloginfo('url'); ?>/apple-touch-icon.png" />

どうでしたか?

画像は、自分の好きなように作成できます。
ただ、背景などにアルファチャネル(透過)を使用しても黒へ変換されるだけみたいなので、気をつけましょうね。


コメント

口コミ・評判を投稿 :

ブラウザの JavaScriptが無効となっている場合、コメントの投稿はできません。
コメントを投稿するには、JavaScriptを有効にしてください

お名前 *

メールアドレス *
(口コミ・評判欄には、表示されませんが入力が必要です。)

サイトアドレス



  • はてなブックマークへ追加する
  • Facebookでシェアする
  • twitter でつぶやく
  • Google Plusでシェアする
  • Pocketでシェアする
ページトップへ