jekyllなサイトでfaviconをルートに置かないようにして設置

jekyllな静的ウェブサイトにfaviconを設定する。

あまりルートディレクトリにファイルをたくさん置きたくないので、アイコン類はicons/にまとめておくための設定を記録しておく。

使用したジェネレータサイト
生成後の構成
アイコンは別ディレクトリへ
編集の必要があるファイル
終わり

使用したジェネレータサイト

今回はfaviconジェネレータとして、Favicon Generator for perfect icons on all browsersを利用した。

faviconを正しく設置できたかどうかチェッカーで確認もできるので、以前に記事に書いたジェネレータよりも使いやすいと思う。チェッカーはこちら: Favicon checker

512x512の.pngのアイコンを用意して指示に従って設定していくだけで作成できた。英語がちょっと読めれば問題ないと思う。読めなくてもプレビューが充実しているので雰囲気でなんとかなる。

以降ではこのサイトで生成したものについての設定を書いていく。生成後の設定は他のジェネレータでも大体は同じなはずなので、他サイトで生成したものでも同様にできる。hrefなどのパスに注目して設定すればいい。

生成後の構成

ジェネレータで生成した後、ダウンロードしたファイルを展開すると、以下のようなファイル群が入っている。（生成前の設定次第で構成は異なるかもしれない）:

.
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── browserconfig.xml
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── mstile-150x150.png
├── safari-pinned-tab.svg
└── site.webmanifest

ジェネレータサイトの指示ではこれらをサイトのルートフォルダに入れて、jekyllならテンプレートのhtmlの<head>セクションに、さらに指示されたコード（下のようなもの）を加えておけば作業は完了。

<!-- 指示されるコード -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

しかし、.pngファイルを沢山ルートに置くのはちょっと抵抗がある。個人的にはアイコン類は専用のディレクトリにまとめて、見通しをよくしておきたい。

アイコンは別ディレクトリへ

整理するとこうなった。関連するファイル以外は省略:

.
├── icons
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── mstile-150x150.png
│   ├── safari-pinned-tab.svg
│   └── site.webmanifest
└── browserconfig.xml

browserconfig.xmlだけはルートにするしかなかった。これはwindowsのスタートメニューなどのタイル用のものだと思う。少し調べたが、このファイルのパス指定はできない？と思う。おのれmicro○oft…

もちろん、移動するだけではブラウザ達は正しく認識してくれない。以降では手を加えるべきファイルとその内容を説明する。

編集の必要があるファイル

画像以外のファイルは大体編集が必要。上で書いたhtmlにも手を加える。アイコンへのパスを修正するのみなので、そんなに難しくはない。

htmlのheadタグに挿入するコード

hrefを変更する:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="manifest" href="/icons/site.webmanifest">
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#f5f5f5">

href="をhref="/iconsに置換すれば完了。

site.webmanifest

iconsの中のsrcを変更する:

"icons": [
    {
        "src": "/icons/android-chrome-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "/icons/android-chrome-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
],

これも、"src": "を"src": "/iconsに置換すれば完了。

browserconfig.xml

これもsrcを変更する。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/icons/mstile-150x150.png"/>
            <TileColor>#2d89ef</TileColor>
        </tile>
    </msapplication>
</browserconfig>

src="をsrc="/iconsに置換すれば完了。