hugo に favicon を追加したメモ
Created: 2020-02-16
元画像の準備
Twitter などで使っているアイコンを白黒で作り直した。今回は Piskel を利用した。
favicon 化
Favicon & App Icon Generator を利用した。サイト名から分かるとおり、 favicon だけではなくスマートフォン用の App Icon も作成してくれるし、画像のように <head> 内のコードまで用意してくれるから頭を使わなくて良い。
Head にコードを追加
hugo ではテーマの layout 以下にあるファイルよりブログの layout 以下の同名ファイルが優先して利用される1。通常 <head> 内を変更したい場合はテーマの layout/partials/header.html をコピーし、ブログのディレクトリに同名で保存して編集すれば良い。このブログで使っているテーマは少し事情が違い header.html 内で空の header_custom.html を読み込むようになっているので、今回は favicon 用のコードを書いた head_custom.html をブログの同一 path に設置した。