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



現在のページを共有する



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

iOSのWeb Clip機能で使うWebpage Iconのまとめと、作成方法 これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方
iOSのWeb Clip機能で使うWebpage Iconのまとめと、作成方法 パスワード管理ソフトKeePassをDropboxやGoogleDriveで共有する方法
iOSのWeb Clip機能で使うWebpage Iconのまとめと、作成方法 PukiWikiのロゴURLを変更
iOSのWeb Clip機能で使うWebpage Iconのまとめと、作成方法 「最新版」WordPressに各種ソーシャルメディアボタンを追加する方法
iOSのWeb Clip機能で使うWebpage Iconのまとめと、作成方法 Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法
iOSのWeb Clip機能で使うWebpage Iconのまとめと、作成方法 Web Fontの使い方とGoogle Fontsのオススメフォント 10選
レビュー投稿機能とレビューへの評価 レビュー投稿機能とレビューへの評価

おすすめの記事

Linuxでサーバを構築するに当たって必要になる基礎知識

Linuxでサーバを構築するに当たって必要になる基礎知識

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設定をしよう

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設…

使うであろう文字だけの、HTML・XHTMLエンティティシート

使うであろう文字だけの、HTML・XHTMLエンティティシート

知らなきゃ損!WordPressの表(テーブル)はExcelで作ろう!

知らなきゃ損!WordPressの表(テーブル)はExcelで作ろう!

最新のXAMPPをインストールし、安全・高速に運用する方法

最新のXAMPPをインストールし、安全・高速に運用する方法

iptablesで設定したパケットフィルタリングが正しく動作しているかテスト

iptablesで設定したパケットフィルタリングが正しく動作してい…

WordPressの最速キャッシュを探せ!APC、memcached、Transients APIを比較

WordPressの最速キャッシュを探せ!APC、memcached、Transients…

rsyslogを利用したログファイル作成と、logrotateを利用したログのローテーション

rsyslogを利用したログファイル作成と、logrotateを利用したロ…


いただいたコメントなど

  1. KERBEROS のコメント:

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

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

    • oxy のコメント:

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

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

コメントを残す

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

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