スマホファーストの時代ということはわかっていてもなかなか対応できていないことがあるものだ。そのひとつがホームページのアイコンである。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」を表示している。
当サイトでは以下のファイルを「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にてチェックした画像
「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
興味ある方は最新情報を調べてください。
この記事を書いた遠田幹雄は中小企業診断士です
遠田幹雄は経営コンサルティング企業の株式会社ドモドモコーポレーション代表取締役。石川県かほく市に本社があり金沢市を中心とした北陸三県を主な活動エリアとする経営コンサルタントです。
小規模事業者や中小企業を対象として、経営戦略立案とその後の実行支援、商品開発、販路拡大、マーケティング、ブランド構築等に係る総合的なコンサルティング活動を展開しています。実際にはWEBマーケティングやIT系のご依頼が多いです。
民民での直接契約を中心としていますが、商工三団体などの支援機関が主催するセミナー講師を年間数十回担当したり、支援機関の専門家派遣や中小企業基盤整備機構の経営窓口相談に対応したりもしています。
保有資格：中小企業診断士、情報処理技術者など
会社概要およびプロフィールは株式会社ドモドモコーポレーションの会社案内にて紹介していますので興味ある方はご覧ください。
お問い合わせは電話ではなくお問い合わせフォームからメールにておねがいします。新規の電話番号からの電話は受信しないことにしていますのでご了承ください。
【反応していただけると喜びます（笑）】
記事内容が役にたったとか共感したとかで、なにか反応をしたいという場合はTwitterやフェイスブックなどのSNSで反応いただけるとうれしいです。
遠田幹雄が利用しているSNSは以下のとおりです。
facebook https://www.facebook.com/tohdamikio
ツイッター https://twitter.com/tohdamikio
LINE https://lin.ee/igN7saM
チャットワーク https://www.chatwork.com/tohda
また、投げ銭システムも用意しましたのでお気持ちがあればクレジット決済などでもお支払いいただけます。
※投げ銭はデジタルコンテンツ購入という通販のしくみにしました。
※投げ銭は100円からOKです。シャレですので笑ってください（笑）
