ホームページのアイコンはPC用とスマホ用では違う、スマホ用のアイコンは「apple-touch-icon.png」をアップロードしておく

appleiconsetting.jpgスマホファーストの時代ということはわかっていてもなかなか対応できていないことがあるものだ。そのひとつがホームページのアイコンである。PC用はファビコン「favicon.ico」で設定するのが標準だが、スマホ用は「apple-touch-icon.png」が標準だ。厳密にいうとiPhoneやiPodなどのApple用のアイコンが「apple-touch-icon.png」で、アンドロイド用は別なのだが「apple-touch-icon.png」をサポートしているようだ。さらにiPhone7や6や5や4などでサイズが微妙に違うがおおむね256ピクセルで作成したpng形式なら自動的に縮小してくれるので表示してくれるようである。

iPhoneのサファリでホームページを閲覧し、ブックマークに保存しようとすると以下のような画面になり、左側にアイコンが表示される。このアイコンはWEBサーバのルートにある「apple-touch-icon.png」を表示している。

iPhoneicon.jpg

当サイトでは以下のファイルを「apple-touch-icon.png」としてアップしてある。

apple-touch-icon.png

スマホ用のアイコン設定方法

まずアイコンを作成する。アイコンはPNG形式で256ピクセル四方の正方形の画像とする。iPhoneの機種ごとに違うサイズのアイコンが必要らしいが、とりあえずこの1種類だけでも機能するようだ。ファイル名は「apple-touch-icon.png」とする。

次にホームページを表示するルートフォルダに作成した「apple-touch-icon.png」をFTPでアップロードする。

そして、htmlのヘッダ内に

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

を追加しておく。
念のためPC用のファビコンと並べて

<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />

とするのがいいだろう。

チェッカーサイトがあったので調べてみると無事に表示されているようである。
以下はhttp://realfavicongenerator.net/favicon_checkerにてチェックした画像

faviconchecker.jpg

「apple-touch-icon.png」に関する参考記事

faviconをマルチファビコンとapple-touch-iconの2枚で済ます!
http://www.02320.net/apple-touch-icon_for_android/
 
Web Clipアイコンを指定する
http://www.tagindex.com/html5/page/link_webclip.html
 
▼WEB担当者フォーラムより
iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう
http://web-tan.forum.impressrd.jp/e/2010/06/15/8178
apple-touch-iconやbrowserconfig.xmlなどWebサイトのスマホ用アイコン指定の最新情報を調べてみた
http://web-tan.forum.impressrd.jp/e/2014/01/21/16791


このページはTwitter、はてな、Google+、FacebookなどのSNSで以下のような反響があります。
なお、コメントはFacebookにログインしている状態でのみ受け付けております。セキュリティ上の観点からこのようにしております。ご了承願います。
このエントリーをはてなブックマークに追加  
 

この記事のURL「https://dm2.co.jp/2017/05/apple-touch-iconpng.html」をQRコードで表示
この記事のURL「https://dm2.co.jp/2017/05/apple-touch-iconpng.html」をQRコードで表示「https://dm2.co.jp/2017/05/apple-touch-iconpng.html」
パソコンで表示されたページをスマフォでも見たい場合は、このQRコードをリーダーで読むと表示されます。