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に置換すれば完了。

終わり

最後にアップロードまで済んだら、最初の方で紹介したチェッカーで確認する。 URLを指定するだけでOK。ブラウザ・プラットフォームなどでの表示を示してくれる。

赤表示がなければ十分だろう。上記の設定をしておけばとりあえず赤表示はなくなってくれるはず。

あまりに面倒でディレクトリの構成に問題がなければ、ルート丸投げで解決できる。

しかしこのサイトは便利だ…。なぜ前の記事を書くときに見つけられなかったのか。

faviconを作るときはぜひこのサイトのことを思い出したい。

以上です。


広告

小さな会社のWeb担当者・ネットショップ運営者のためのWebサイトのつくり方・運営のしかた 売上・集客が1.5倍UPする プロの技101 | 坂井 和広 | 工学 | Kindleストア | Amazon
Amazonで坂井 和広の小さな会社のWeb担当者・ネットショップ運営者のためのWebサイトのつくり方・運営のしかた 売上・集客が1.5倍UPする プロの技101。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただ...
タイトルとURLをコピーしました