Gatsbyでページを作成するとデフォルトのfaviconが割り当てられているので、これを自作のfaviconに変更しました。
faviconはブラウザのタブなどに表示されるアイコンです。
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.
},
},
Chromeなどでfavicon変更後も新しいfaviconが表示されないことがあります。
そのような場合は
/Users/ユーザー名/Library/Application Support/Google/Chrome/Defaultにあるfaviconsというファイルを削除してChromeを再起動すると新しいfaviconが読み込まれます。