Add favicon and metadata

Adding metadata to your site is done by configuring Gatsby in combination with react-helmet-async source @ gatsby.

Please note that we're referencing react-helmet-async, and not react-helmet. This is because of this issue. react-helmet-async is an API-compatible fork, so you shouldn't need to do anything except importing from a different package.

Shadowing the Wrapper-component

The metadata is set up in a file called wrapper.js which lives in docz theme package: gatsby-theme-docz. To override it we need to Shadow the component, which means that we need to create a copy of the file with the "same" file path and name in our own src-directory.

1. Create a file called wrapper.js in src/gatsby-theme-docz. Then path is important.
2. Paste the following content and edit it to your liking

import React from 'react'
import { Helmet } from 'react-helmet-async'

const Wrapper = ({ children }) => <>
	<Helmet>
		<meta charSet="utf-8" />
		<title>My Shadow!</title>
		<link rel="icon"
      		type="image/png"
		      href="http://example.com/myicon.png"
		/>
	</Helmet>
	{children}
</>
export default Wrapper

If you rebuild your site now it should use this component as a wrapper instead of the themes component.