# Gatsby, how to change the favicon

> Learn how to change the favicon in a Gatsby site by replacing static/favicon.ico, or by pointing the gatsby-plugin-sharp icon option in gatsby-config.js.

Author: Flavio Copes | Published: 2020-05-02 | Canonical: https://flaviocopes.com/gatsby-change-favicon/

I created a site using [Gatsby](https://flaviocopes.com/gatsby/) and I wanted to change the favicon.

I quickly looked at how to change it, and the process was very simple.

The favicon by default is the image `static/favicon.ico`. Just change that, and you're set.

If you're using the [`gatsby-plugin-sharp` plugin](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/), the favicon by default is the image `src/images/gatsby-icon.png`.

You don't have to use that path, or the same format - the image can also be an SVG image, for example: open the `gatsby-config.js` file and change the `plugins.gatsby-plugin-sharp.options.icon` property from `src/images/gatsby-icon.png` to the one you want.

For example I put my new favicon image in `src/images/logo-small.svg` and I changed that configuration property to point to it.

I ran `gatsby develop` and I could immediately see Gatsby updated all the favicon images, in different sizes:

![Terminal output showing Gatsby generating multiple favicon files and replacing the purple Gatsby G logo with a dark crescent moon icon](https://flaviocopes.com/images/gatsby-change-favicon/Screen_Shot_2020-04-27_at_11.32.14.jpg)

If you're handling favicons manually instead, my free [favicon checklist](https://flaviocopes.com/tools/favicon-checklist/) covers all the files and link tags you need.