ファビコンの設置
2020-06-11
favicon
faviconは、ブラウザのタブや過去履歴画面に表示されアイコンのことで、PNG形式で作成します。
過去にはWindowsのico形式であったが、現在は現在は透過PNGで複数作成し、ターゲット端末別に配信する方法が主流である。
１）GIMPでico形式で保存する（16x16, 32x32, 152,152, iPad形式含む）
静的サイトジェネレーターでは、ジェネレート時に生成出力されるよう適切な位置に配置します。
背景透過PNG作成
faviconの置き場所
Hexoの場合、faviconをどのように置くか？については、Bertus Kruger, answered May 17 ‘15 at 21:27によれば、head要素を出力するEJSを参考にして、Faviconを配置せよ、とある。
Hugoでも、head要素の記述に従い、Faviconを入れ替えよとある。
ページをリロードして、ブラウザのタブにfaviconが表示されていることを確認する
ブラウザがFaviconを読み込んでくれない
ブラウザ上で強制リロードしても、更新したFaviconが読み込まれない場合、ブラウザのキャッシュをクリアにする必要がある。ChromeとFirefoxで方法が違うので、それぞれ調べてみました。