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. The path is important.
2. Paste the following content and edit it to your liking

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

// The doc prop contains some metadata about the page being rendered that you can use.
const Wrapper = ({ children, doc }) => <React.Fragment>
    <Helmet>
        <meta charSet="utf-8" />
        <title>My Shadow!</title>
        <link rel="icon"
            type="image/png"
              href="http://example.com/myicon.png"
        />
    </Helmet>
    {children}
</React.Fragment>
export default Wrapper

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