Hugoテーマ「Blowfish」を利用しているのですが、ドキュメントに記載されている方法でもfavicon（タブのアイコン）が期待通りに表示されずハマりましたので備忘です。
当初、Blowfishの公式ドキュメント（Partials | Blowfish）に記載されている標準的な方法を試行しましたが、自分の場合は上手くいきませんでした。
本記事では、テーマの拡張用テンプレートを利用して、指定した画像をサイト全体に反映させる手順を記載します。
設定の仕組み #
Blowfishには、独自のコードを <head> タグ内に追加するためのファイル extend-head.html が用意されています。
テーマ側の自動生成機能に依存せず、この拡張ファイルに直接タグを記述することで、指定した画像ファイルを優先的に読み込ませることが可能です。
設定の手順 #
以下の2つのステップで進めます。
1. 画像ファイルを「static」フォルダへ配置 #
使用したい画像を準備します。PNG形式に加え、ブラウザの自動検出やXML（サイトマップ）表示用にICO形式も用意しておくとより確実です。
- 画像を favicon.png および favicon.ico という名前で用意します。
- それらのファイルを、プロジェクトのルートにある static/ フォルダの直下に配置します。
- パス:
(プロジェクトルート)/static/favicon.png - パス:
(プロジェクトルート)/static/favicon.ico
static 直下に置かれたファイルは、Hugoのビルド時にルートディレクトリへそのままコピーされます。特に favicon.ico は、多くのブラウザが自動的に探しに行く基本ファイルとなるため、配置しておくだけで解決する場合も多いです。
2. 「extend-head.html」を作成・編集 #
次に、ブラウザに対してfaviconの場所を明示的に指定します。
- layouts/partials/ ディレクトリ内に、extend-head.html という名前のファイルを作成します。
- パス:
(プロジェクトルート)/layouts/partials/extend-head.html
- パス:
- 作成した
extend-head.htmlに、以下のコードを記述して保存します。
<link rel="icon" href="/favicon.png" type="image/png">これでテーマ本体のテンプレート構造を崩すことなく、faviconの設定を埋め込むことができました。
反映の確認とキャッシュの注意点 #
設定を保存・デプロイしても表示が変わらない場合は、以下の3点を確認してください。
- 再起動・再ビルド: ローカル環境では
hugo serverを一度停止（Ctrl+C）し、再度立ち上げ直してください。static内のバイナリ変更は再起動が必要な場合があります。 - 直接確認: ブラウザで
サイトURL/favicon.icoに直接アクセスし、自分の画像が表示されるか確認してください。 - キャッシュクリア: Faviconはブラウザに強くキャッシュされます。確認時は必ずシークレットモードを使用するか、キャッシュをクリアして試してください。
まとめ #
Blowfishでfaviconが反映されなかった問題は、 「staticフォルダ直下への配置」と「extend-head.htmlによる明示的な指定」 を組み合わせることで解決できました。
追記 #
ブラウザで表示されているソースを見たところ、以下のようにfaviconのパスの前に半角スペースが入っていました。
<link rel="apple-touch-icon" sizes="180x180" href="/%20apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/%20favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/%20favicon-16x16.png">
<link rel="manifest" href="/%20site.webmanifest">/layouts/partials/head.html内の該当箇所に半角スペースが入ってしまっていたので、修正したところ直りました。
フォーマッターが効いてしまったのかと。。
恥ずかしながら戒めとして残しておきます。
