Logo, icons, header and footer

Start hereNavigation and lookLogo, icons, header and footerYour logo, the little icon in the browser tab, the picture shown when a page is shared, and the header and footer that frame every page.Adding your logo

Go to Settings and stay on the General tab.

In the Logo card, add your image under Logo. Any shape works.

If your header or footer has a dark background, add a version that reads on dark under Dark logo (optional).

Both save the moment you upload or remove them; you don't need to press Save settings.The logo appears wherever a Logo block is set to the site logo, usually in your header and footer. Set a Logo block's Variant to dark to show the dark logo there; if you haven't added a dark logo, it falls back to the normal one.The Logo and Site icon cards in Settings → General.The site icon (favicon)The site icon is the small square picture in browser tabs and bookmarks, and on a phone's home screen when someone saves your site. A wide logo squashed into a square is unreadable there, which is why the icon is set separately.

In the Site icon card, press Choose a square icon and pick a PNG, JPEG, WebP or SVG image. A square image works best.

Adjust the look: Background (None, White, Dark or your own colour), Fit (Whole logo or Fill & crop) and Padding. Nothing is saved yet.

Press Save branding. Every size of icon the browsers and phones need is made for you.

Currently live shows the icons your site is using now. Remove goes back to the default icons. The site icon is kept separately from your media library, so you won't find it there.Give the icon a Background, such as Dark or your brand colour. A transparent icon can vanish against a dark browser tab, and phone home-screen icons look better solid.The picture shown when a page is sharedWhen someone shares a page on social media or in a message, a picture appears with the link. The Social share image card on the General tab sets the picture used for any page that hasn't been given one of its own. About 1200×630 pixels works best.Unlike the logo, this one waits for Save settings. To give a single page its own picture, see Search engines and sharing.Choosing the header and footerYour header and footer are reusable blocks: one is added to the top of every page and one to the bottom. To choose which:

Go to Settings and open the CMS tab.

In the Layout card, pick a block for Site header block and Site footer block, or None for no header or footer.

Press Save settings.

Settings → CMS → Layout.Changing the header or footer

Open Reusable Blocks in the sidebar and click your header or footer.

Change it like any page: edit the words, swap the logo, add a button.

Press Publish changes. Until you do, visitors keep seeing the old one, so you can work on it in peace.

A typical header is a Section holding a Flex row: a Logo block on the left and a Nav block (your menu) on the right. The things you will most often change:

Logo size: select the Logo block and set Height (px), and Height on phones if it needs to be smaller there.

A header that stays on screen: select the header's Section and turn on Sticky (stays on top when scrolling). Turn on Shrink on scroll as well and the header gets slimmer once visitors scroll down; the Logo block's Shrink height sets how small the logo gets.

The menu on phones: the Flex row's Collapse into a menu folds the menu behind a ☰ button on small screens. Keep the logo outside the part that folds.

The menu's items: these come from the Menu screen, not the header. See The site menu.

The header and footer are on every page, so publishing a change to them changes the whole site at once. If you edit a page and the header has unpublished changes, the page's Publish offers to publish the header too; leave it unticked unless you mean to.← ThemesThe media library →Getting startedPagesBuilding with blocksNavigation and lookMediaForms and leadsCatalogueShopBookings and membersRunning the siteCairnWebsites for businesses that need more than a brochure. Built, hosted and kept running by us.StartBuildRun© 2026 Cairn. All rights reserved.Built with Cairn.