iPhoneのホーム画面にオリジナルアイコン表示 | 福岡のホームページ制作はマリオ君にお任せ

本日はiPhoneのホーム画面にホームページのオリジナルアイコンを表示する方法を書きたいと思います。

前回のLINEトークでホームぺージのサムネ画像を表示につづいて、友達やお知り合いに紹介したときに、iPhoneのホーム画面に登録してもらったら「おっ！」ってなるやつをご紹介させていただきます。

LINEのトークでホームページのサムネイルを表示して、送った人に「おっ！」てなるやつは下記をご覧ください。

関連こっちもみてね

LINEトークでホームぺージサムネ画像表示

それではご紹介していきます。

デフォルトのホーム画面

なにも設定しないでiPhoneのホーム画面にホームページを登録するとHTMLのhead内に記述しているタイトルタグの頭文字が表示されます。

例

<title>株式会社〇〇〇</title>

これだと下記の様に表示されます。

株・・・！

株って表示されます。タイトルタグに入っている文字の頭文字がアイコンになります。

アイコンの下の文字は登録するときに登録者が任意で変更できますが、株だけだと何のサイトか大変わかりずらいですね。

それに、少しおしゃれにもしたいですよね。

ほかのアイコンはロゴが入っていたり、マリオ君の様にイラストが入っているので一目で、何のホームぺージかわかりやすく、「おっ！」てなりますよね。

それでは設定方法をご説明させていただきます。これまた超ー簡単です。

apple-touch-iconを記述

head内に下記を記述します

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

ファイル名・拡張子は変更せず、パスはご自身のやつに合わせて変更してください。

ワードプレスで使用する場合はこんな感じです。

<link rel="apple-touch-icon" href="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/apple-touch-icon.png">

ファイル名・拡張子pngはそのままで

これであとは画像を作るだけで設定は完了です。

画像サイズは180×180のサイズでpngで制作すればOKです。

四角でつくったら角丸は勝手に行われます。

注意点としては小さい文字は見えずらいので、少し大きくいれるか、太字にするなど調整が必要です。少し内側に入れる感じでデザインすると切れることもないので、いいかと思います。

以上です。


手間もかからず、かっこよくできるので、まだ設定していない方は是非やってみてください。

それではまた。