2015/08/20今日も絶賛ブログの環境整備中です。いやー全然終わらないですね。́∀`)少し前に書いた記事「ファビコンを設定する。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は普通のアプリのアイコンサイズと同じなのできっちり対応したい場合は、大量に複数のサイズを用意して、全部羅列して書いてもいいと思います。今後どうなるかは、アップルさんの機嫌次第です。今のところは以下で足りそう。href="icon-57.png">ただ、これはiOSに限った話で、Androidにも最適なサイズで全てカバーすると20個を超えるそうです。多くの企業はそんなめんどくさいことやってられるかと、1ファイルのみ大きめの画像を置いてる例がほとんどです。Iconのまとめと、作成方法ちなみに私は今のところの最大サイズである152*152pxで作りました。apple-touch-icon-precomposed.pngを設置するサイトのルートディレクトリに「apple-touch-icon-precomposed.png」を置いておくだけです。Androidで表示できないとか、ルートに画像置けないって場合は、headタグ内に以下の1行を追加してみて下さい。href="[配置したpathかURL]/apple-touch-icon-precomposed.png">画像を用意してない人で画像編集ソフト入れてない方はGIMPを入れて作成するのがお勧めです。前回記事「GIMPで角丸の付いたアイコンを作る方法」は、今回の画像用意するためでしたwWordPressのテーマ「STINGER5」では、テーマの中のimagesに入っているので、用意した画像で上書いてしまえば完了です。Webクリップアイコンの確認方法iPhoneの手順iPhoneはサファリで自分のサイトを開いて、下部真ん中のボタンを選択。ホーム画面に追加を選択。追加を選択ホームに戻ると追加されています。(前のもあります)Androidの手順Androidもほとんど同じで、ブラウザはChrome使ってます。右上のメニューボタンを選択。ホーム画面に追加を選択。