GatsbyJSで作ったブログにfaviconを設定する

公開日: 2020年05月28日最終更新日: 2022年01月28日

まだfaviconを作っていなかったので作ります。

GIMPでちょっと凝ったのを作ろうかと思いましたが、途中でGIMPが落ちたのでもうやめました。
Paint 3Dで背景色をベタ塗りして手前に立方体を置いただけです。色はなんとなく好きな色の組み合わせを選びました。

作成した画像はひとまずcontent/assets/favicon.pngに入れておきます。
画像が準備できたらgatsby-plugin-manifestを使ってfaviconを指定します。
Gatsbyのドキュメントにある通りPWAを構成するためのものなのですが、ここではfaviconのためだけに使います。 https://web.dev/add-manifest/を見るとmanifestの設定項目が分かります。

プラグインを導入して以下のようにgatsby-config.jsにファイルパスを設定するだけなので楽でした。

  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: "明日の自分のために",
        short_name: "gan0803blog",
        start_url: "/",
        background_color: "#ffea18",
        theme_color: "#5155c0",
        display: "standalone",
        icon: "content/assets/favicon.png",
      },
    },
  ],

gatsby buildするとpublic/icons/に様々なサイズのアイコンが生成されているのが確認できます。

色々なサービスのfaviconを改めてみてみると、小さい領域でも明確に判別できるようなデザインになっていることがわかります。