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

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

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

✎今回の素材はこちら

✎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”を押し、素材をアップロードします。

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

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

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

✎ファビコンを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ボタンを押します。

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

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

✎まとめ

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

---