Skip to content

Branding

See Theme-UI for information on changing colors and fonts.

Changing logos and titles

Branding is handled using component shadowing. The file you want to modify is located at src/components/header/branding.js. You can follow the comments in the code to get an idea of how you can modify this code to customize the look and feel of your brand entirely.

The site title is source from gatsby-config.js under the siteMetadata field.

By default the logo is found in the src/content/assets folder under the names catalyst-site-logo.png. Change this file to reflect your branding. You can use other file extensions, e.g. .jpg but you cannot change the file name. It is queried by file name, not by relativePath. So it will work with catalyst-site-logo.jpg but not with logo-main.jpg.

If you want to completely customize the logo you can write your own GraphQL query in the shadowed branding component to source a logo from a different location or with a different file name.

catalyst-site-social.png

This file is used as the default image in places like Twitter and Facebook. This file is best in a 2:1 aspect ratio, something like 1200x600px. See the twitter card docs for more information. You can use alternate image types such as .jpg if you want. It is queried by file name, not by relativePath. So it will work with catalyst-site-social.jpg but not with social-image.jpg.

catalyst-site-icon.png

There is also a file called catalyst-site-icon.png that provides your icon for use gatsby-plugin-manifest to create icons for web, PWA, etc. This file should be square and at least 512x512px in dimensions.

© 2021 Gatsby Theme Catalyst