iPhoneのホーム画面にスクリーンショットではなく、オリジナルアイコンを表示させる方法

ブックマークイメージ画像

ホーム画面にブックマークを置いた時、一番左にあるアイコンになったことはないでしょうか?

これはホームページのスクリーンショットを表示しています。

ただせっかく立ち上げたサイトやブログが、このように表示されてしまって少し残念な気持ちになったので…ここのアイコンを制作して、設定しました。

まずはホーム画面にブックマークを登録する方法から(わかる人は飛ばしてください。)

設定方法を見る方はこちら

ホーム画面にブックマークを登録する方法

Safariのブラウザを立ち上げ下メニューの真ん中ボタンを表示させ、「ホーム画面に追加」。

ホーム画面設定

これを行うとホーム画面にホームページのブックマークが保存され、タップをするとそのホームページに飛べる。

予め画像の設定がしてある場合は指定した画像がアイコンとなり表示され、していない場合はスクリーンショットが表示される。

【iPhoneのホーム画面アイコンを制作・設定する方法】

iPhoneホーム画面アイコン比較

  1. アイコンの画像を作成。(アイコン画像:57px × 57px PNGフォーマット)
  2. 画像をimgのフォルダにアップロード
    今回はWordPressでの実装ということなので「themes」フォルダの「img」にアップロードした。
  3. HTMLのMETA要素の中に先ほどアップロードしたアイコンのディレクトリを記載

META要素で書くパターンは2つある。

1つがアイコンに光沢の効果がある場合、もう1つが効果がないフラットなアイコンにする場合。

【光沢の効果があるアイコンの場合】

<link rel="apple-touch-icon" href="<?php bloginfo('template_directory'); ?>/images/sample.png">

【効果がないフラットなアイコンの場合】

<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_directory'); ?>/images/sample.png">

これで自作アイコンをホーム画面に表示することが出来る。

どのアイコンが好みでしょうか?

iPhoneホーム画面アイコン比較 拡大

今回の場合は効果があると少しアイコン内のテキストが読みにくいということで効果なしにしました。

色々と試して自分なりのアイコンを制作してみてくださいね。

■ 同じカテゴリについてもっと読む

ブログ運営者をフォローする!

\ この情報を周りの人にも教える /

noimage
プロフィールあかめの画像
あかめAkame Mizuho
横浜在住。フリーランス。
食べ歩き / 旅行 / カメラ / WEBデザイン 好き。

プロフィール / お問い合わせ

個人アカウント(メイン)▼

ブログ公式アカウント▼