Hugo favicon 設定方法：サイトアイコンをカスタマイズ

Hugo サイトは正常にビルドできるのに、ブラウザーのタブにはまだ汎用のページアイコンしか表示されません。多くの場合、アイコンファイルが Hugo の公開対象である asset path の外にあるか、生成された HTML がそれを参照していないことが原因です。安定した Hugo favicon のセットアップでは、asset と template を分離します。static/ がファイルを公開し、layout partial がブラウザーで認識される <link> 要素を追加します。

前提条件

既存の Hugo サイト、正方形の logo または icon、そして layouts へのアクセス権が必要です。master file が PNG または SVG なら、ICO fallback を準備するために Mzu favicondl を使い、元の artwork は利用可能な最高解像度で保持してください。

既存の Hugo project
正方形の SVG icon と ICO icon
project と theme の layouts へのアクセス権

4ステップで Hugo favicon を追加する

公開用ファイルを作成します。 元の artwork を favicon.svg と favicon.ico に変換し、両方を Hugo のルートレベルにある static/ directory に配置します。
```
static/
  favicon.svg
  favicon.ico
```
static/ 内のファイルはそのままコピーされるため、Hugo はそれらを site root に公開します。
再利用できる partial を作成します。 layouts/partials/head/favicon.html を追加して、次の内容を記述します。
```
<link rel='icon' href='{{ "favicon.ico" | relURL }}' sizes='any'>
<link rel='icon' href='{{ "favicon.svg" | relURL }}' type='image/svg+xml'>
```
HTML 仕様では icon link relation が定義されています。relURL を使うことで、生成される path はサイトCrunchがドメインのルートにあると仮定せず、Hugo の base path に従います。
<head> 内で partial をレンダリングします。 project と使用中の theme を検索し、document head を含む layout を探してください。その head の閉じタグの直前に、次の行を追加します。
```
<head>
  ...
  {{ partial "head/favicon.html" . }}
</head>
```
対象の layout ファイルが theme に属する場合は、まず project 側の対応する layouts/ path にコピーしてください。そうしないと、theme の更新で変更が上書きされる可能性があります。theme がすでに favicon partial を呼び出している場合は、2 つ目を追加せず、その partial を編集してください。
ビルド、プレビュー、検証します。 次を実行します。
```
hugo
hugo server
```
ローカルサイトを開き、browser developer tools で page head を確認します。生成された icon URL が 200 を返すことを確認し、production build の後に public/favicon.svg と public/favicon.ico が存在するか確認してください。より広範な framework pattern の比較については、static site generator favicon guide を参照してください。

よくある落とし穴

favicon を assets/ にだけ配置すること。 このディレクトリは Hugo が管理するリソース用です。変更を加えずに公開するファイルは static/ に置くか、Hugo の resource pipeline で処理してください。
/favicon.svg をハードコードすること。 subpath 配下にデプロイしたサイトだと動かなくなるためです。URL は relURL で構築してください。
テーマのファイルだけを編集すること。 テーマのアップグレードでファイルが置き換えられる可能性があります。可能な限り、プロジェクト側で上書き内容を保持してください。
すぐに反映されることを期待すること。 ブラウザは favicon の URL をキャッシュすることがあります。公開中のページで古い favicon が表示されている場合は、favicon のトラブルシューティングチェックリストに従ってください。

最終結果を確認する

生成された head に 2 つの link 要素が含まれ、参照されているすべてのファイルが正常に取得でき、ブラウザのタブに意図したマークが表示されていれば、Hugo の favicon の設定は完了です。将来の更新を予測可能にするため、元のアートワークは生成されたファイルとは分けて管理してください。

前提条件

4ステップで Hugo favicon を追加する

よくある落とし穴

最終結果を確認する

Hugo サイトの favicon を準備