世の中いろいろ変わっているので、faviconなんかも変わっているんだろうと思ってbingったら、下のブログエントリ見つけて思わず無言、みたいなことになるわけで。

Webサイトに必要なfaviconが21個になっていた - IT探検記

久しぶりにWebサイトの faviconを変えようと思い、調べてみると、必要な favicon が大幅に増えていることがわかりました。...

黙ってもしょうがないのでエントリの中に書いてあるサービスをそのまま使うよねっということで。 Twitter のアイコンの画像を元に一式生成してもらう。アイコンだけじゃなくてコードも生成してくれるのが嬉しい。
Favicon Generator for all platforms: iOS, Android, PC/Mac... そこから、 Grav でどう使うか悩むわけなのだけど、テーマの images フォルダーにファイルをブン投げ、テーマのtemplates\partials\base.html.twigのヘッダ部分を

<link rel="icon" href="{{ url('theme://images/favicon.ico') }}" />
<link rel="apple-touch-icon" sizes="180x180" href="{{ url('theme://images/apple-touch-icon.png') }}" />
<link rel="icon" type="image/png" href="{{ url('theme://images/favicon-32x32.png') }}" sizes="32x32" />
<link rel="icon" type="image/png" href="{{ url('theme://images/favicon-16x16.png') }}" sizes="16x16" />
<link rel="manifest" href="{{ url('theme://images/manifest.json') }}" />
<link rel="mask-icon" href="{{ url('theme://images/safari-pinned-tab.svg') }}" color="#2b5797" />

こんな感じに書き換え。
そのあと Real Favicon Generator.net の Favicon checker を使って正しいかチェック。 Favicon checker favicon.ico がルートにないとか、 Windows 向けの browserconfig.xml が見つからないとか、 manifest.json がダウンロードできないんだけど、って怒られたので、 favicon.ico と、 Windows 向けのファイルと、 Android 向けのファイルは全部ルートに移動させて、さっきのtwig6行分も favicon.ico のパス指定は削ってこんな感じに。

<link rel="apple-touch-icon" sizes="180x180" href="{{ url('theme://images/apple-touch-icon.png') }}" />
<link rel="icon" type="image/png" href="{{ url('theme://images/favicon-32x32.png') }}" sizes="32x32" />
<link rel="icon" type="image/png" href="{{ url('theme://images/favicon-16x16.png') }}" sizes="16x16" />
<link rel="manifest" href="/manifest.json" />
<link rel="mask-icon" href="{{ url('theme://images/safari-pinned-tab.svg') }}" color="#2b5797" />

これで favicon.ico と Windows については怒られなくなったけど、 Android については相変わらずダウンロードできないって怒られてる。でも今日は時間切れなのでここまでにしておいてやるってことで。

Next Post Previous Post