apple-touch-iconを知りたくて
忘年会から帰宅後、お米から虫が湧いていて、てんやわんやの高橋です。
今回はapple-touch-iconについて調べたことを紹介してみたいと思います。
apple-touch-iconは、スマホでWebサイトをホーム画面に追加する時に表示されるアイコンのことです。
自分はつい最近までapple-touch-iconという名前を聞いたことすらなかったのですが、
業務でエラーログの整理をしている時にapple-touch-icon関連のURLへのアクセスが404エラーとして大量に記録されていたので、調べる機会に恵まれました。
その時のログが以下のような感じです。
2018/11/20 03:17:47 [error] 13039#13039: *1602498 open() "[ドキュメントルート]/apple-touch-icon-120x120-precomposed.png" failed (2: No such file or directory)
2018/11/20 03:17:47 [error] 13039#13039: *1602498 open() "[ドキュメントルート]/apple-touch-icon-120x120.png" failed (2: No such file or directory)
2018/11/20 03:17:47 [error] 13039#13039: *1602498 open() "[ドキュメントルート]/apple-touch-icon-precomposed.png" failed (2: No such file or directory)
2018/11/20 03:17:47 [error] 13039#13039: *1602498 open() "[ドキュメントルート]/apple-touch-icon.png" failed (2: No such file or directory)
2018/11/20 03:17:47 [error] 13039#13039: *1602498 open() "[ドキュメントルート]/apple-touch-icon-120x120-precomposed.png" failed (2: No such file or directory)
2018/11/20 03:17:47 [error] 13039#13039: *1602498 open() "[ドキュメントルート]/apple-touch-icon-120x120.png" failed (2: No such file or directory)
2018/11/20 03:17:47 [error] 13039#13039: *1602498 open() "[ドキュメントルート]/apple-touch-icon-precomposed.png" failed (2: No such file or directory)
2018/11/20 03:17:47 [error] 13039#13039: *1602498 open() "[ドキュメントルート]/apple-touch-icon.png" failed (2: No such file or directory)
何やら複数の画像が要求されているようなので調べてみると端末やOSによって最初に読み込まれる画像のサイズが異なるようです。
apple-touch-iconやbrowserconfig.xmlなどWebサイトのスマホ用アイコン指定の最新情報を調べてみた
また*-precomposedというのは、iOSの古いバージョンでアイコンに光沢加工がほどこされてしまう仕様を避けるために指定するものとなっているようです。
以上から先ほどのログを改めて見てみると、以下のような流れになっていることがわかります。
1. まず、apple-touch-icon-120×120-precomposed.png(iOS7以降のiPhone用の光沢加工がされないアイコン)
2. 1がなければ、apple-touch-icon-120×120.png(iOS7以降のiPhone用アイコン)
3. 2がなければ、apple-touch-icon-precomposed.png(昔のiPhoneなど標準サイズの光沢加工がされないアイコン)
4. 3がなければ、apple-touch-icon.png(昔のiPhoneなど標準サイズのアイコン)
他のログを見る限り最終的には必ずapple-touch-icon.pngがリクエストされているので、この一枚を用意すれば表示自体はできそうです。
準備
検証のためのサイトをGithub Pagesで公開していきます。
今回はカワグチさんの記事を参考に進めていきます。
Github Pagesで高速&お手軽にサイトを公開する
こうして
こうして
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>apple-touch-iconのテスト</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>テキストテキスト</p>
<p>テキストテキスト</p>
<p>テキストテキスト</p>
<p>テキストテキスト</p>
<p>テキストテキスト</p>
</body>
</html>
こうして
こうして
こうです。
ということで無事公開されました。
Github Pagesはなかなかお手軽で便利です。
検証
まずは、特に何も設定していないこの状態でどう表示されるか見てみます。
どうやらサイトのキャプチャ画像がアイコンとして使用されるようです。
次に、apple-touch-icon.pngをheadタグ内にlinkタグで設置してみます。
<link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
無事に指定された画像がアイコンとして使用されました。
また、先ほどのエラーログを完全に消すためには各サイズの画像を用意する必要がありますが、元画像さえあれば下記のようなサイトで簡単に作成することができます。
Favicon & App Icon Generator
まとめ
faviconに比べて認知されていない印象のあるapple-touch-iconですが、スマホユーザーがかなり多い今、設定すべきものであると感じました。
今回のapple-touch-iconのように身近にありながら、知らないことを認識できていないものはまだまだありそうなので、そういうものに気づけるよう注意深く生活していきたいと思いました。
参考
