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」
参考にしたサイト様
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">
github.com Djangoのプラグインがあったので、プラグインが生成するHTMLの結果も参考
