Maccle

WebページをiPhoneのホーム画面にブックマークしたときのアイコンとタイトルを変更する方法

December 17, 2012
約 3 分
WebページをiPhoneのホーム画面にブックマークしたときのアイコンとタイトルを変更する方法

今更感は否めないTipsですが…
iPhoneのSafariから開いているWebページをホーム画面にブックマークするときのあれこれについて。

どちらもとっても簡単なのでスマホ対応なブログなんかやってる人は是非。

ホーム画面にWebページをブックマークしたときのアイコンの変更

iPhoneやiPadのホーム画面には、ご存知の通りアプリだけでなく頻繁にチェックするようなWebサイトのショートカットをブックマークとしてアプリと同じように配置しておくことができます。

でもそのままだと、サイトのキャプチャイメージがアイコンとして自動的に設定されてしまいます。bookmarkicon1

ホーム画面に自分のサイトをブックマークしてくれるようなiPhoneユーザーがいたら、そりゃ「ありがとう!」の意味も込めて他のアプリと並んでも違和感のない素敵なブックマークアイコンにしておきたいですよね!

そんなときは、あなたのWebサイトのルートディレクトリに “apple-touch-icon.png” という名前のPNGイメージファイルを置いておくだけで、iOS(厳密にはMobile Safari)がブックマークに利用するアイコンとして認識してくれます。

まぁ、考え方は”favicon.ico”と同じですね!

アイコン変更手順

  1. まず、アイコンを作成しましょう!
    ホームスクリーンのアプリのアイコンは57px × 57pxなので、倍の解像度であるRetinaディスプレイを考慮して、114px × 114px の正方形のアイコン用PNG画像を用意すればいいってことですね〜!
  2. apple-touch-icon.png” という名前にする。
  3. FTPクライアントなどでサイトのドキュメントルートに作成したPNGファイルを転送すれば完成!
    → “http://samplesite.com/apple-touch-icon.png” としてアクセスできればOK。
    (sample.comはあなたのサイトのドメインです)!

これで、誰かがあなたのサイトをMobile Safariからホームスクリーンにブックマークしたときに、iOSが自動的に “apple-touch-icon.png” をアイコンとしてくれますよー。

さて、もう一度ホーム画面にブックマークしてみようとすると…bookmarkicon2おおっ!ちゃんとアップロードしたアイコンを認識してる!

ホーム画面はこんな感じでまるでネイティブアプリのようです!bookmarkicon3

[iOS 6以降]ホーム画面にWebページをブックマークしたときの名前の変更方法

iOS 6から、ホームスクリーンにWebサイトのブックマークアイコンを追加したときにアイコンの下に表示される文字列も変更できるようになっています。

こちらも簡単、以下のHTMLのmetaタグを挿入するだけ!

SiteTitle” をホーム画面に表示させるサイト名として設定しておきます。

タイトルが長いとホーム画面での表示が省略されてしまうので、英字でのタイトルならは11文字まで、日本語(マルチバイト)ならば6文字までが省略されない最大文字数です。

About The Author

某IT系なんちゃってエンジニアヨーダ
Apple好きだけど盲目マカーは気持ち悪いと思ってる中道だと思い込んでるしがないダメダメエンジニア。

今もってるApple製品↓
Macbook Pro 15 inch, iMac 27 inch (Late 2009), iPhone 6 Plus, iPad (初代! いらない!)
Follow :

Comments & Trackbacks

  • Comments ( 1 )
  • Trackbacks ( 0 )
  1. あいうえおじさん

    はじめまして!すばらしい情報をありがとうございました!
    ホーム画面に追加する際、例えばページ内リンクでページ下部などに移動してからホーム画面に追加すると、そのURLでホーム画面に追加されてしまいます(例えばhttp://www.abc.com/#3など)。それをページ内リンクで何処に行こうが、ホーム画面からブラウザを起動した際にはページの一番トップhttp://www.abc.comが開くようには出来ないでしょうか?

Leave A Reply

*

Comment On Facebook