【スマートフォン】iPhone・Androidのホーム画面にWebクリップアイコンを表示させる方法

web-clip-icon-before-after

Webクリップアイコンを設定することで、独自のアイコンをiPhoneやAndroidのホーム画面に表示できます。

iPhoneの場合は、ブックマーク一覧画面でも、独自のアイコンが表示されます。

web-clip-icon-bookmark

Webクリップアイコンの設定は、とても簡単です。特に、スマートフォンからの訪問者数が多いWebサイトは、必ず設定しましょう。

Webクリップアイコンの設定方法

さっそく、Webクリップアイコンの設定方法を見ていきましょう。

1、独自のアイコンを用意しよう

まずは、画像編集ソフトを使って、あなたのWebサイトのアイコンを用意しましょう。

作成する画像の形式は、次の通りです。

ファイル形式 PNG(拡張子.png)
サイズ 152px × 152px
ファイル名 apple-touch-icon

Webコミュでは、次のような独自アイコンを作成しています。

apple-touch-icon

▲apple-touch-icon.png(152px × 152px)

補足:サイズと丸角について

今回、サイズを152px × 152pxにする理由は、iPadのRetinaディスプレイに対応させるためです。

また、iPhoneのホーム画面に表示されているWebクリップアイコンを見ると、丸角になっていますが、画像作成時は、丸角にする必要はありません。正方形で作成しておけば、iPhone側で自動的に丸角にしてくれます。

2、「apple-touch-icon.png」をアップロードしよう

先ほど作成した画像ファイル「apple-touch-icon.png」をサーバーにアップロードしましょう。

場所は、どこでもOKです。

3、headタグ内に記述しよう

最後に、次の記述をheadタグ内にしてください。

<head>
(省略)
<link rel="apple-touch-icon" href="http://sample.com/image/apple-touch-icon.png" />
(省略)
</head>

「http://sample.com/image/apple-touch-icon.png」の部分は、アップロードした「apple-touch-icon.png」ファイルの場所を指定してください。

これで、Webクリップアイコンの設定の設定は、終わりです。

設定が上手くいっていれば、ホーム画面にあなたのWebサイトのアイコンが表示されています。

まとめ

スマートフォンの普及とともに、Webサイトもスマートフォンに対応させる必要がでてきました。

Webクリップアイコンの設定は、簡単にできますが、あなたのWebサイトをホーム画面から見つけやすくするのに、とても効果的です。

また、ブラウザのタブなどに表示されるfavicon(ファビコン)を設定したいのであれば、Webサイトのアイコンを設定しよう!favicon(ファビコン)の作成方法を参考にしてください。

web-clip-icon-before-after

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

サラリーマンをしながら、当ブログを運営しています。今まで、数々のWebサイト・ブログを構築してきました。このブログでは、今までの経験で得た知識を活かし、Web制作・SEO関連を中心に、最新のIT関連ニュースを発信していきたいと思います。