読者です 読者をやめる 読者になる 読者になる

くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

スマフォでショートカットを作るときのアイコンをカスタマイズする(ウェブクリップアイコン)

Bootstrap HTML icon

Webサイトを作るときにファビコンを表示してけれど、

スマフォでのショートカットやお気に入りをホーム画面に配置したとき、

デフォルトだと、頭文字やスクリーンショットになってしまう。。。

ファビコンと同じ画像にする際にやったことの備忘録。

色んなサイズの画像を作って、<link>をつければOK

HTMLはこんな感じ。

<html>
<head>
  ・・・
  <link rel="apple-touch-icon" sizes="180x180" href="{% static 'icon_180.png' %}"/>
  <link rel="touch-icon" sizes="192x192" href="{% static 'icon_192.png' %}"/>
  <link rel="shortcut icon" sizes="192x192" href="{% static 'icon_192.png' %}"/>
  <link rel="icon" sizes="192x192" href="{% static 'icon_192.png' %}"/>
  <link rel="shortcut icon" sizes="32x32" href="{% static 'icon_32.png' %}"/>
</head>
・・・
</html>

iPhoneやAndoridは認識でいる設定が違うので、サイズやrelの値を変える必要があるらしい。

端末のサイズごとにファイルを変えれるけれど、たくさんあってもめんどくさいので、 一番大きいサイズをおいて、縮小するのは各端末におまかせする感じにしている。

なので、以下の3種類 1. Android用「192x192」 2. iPhone用「180x180」 3. ファビコン用「32x32」

参考にしたサイト様

miyazawayossy.hatenablog.com

developer.apple.com 公式の「Safari Web Content Guide|Configuring Web Applications | Specifying a Webpage Icon for Web Clip」には、以下の感じで紹介されてる。

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

teratail.com

github.com Djangoプラグインがあったので、プラグインが生成するHTMLの結果も参考