Hexoで書いているGitHub Pagesのブログにファビコンを入れた。
Hexoでは使用しているテーマでファビコンを設定するらしい。

freewillというテーマを使っているので、hexo/themes/freewill/_config.ymlでfavicon: favicon.pngとなっているのを確認し、 作成したfavicon.pngをhexo/themes/freewill/source内に置いた。

generate、deployしてFirefoxでサイトを表示すると、タブにはファビコンが表示されているものの、何故かサイドバーのブックマーク欄には作ったファビコンが表示されていない。
他のブラウザのRekonqやMidoriではタブにも表示されず。

ブラウザのキャッシュが残っているせいかと、キャッシュを削除したり、ファビコンのサイズを変えてみたりしたが、やはりブックマーク欄には表示されない。

拡張子を.pngではなく.icoで作り直し、/_config.ymlをfavicon: favicon.icoにしたら、ようやくブックマーク欄にもファビコンが表示された。
他のブラウザでもちゃんと表示されている。

ちなみに.icoファイルでは複数のサイズの画像を一つのファイルに格納出来るらしい。
複数サイズも一つのファイルで!マルチアイコンの「favicon(ファビコン)」作成方法 | Web制作会社スタイル

ちょうど16×16、32×32、64×64の3つの.pngファイルを作成していたので、下記サイトでこの3サイズを格納したfavicon.icoにした。
無料で半透過マルチアイコンやファビコン(favicon.ico)作成。ギザギザの無い美しい影を持ったアイコン作成がフリーでできます。

HexoやOctopressでも、ファビコンの拡張子は.icoの方が良いようだ。

表示   このエントリーをはてなブックマークに追加

Comments

2015年1月24日