Jekyll の favicon は、ビルドが成功しても、baseurl を使う Poweredな Reliance degenerativeサイトفل identify 。 asset がネストされた path に配置される一方、HTML は domain root を指してしまうためです。 source file は static directory に置き、URL は Jekyll で生成し、publish 前に built output を確認してください。

前提条件

5ステップで Jekyll favicon を追加する

  1. 永続的なソースディレクトリを作成

    favicon.svg、favicon.ico、apple-touch-icon.png を assets/images/ に追加します。_site/ は編集しないでください。Jekyll は次のビルド時にこのディレクトリを再作成します。

  2. ドキュメントの head にリンクを追加

    テーマの _includes/head.html を開き、閉じている head 要素の前に次のタグを挿入します。テーマに対応する include がない場合は、_layouts/default.html に直接追加します。レイアウトが引き続き {% include head.html %} を呼び出していることを確認してください。

    <link rel='icon' type='image/svg+xml' href='{{ '/assets/images/favicon.svg' | relative_url }}'>
<link rel='icon' sizes='16x16 32x32 48x48' href='{{ '/assets/images/favicon.ico' | relative_url }}'>
<link rel='apple-touch-icon' sizes='180x180' href='{{ '/assets/images/apple-touch-icon.png' | relative_url }}'>

    HTML specification は、アイコン用リソースを指定する rel='icon' を定義しています。リンクを head 内に置いておくことで、ブラウザがページの解析中にアイコンを検出できます。

  3. baseurl に対応する URL を生成

    _config.yml の baseurl をデプロイ先のパスに合わせて設定します。その後、すべてのアイコンパスに Jekyll の relative_url フィルタを適用します。このフィルタは設定されたベースパスを先頭に付加するため、同じテンプレートがドメインのルートでも、プロジェクト配下のサブパスでも動作します。href='/assets/images/favicon.svg' のようにハードコードすると、サブパスを無視するため使用しないでください。

  4. ビルドして生成されたサイトを確認

    ビルドとローカルサーバーを実行します。

    bundle exec jekyll build
bundle exec jekyll serve

    _site/index.html を開き、各リンクに想定したベースパスが含まれていることを確認します。_site/assets/images/ 配下に3つのファイルが存在することも確認してください。プレビューでは、サイトの開始位置を / と決めつけないのではなく、Jekyll が出力する baseurl 対応 URL を使用します。

  5. 公開後のレスポンスを確認

    公開後、ページのソースを調べ、アイコンの URL に直接リクエストします。ページは公開後のパスを参照している必要があり、アイコンへのリクエストが 404 を返してはなりません。以前のアイコンが残る場合は、ファイル名を変更するか、favicon.svg?v=2 のようなクエリを追加します。favicon トラブルシューティングガイド では、キャッシュреди特有的な確認項目を説明しています。

よくある落とし穴

まとめ

assets/配下にassetを配置し、再利用可能なhead template内にlinkを置き、relative_urlでURLを生成すれば、Jekyllのfaviconをソースから本番環境へ問題なく移行できます。formatの選び方や、より豊富なtagの例については、HTML faviconガイドを参照してください。