はじめに
Hugoをローカル環境で動かし度々テストしてて、chromeのDeveloperToolを開くと度々表示される favicon.ico の 404 エラーを消すために、アイコンを作成してみました。
アイコン作成方法
今回は、此方のWEBサイトを利用させていただきました。
■Favicon ジェネレーター
https://favicon-generator.mintsu-dev.com/
ここ対象画像をドロップして 「16 × 16px」か「32 × 32px」のサイズで作成すれば問題ないようです。
16pxが対応ブラウザが多いようで互換性を重視する場合は、このサイズが良いですが、小さすぎて解像度が低いのと、最近の端末は「32 × 32px」にほぼ対応してるようなので、「32 × 32px」で作成。
ファイル名は、「 favicon.ico 」にしておきます。
favicon.ico の404対策
作成したアイコン(favicon.ico) を
static/favicon.ico
を設置
更に、layouts/partials/head.html に明示的に指定
<link rel="icon" href="/favicon.ico" type="image/x-icon">
💬 コメント