スマホ用のWebクリップアイコンapple-touch-icon.png(ファビコンのようなもの)を設置する

今日も絶賛ブログの環境整備中です。いやー全然終わらないですね。

WordPressで、テーマ「STINGER5」を使っているんですが、カスタマイズのまとめ的なページから色々辿って行くと、iPhoneのサファリでファビコンのようなWebページ専用のアイコンがどうやら、STINGER5のアイコンになっているらしいんですよ！
参考：ファビコンを設定したならアップルタッチアイコンも作ろう

まじだー(；´∀｀)

少し前に書いた記事「ファビコンを設定する。←非常に重要。WordPressにも対応。」でファビコンがSTINGER5のもので、これは対策してましたが、まだそんなものが存在していたとは…！

apple-touch-icon.pngってなんなの？

調べてみると、apple-touch-icon.pngという画像ファイルは、iPhoneのサファリの最初の画面に表示されたり、Webページを「ホーム画面に追加」した時のアプリアイコンとして表示されるものらしい。

名前からして明らかにアップルさん専用なんだろうと思っていたら、Androidも同じファイル名で同じような用途で使われているそうです。

派生でapple-touch-icon-precomposed.pngというのもある

後ろに-precomposedが付いたものも存在するようだ。

こちらは何なのかというと、precomposedの意味が、用意されている、前もって準備されているという意味で、アップルさん余計なことしないでね。ということです。

具体的には、-precomposedを付けないでいると、アイコンにハイライトや影等がついたりします。
今はフラットデザインになってるので影響なさそうですが、昔のOSの人たちには意図しない表示になってしまう可能性があります。

今後またアップルさんの機嫌次第でどうなるか分からないので、とりあえず余計なことをして欲しくないのであれば-precomposedが付いているファイルを使いましょう。

Androidも同じでいいの？

同じで大丈夫です。
でもAndroidなので、ごく一部で、おかしな表示になる機種もあるようです。

アイコンのサイズは決まってるの？

ファビコンの、16*16pxのように決まった一つのものはないです。
最低でも初期iOSのアイコンサイズである57*57px以上はあった方が良いでしょう。

iOSは普通のアプリのアイコンサイズと同じなのできっちり対応したい場合は、大量に複数のサイズを用意して、全部羅列して書いてもいいと思います。
でもやっぱり今後どうなるかは、アップルさんの機嫌次第です。今のところは以下で足りそう。

<link rel="apple-touch-icon-precomposed" sizes="152x152" href="icon-76@2x.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon-72@2x.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="icon-60@2x.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-57@2x.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="icon-76.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72.png">
<link rel="apple-touch-icon-precomposed" href="icon-57.png">

ただ、これはiOSに限った話で、Androidにも最適なサイズで全てカバーすると20個を超えるそうです。
多くの企業はそんなめんどくさいことやってられるかと、1ファイルのみ大きめの画像を置いてる例がほとんどです。
参考：iOSのWeb Clip機能で使うWebpage Iconのまとめと、作成方法

ちなみに私は今のところの最大サイズである152*152pxで作りました。

apple-touch-icon-precomposed.pngを設置する

サイトのルートディレクトリに「apple-touch-icon-precomposed.png」を置いておくだけです。

Androidで表示できないとか、ルートに画像置けないって場合は、headタグ内に以下の1行を追加してみて下さい。

<link rel="apple-touch-icon-precomposed" href="[配置したpathかURL]/apple-touch-icon-precomposed.png">

画像を用意してない人で画像編集ソフト入れてない方はGIMPを入れて作成するのがお勧めです。
前回記事「GIMPで角丸の付いたアイコンを作る方法」は、今回の画像用意するためでしたｗ

WordPressのテーマ「STINGER5」では、テーマの中のimagesに入っているので、用意した画像で上書いてしまえば完了です。

Webクリップアイコンの確認方法

iPhoneの手順

iPhoneはサファリで自分のサイトを開いて、下部真ん中のボタンを選択。

ホーム画面に追加を選択。

追加を選択

ホームに戻ると追加されています。（前のもあります）

Androidの手順

Androidもほとんど同じで、ブラウザはChrome使ってます。
まず右上のメニューボタンを選択。

ホーム画面に追加を選択。

追加を選択。

ホームに追加完了。

古いWebクリップ画像を取得していた場合

キャッシュが効いて、新しいものが取得出来ない可能性が高いのでキャッシュのクリアをしましょう。

iPhoneのキャッシュクリア

設定画面からサファリのアプリを選択し、クッキーとデータを削除を選択。

Androidのキャッシュクリア

Chromeのメニューから、履歴＞閲覧データの消去

本来ならキャッシュの消去だけでいけるかもしれないですが、上記の状態でクリアしてChromeを再起動してみましたが、前回のアイコンが出てきました。
アプリの設定からキャッシュを削除してもダメで、データを削除して再度試してみると、アプリのデフォルトアイコンにファビコンが乗っかったアイコンがホームに追加されました。

もう一度データを削除して試したら正常になりました。Androidはこれだから…(‘A`)

終わりに

普段Webサイトの運用していないと色んなところでつまづきますね。
でも勉強になりました。スマホで普段ブラウジングしないので、自分のブログがどんな風に見えるか実機で確認出来て良かったです。
レスポンシブなテーマを選んだのである程度はスマホ対応出来てましたが、まだまだ改善の余地はあるので頑張ってカスタマイズしていこうと思います。

え？

ラブライブのスクフェスが何でどっちにも入ってるんだだって？

それはもちろん、ことりちゃんが可愛いからですよ！

あ、そういえば今日は穂乃果ちゃんの誕生日でした。おめでとうございます。

メミ
（*・8・）　　穂乃果ちゅん！
ﾐ,,””” 彡
“ｏ-ｏ”

川
（(　)）

 - STINGER, Webサイト構築, WordPress ラブライブ!