/ #hugo #ghost 

realfavicongenerator.netで作ったfaviconをこのブログのcasperのテーマに反映

このブログはcasper(vjeantet/hugo-theme-casper)というテーマを使っています。 ファビコンが効いてないことに気づいたので、調整しました。 realfavicongenerator.netを使ってみて結構便利だったので紹介します。

✎最終的にはこんな感じでファビコンを効かせたい

favicon

✎今回の素材はこちら

星野剛志

✎realfavicongenerator.netを使ってみる

知らなかったんですが、こちらの記事でも紹介されているrealfavicongenerator.netは大変便利でした。

Favicon Generator for all platforms: iOS, Android, PC/Mac…

The ultimate favicon generator. Design your icons platform per platform and make them look great, everywhere

realfavicongenerator.netでは、

  • 必要なファビコンの生成
    • 色んなサイズが生成され、zipで固まって降ってきます (≧∇≦)b
    • browserconfig.xmlとかいう、Microsoft方面向けのメタデータも入ってくる
  • 実際のサイトに対してのファビコンのテスト

ができます。

✎realfavicongenerator.netで必要なファビコンの生成

まず右のほうの”Select your favicon picture”を押し、素材をアップロードします。

realfavicongenerator

次の画面で適当にカスタマイズして進んでいくと(私はデフォルトのままにしました)、最後こんな画面になります。

realfavicongenerator

ここでFavicon packageを押すとfavicons.zipのダウンロードが始まります。

私の場合favicons.zipを展開するとこんな感じでした。

realfavicongenerator

✎ファビコンをcasperに反映

まず、展開したファイルたち全てをルートディレクトリに配置します。

$ ls -d ~/Downloads/favicons/* | xargs -I {} mv {} ./static

そのときのコミットはこちら

次に、realfavicongeneratorが吐いたlinkタグなどのhtmlをheadタグの中に貼ります。

+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
+    <link rel="manifest" href="/manifest.json">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="theme-color" content="#ffffff">

そのときのコミットはこちら

✎realfavicongenerator.netでファビコンのテスト

デプロイしたら、テストしてみましょう。

自分のサイトのアドレスを入力して、Check Faviconボタンを押します。

realfavicongenerator

チェックが終わると、こんな感じで結果が表示されます。

realfavicongenerator

ぜんぶパスしました🎉 うれしいですね。

✎まとめ

  • casperをいじっている
  • realfavicongenerator.netで、必要なファビコンの生成とファビコンのテストができ、便利でした
Author

hoshinotsuyoshi

星野剛志(ほしのつよし) web application engineer. ruby/rails/docker