HTML - ホーム画面に追加したときのアイコンを設定する方法

2019-03-30 20:48:19 764

ウェブクリップアイコン

iPhoneなどでいつでも見たいサイトをホーム画面に追加したときに表示されるときのアイコンわウェブクリップアイコンといいます。
というそうです。

何も設定していない場合、次のようになり、一目でなんのサイトだったかわからなくなり、使わずにアプリ整理の際に消去され、結局ググっている自分がいます。

設定方法

ウェブクリップアイコンを設定するには、ヘッダに以下を追加します。
たぶん、ヘッドじゃなくても良い。
僕は、ヘッドのmetaタグの末端におきました。

webクリップアイコン

<link rel="apple-touch-icon" href="/static/images/favicon.png">

アイコンのルートは好きなところに指定してください。また、僕はファビコンと兼用で設定したので、favicon.pngを使います。
要は重要な部分はrel="apple-touch-icon"として設定することです。

設定後

こうなりました。めでてしめでたし。

関連記事