えっ、3種のアイコン設定が必要なの!? ファビコン、Apple-touch-icon、Windowsタイル

サーバーをいじっているといろんなことが発見できます。
WordPressを導入した時に行うのが、ファビコンの設定ですね。

タブとか、ブックマークとかのアイコンのことです。↓



で、、、まあ、時代も変わり、ウェブサイトも色々と対応をしなけりゃいけないんですね。
ファビコンのほかにApple-touch-iconとWindowsタイルにも対応しないといけないようです。

※後日談
今回のこうした苦労も、Jetpackのサイトアイコンを導入すると一発でクリアできます
参考 → Jetpackで機能をさらに2つ追加しました~サイトアイコンとSubscriptions



1.ファビコンの設定

テーマを「Simplicity」に変更し、カスタマイズにてファビコンの設定を行ったのですが、個別ページにファビコンは表示されません。
どうしようかなと思っていときに、たまたまファイアバードのエラーログを見ていると

 File does not exist: /…/public_html/favicon.ico



がひたすらにエラーとして吐き出されるのを発見。
favicon.ico(ファビコンファイル)を一番上に置け、ということですね。
さっそくFTPを利用して、ファイルを置いたところ、全ページに設定が反映されました。

2.Apple-touch-icon

よし、どんなもんだい!

とエラーログを確認しに行くと、今度は

File does not exist: /…/public_html/apple-touch-icon.png



apple-touch-icon.pngがないと・・・
調べてみると、iPhoneなどで使うアイコンのようです・・・。
参考 → iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう | 編集長ブログ―安田英久 | Web担当者Forum

スマホ用でいるのか・・・


とがっかりしつつも、作成です↓




ぶっちゃけて言うと、全部使い回し・・・


使っているのはチョコレートグラミーの写真を切り抜いたもので、Google+などのプロフィール写真もすべてこれです。
チョコグラがMoriの統一ブランドにしておけば楽だし、パッと見てわかりますよね。
そういう効果もちゃんと狙ってやってます。

手抜きじゃないよ・・・。

ので、これも一番上に置けとな。ホイッ!

3.Windowsタイル

で、よしよし、ばっちりと思って、エラーログを調べに行くと、、、

 File does not exist: /…/public_html/browserconfig.xml



がっかり・・・orz


しかも、xmlってさ・・・わからんぜよ・・・。

調べてみると、Windowsタイル用だそうですよ・・・。
参考 → browserconfig.xmlの作成方法 | ウェブアラカルト


誰がもりべやのタイル欲しがるんや・・・


純粋にそう思いましたが、、、、


そういう方もいるかもしれない。いや、むしろ、


その人を大事にしなきゃ!!


・・・そうでした。

でこちらのサイトで作成 → Create a Windows 8.1 tile for your site – Build My Pinned Site – Microsoft Internet Explorer


完成 ↓



で、ペッとxmlと4種のアイコンを吐き出してくれました。



ヘッダーに書き込みとファイルをトップにペッと入れたら完成です。

いやあ、、、手間だった・・・。

これでめでたし、めでたしかな。。。


怖いのでもうエラーログチェックはやめます


※ 追記 apple-touch-icon
apple-touch-icon.png をサイトに設定する意味のまとめ – drk7jpによると機種対応により6種類いるそうです。

iPhone4,4S (Retina対応機種)は114 x 114 px のアイコン画像(PNG形式)
 1. apple-touch-icon-114×114-precomposed.png
 2. apple-touch-icon-114×114.png
iPad は72 x 72 px のアイコン画像(PNG形式)
 3. apple-touch-icon-72×72-precomposed.png
 4. apple-touch-icon-72×72.png
それ以外は 57 x 57 px のアイコン画像(PNG形式)
 5. apple-touch-icon-precomposed.png
 6. apple-touch-icon.png

もしくは、iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう | 編集長ブログ―安田英久 | Web担当者Forumよると、apple-touch-icon-precomposed.pngという画像も作ればよいという話らしいですが・・・。
力尽きましたので、当分放置します


後日、Jetpackのサイトアイコンで簡単に完了しました → Jetpackで機能をさらに2つ追加しました~サイトアイコンとSubscriptions



次回 → Jetpackのサイト統計情報がイケてる!