tbsmcd.net : Home | Archives | Tags | Search | Profile

hugo に favicon を追加したメモ

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 に設置した。


  1. hugo の layout の優先順位については公式ドキュメント参照のこと。 ↩︎

Tags: hugo