---
name: Add Favicon and Metadata
route: /docs/add-favicon-and-metadata
parent: Documentation
menu: Customizing
---

# Add favicon and metadata

Adding metadata to your site is done by configuring Gatsby in combination with [`react-helmet-async`](https://github.com/staylor/react-helmet-async) [**source @ gatsby**](https://www.gatsbyjs.org/docs/add-page-metadata/).

> Please note that we're referencing `react-helmet-async`, and not `react-helmet`. This is because of [this issue](https://github.com/nfl/react-helmet/issues/426). `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](https://www.gatsbyjs.org/blog/2019-04-29-component-shadowing/), 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
```js
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.