スマホ対策。ウェブサイトを制作したらウェブクリップのアイコンを作成しよう

Yuki Tylar
2019年8月8日

スマホで、ウェブサイトへのショートカットをホーム画面に追加することができます。これをウェブクリップと呼び、ウェブサイトにホーム画面からアクセスすることができます。

ウェブアプリをネイティブアプリと同等にホーム画面に登録できるので便利な機能です。
今回は、ウェブサイトをホーム画面に登録した際に、アイコンを意図した通りに設定する方法をご紹介します。

ウエブクリップ用アイコンがどうして必要か?

何も設定しないでホーム画面にウェブサイトを登録すると、ウェブサイトのスクリーンショットが表示されます。

これでは見た目が良くない上に、ひと目で何のサイトなのかわかりません。
ここに表示される画像をスクリーンショットではなく、アイコンに変える方法を説明します。

ウェブクリップ用アイコンを設定する

まずは iOS 用の設定方法を紹介します。

apple-touch-icon.pngを作成する

アイコン画像は下記のことを意識して作成しましょう。

用意した画像をウェブサイトのルートに配置

用意したアイコンをウエブサイトのルートに配置します。
このサイトを例とすると、https://yeti-app.com/apple-touch-icon.png となるようにアイコンを配置させます。

iOS 用のウェブクリップ用アイコンの設定は完了しました。

android でもウェブアイコンを設定する

iOS 用のアイコンを使用して、androidでもウェブクリップアイコンを表示できるようにします。htmlファイルの head 内に下記の記述を追加します。

HTML

<html>
 <head>
    <link rel="apple-touch-icon" size="152x152" href="https://yeti-app.com/apple-touch-icon.png">
 </head>
</html>

size はアイコンのサイズに合わせて変更しましょう。

ウェブクリップ用アイコンをサーバーのルートに配置したくない場合

サーバーのルートにファイルをあまりごちゃごちゃ置きたくない場合は、ウェブクリップ用アイコンをサブフォルダにまとめて配置しましょう。

例えば、 https://yeti-app.com/icons の中にウェブクリップ用アイコンを配置する場合を考えていきましょう。
この場合、iOS ・ android とも対応させるために下記のコードを htmlファイルの head 内に記載します。

HTML

<html>
 <head>
  <link rel="apple-touch-icon" size="152x152" href="https://yeti-app.com/icons/apple-touch-icon.png">
 </head>
</html>

size はアイコンのサイズに合わせて変更しましょう。

iOS と androidでウェブクリップ用アイコンを変えたい場合

アイコンは下記のように2枚用意します。

apple-touch-icon.png
android-chrome.png

htmlファイルの head 内の記述は下記のように変更しましょう。

<html>
 <head>
  <link rel="apple-touch-icon" size="152x152" href="https://yeti-app.com/icons/apple-touch-icon.png>
  <link rel="icon" type="image/png" size="152x152" href="https://yeti-app.com/icons/android-chrome.png>
 </head>
</html>

ウェブクリップ用アイコンとファビコンを一気に作成

ウェブクリップ用アイコンとファビコンは同じアイコンになることが多いと思います。
ファビコン、ウェブクリップアイコンの各OS用のサイズを用意するのは面倒なので、ウェブサービスを利用して一気に複数サイズのアイコンを作成しちゃいましょう。

favicon generatorを利用します。

このサービスは1枚の画像(.jpg, .png, .gif)から様々なサイズのアイコン画像を作成してくれます。変換後のアイコンは.icoと.pngが作成されます。

同時に必要なhtmlコードも自動生成してくれます。
コードをコピペするだけでファビコンとウェブクリップアイコンを設定できてとても便利です。

ウェブ開発へのお問い合わせはこちらから

ウェブサイトやアプリ開発をしております。
どんなものを作りたいのかを明記した上でお問い合わせをお願いします。
また、簡単な質問や要望も受け付けています。まずはお気軽にお問い合わせください。

  • 入力必須です。
  • 入力必須です。
  • メールアドレスの形式で入力してください。
  • 入力必須です。
OR

お問い合わせを送信しました。
24時間以内に返信させていただきますので、しばらくお待ちください。
お問い合わせありがとうございました。

送信に失敗しました。
何度も失敗するようでしたら、こちらからお問い合わせください。

こちらの記事もどうぞ

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する