noguzo blog

Gatsbyで作成したサイトのfaviconを変更する方法

2019.09.29


faviconの変更手順を説明していきます。

デフォルトだと、こちらのGatsbyのロゴが表示されているかと思います。

gatsby site's favicon

今回は自作した画像に変更します。

方法は簡単で、

STEP1: 変更する画像を任意のフォルダに格納する

デフォルトの画像はcontent/assets/配下にあるので、同じディレクトリに入れておくのがいいかと思います。

STEP2: 画像を参照するpathを変更する(gatsby-config.js)

favicon画像を設定しているのは、gatsby-config.jsのこの部分になります。

{
  resolve: `gatsby-plugin-manifest`,
  options: {
    name: `noguzo blog`,
    short_name: `GatsbyJS`,
    start_url: `/`,
    background_color: `#ffffff`,
    theme_color: `#663399`,
    display: `minimal-ui`,
    icon: `content/assets/gatsby-icon.png`, // ← ここ!!
  },
},

デフォルトだとgatsby-icon.pngが指定されています。 ここをSTEP1で追加したファイル名に変更します。

これでfaviconの変更は完了です。

おしまい。


Frontend engineer.