iOSのWeb Clip機能で使うWebpage Iconのまとめと、作成方法


投稿日:2014年9月18日
  • 7
  • 11



ふとNginxのログを見てみると404エラーがずらずらと

webclip

apple-touch-icon-152×152-precomposed.png」という画像が無いという404エラーが発生。
そもそも、そんな画像を指定した覚えがないな」と思いつつ検索してみると、iPhoneやiPadで「Web Clip」の際に使う「Webpage Icon」が無いというエラーのようです。

そもそも作ってないんだから見つからなくてあたりまえですが、「俺好みのアイコンがねーぞー!どこだー!!」とログに404を残しまくる仕様は、まるでちょっとしたチ◯ピラのようですねw

以下Nginxのエラーログ

2014/09/17 18:50:04 [error] 6246#0: *164 open() "/var/www/html/aqwiki/apple-touch-icon-152x152-precomposed.png" failed (2: No such file or directory), client: 198.162.0.0, server: aqwiki.net, request: "GET /apple-touch-icon-152x152-precomposed.png HTTP/1.0", host: "aqwiki.net"

話題の会社で採用されるWebpage Icon

せっかく記事にするので、思いつくままWebサイトを選んで、どのようなWebpage Iconを作成しているのか調べてみました。

(順不同・敬称略)

URL Iconサイズ アイコン
DeNA 129×129 dena.com_apple-touch-icon
Pocket  144×144 getpocket.com_Pocket_AppIcon_144
Gunosy  213×188 gunosy_apple-touch-icon-dfa4d95faf33b6318c8c19509881180b
価格.com  129×129 kakaku.com_apple-touch-icon-precomposed
日本マクドナルド  114×114 mcdonalds.co.jp_bookmarkicon
mixi  129×129 mixi.net_x001_prec
note  256×256 note.mu_apple-touch-icon-c3495c887ad7a0077f17e3383d2c2f0a
SPIKE  128×128 spike.cc_iphone-icon-78ddf924b095e8f0e95ecfd434bdc9f9
SUZURI  154×154 suzuri.jp_apple-touch-icon152x152-7f2b170776f2df914562c5ef7e8d8722
Dropbox  152×152 www.dropbox.com_4syu_dropbox_webclip_152-vflnR85Xl
Facebook  57×57 www.facebook.com_apple-touch-icon
Google  120×120 www.google.co.jp_apple-touch-icon-120x120
スタートトゥデイ  144×144 www.starttoday.jp_webclip (1)
東京ディズニーランド  144×144 www.tokyodisneyresort.jp_apple-touch-icon

こうして並べてみると、名前は「apple-touch-icon」としながらもサイズはバラバラですね。Appleの仕様変更に振り回されてたまるかとばかりに、大きな画像のみを用意するところが多かったのが印象的です。

それでは、せっかくWeb Clipに登録していただいた方のためにも、アイコンを作成しようと思います。


Web Clipアイコンのフォーマットと作り方

公式ページである「iOS Developer Library」には複数の記述方法が書いてあります。アイコンの作成方法を検索したところ、この辺の仕様を勘違いして解説しているサイトがおおいようです。

単一のアイコンを利用する場合は「サイトのルートディレクトリにapple-touch-icon.pngというファイルを置く」だけで表示されます。

ちなみにiOS8がリリースされましたが、仕様の変更はないようです。

厳密に言えばiPhone 5とiPod touchは120×120、iPadとiPad miniは152×152です。しかし公式には「適当なサイズの画像が見つからない場合は、大きなサイズの画像を縮小して表示する」と書いてあります。
また、複数のサイズを用意した場合はHTMLに以下のように指定しないといけません。

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

さらにツヤなし用、ツヤあり用という指定もあります。こうした細かな仕様に合わせるとなるとAndroid用、GALAXY用と増えていき、2014年現在23個もの画像が必要になるようです。
とても付き合ってられませんねw

大は小を兼ねると言わんばかりに、152×152のアイコンだけ作成します。

アイコン作成用のひな形ですが、なぜかApple側で用意されていません。そこでPhotoshop形式でパスまで付いているDIGLOGさんの配布しているデータを元に作成します。

よいしょ、と作成したのが以下のアイコンです。

一番上が76×76、真ん中が120×120、一番下が152×152

webclip01
webclip01
webclip01

縮小する際にエイリアスをかけてくれれば、わざわざ小さなアイコンを作る必要はなさそうですね。

faviconとたいして変わらないですが、Webサイトのアイコンなんてこんなもんですw



現在のページを共有する



現在のページに関連する記事


おすすめの記事


いただいたコメントなど

  1. KERBEROS のコメント:

    情報ありがとうございました。
    PHPのフレームワークでiPhoneのsafariのみでログイン認証で不具合が起きており。
    エラーログを確認したところ 「apple-touch-icon.png」 のアクセスでエラーになっておりログイン認証部分でも問題を起こしていたようです。
    こちらのページのような対処をしたらあっさりと解決しました。

    あまりに行儀の悪い迷惑なアクセス方法にかなりの時間を取られてしまいました。

    • oxy のコメント:

      ご報告ありがとうございます。
      そんな不具合が発生することがあるんですね。勉強になりました。

      しかしAppleは行儀の悪い仕組みを考えたものですねw

コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。