Changing the site logo

Changing the site logo is probably one of the first things you will want to do, so we've created a step by step guide to doing it. We will base these changes on the demo-v2 example client, but the same principles will apply regardless of specific implementation.

The header logo

The header logo uses your themes icon component out of the box.


import Logo from '../assets/logo.svg';
export const icons = {
logo: {
icon: Logo,
size: 'sm'


import { ... Icon ... } from '@deity/falcon-ui';
<Icon src="logo" ... />

To change the logo, all you need to do is change the file client/src/assets/logo.svg.

If you don't want to use an SVG or the icon component then you could just load your asset in client/src/components/Header/HeaderMenuBar.js and use an <img> element.

Favicon / Touch Icons

Your favicon and other meta icons such as touch icons are added in your client/src/App.js file. All you need to do is change the src or replace these assets.


import logo from 'src/assets/logo.png';
import icon16x16 from './assets/icons/appicons/16x16.png';
import icon32x32 from './assets/icons/appicons/32x32.png';
import icon180x180 from './assets/icons/appicons/180x180.png';
import favicon from './assets/icons/appicons/favicon.ico';
const HeadMetaTags = () => (
{({ locale }) => (
<Helmet htmlAttributes={{ lang: locale }} defaultTitle="FALCON STORE" titleTemplate="%s | FALCON STORE">
<meta property="og:image" content={logo} />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="107" />
<link rel="icon" type="image/x-icon" href={favicon} />
<link rel="icon" type="image/png" sizes="16x16" href={icon16x16} />
<link rel="icon" type="image/png" sizes="32x32" href={icon32x32} />
<link rel="apple-touch-icon" sizes="180x180" href={icon180x180} />

Manifest Icons

It wouldn't be a PWA with your manifest.json file. You can change this by editing client/src/manifest.webmanifest.


"icons": [
"src": "./assets/icons/192x192.png",
"sizes": "192x192",
"type": "image/png"
"src": "./assets/icons/512x512.png",
"sizes": "512x512",
"type": "image/png"

That's it! Your site is ready to go.

Don't forget your emails...

Falcon client doesn't handle your transactional emails. Don't forget to change the logo in your backend / email system (BigCommerce, Magento etc).

Ask the community. #help

If you can't find what you're looking for, the answer might be on our community slack channel. Our team keep a close eye on this and will usually get back to you within a few hours, if not straight away. If you haven't created an account yet please sign up here