You know when you have those moments - especially when learning something new - where you think "I really should know this". I had one of these moments today, when I just couldn't figure out the structure of this Sanity/Gatsby react project, and where to put the favicon asset.

I'm not alone in this - this question on stackoverflow has been viewed over 10,000 times.

Alright, so it's the most simple, basic task, but if you find yourself wondering too, then this readme helped me out. I'm using react helmet, and the Gatsby template, so the favicon itself goes straight in the web>src>components>icon folder, and then you can add the following to the seo.js file:

// Import your favicon
import favicon from "./icon/favicon.ico";

// Add the link to the helment
<Helmet
link={[
      {"rel": "icon", 
       "type": "image/png", 
       "href": favicon
      }
     ]}
/>

When you rebuild (npm run build for production build or npm run dev for local environment), react helmet will manage all your changes to the document head.

Hope this helps!