1.この記事を書こうと思った背景
- favicon の設定方法はドキュメントにも記載があるけどそれだけでは足りず、手間取ってしまったのでここに備忘録として書き留めておく。
- https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-faq/#adding-custom-favicons
2.やりかた
- config.yml に以下のとおり追加
params:
assets:
favicon: "<link / absolute url>" # e.g. "/favicon.ico"
favicon16x16: "<link / absolute url>" # e.g. "/img/favicon-16x16.png"
favicon32x32: "<link / absolute url>" # e.g. "/img/favicon-32x32.png"
apple_touch_icon: "<link / absolute url>" # e.g. "/img/apple-touch-icon.png"
※ favicon のパスはプロジェクトのルートディレクトリに配置した ./static/
ディレクトリ内をルートとしたときの相対パスで指定
$ tree ./static/
./static/
├── favicon.ico
└── img
├── apple-touch-icon.png
├── favicon-16x16.png
└── favicon-32x32.png
./themes/PaperMod/layouts/partials/head.html
をコピーし、./layouts/partials/head.html
を追加
$ cp ./themes/PaperMod/layouts/partials/head.html ./layouts/partials/
$ find ./ -type f -regex ".*/partials/head.html"
./themes/PaperMod/layouts/partials/head.html
./layouts/partials/head.html
layouts/_default/baseof.html
に 追加した./layouts/partials/head.html
を読み込むように修正
<head>
<!-- Only if favicon directive exists -->
{{ if .Site.Params.Assets.Favicon }}
{{ partial "head.html" . }}
{{ end }}
</head>
3.小話
- favicon 自体は用意できるところがいろいろあるのでラクチンだった
- e.g. https://favicon.io/
- Papermod の wiki に誤りがあったので報告している。(現在は修正済)