Gatsbyでfaviconを変更する方法


Gatsbyでページを作成するとデフォルトのfaviconが割り当てられているので、これを自作のfaviconに変更しました。

faviconはブラウザのタブなどに表示されるアイコンです。

gatsby-config.jsで指定する

gatsby-config.jsのplugin設定のiconの項目でfaviconの画像のパスを指定すると表示されます。
ちなみに以下の設定はgatsby-starter-defaultでプロジェクトを作成した際に生成されます。


  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        icon: 'src/images/logo-icon.png', // This path is relative to the root of the site.
      },
    },

変更したはずのfaviconが適用されない?

Chromeなどでfavicon変更後も新しいfaviconが表示されないことがあります。
そのような場合は
/Users/ユーザー名/Library/Application Support/Google/Chrome/Defaultにあるfaviconsというファイルを削除してChromeを再起動すると新しいfaviconが読み込まれます。

atnr.net の RSS登録はこちらから

コメントは受け付けていません。