apple_touch_icon

apple touch icon(Webクリップ)を設定しよう

apple_touch_icon
▲apple_touch_icon クリックで拡大

タブレットやスマホでブックマーク等でURLを登録すると現れる“apple touch icon”

キレイなアイコンを設定してカッコよくしちゃおう!

コレ…Androidの4以降(Chrome)にも対応。

favicon iconだけだと上のイメージのようにアイコンの中央に小さく表示される。

iconを一切設定していないと、地球のようなイメージの汎用アイコンに。

▼ 設定方法

  • アイコン画像を制作:iPadをターゲットに144×144ピクセルでPNGフォーマット保存
  • 画像をアップロード
  • index.htmlの<head>~</head>内に<link href=”(アップロード先URLとファイル名)” rel=”apple-touch-icon” />を追記