Brand and design
Logo and site icon
Put the logo in the header and the icon in the browser tab, and know where each one appears.
- 2 minute read
- 2 interactive walkthroughs
- For everyone finishing a site
The logo in the header#
The header has a Logo field. Choose an image in the ordinary way, from the library or by uploading; a transparent PNG or SVG sits best on a coloured header. The header also decides how the logo is sized and whether it is shown beside the menu or centred.
The same logo can be used in the footer and in emails from the site, so it is worth choosing one file you like at small sizes: a square-ish mark, not a wide letterhead.
Header
Menu
Styles
SolidOutlineSoftStep 1 of 3
The logo field
A transparent PNG or SVG sits best on a coloured header. Choose one file that works at small sizes.
Reduced motion is on, so the walkthrough waits for you. Use the arrows or pick a step.
- 1Select the header from the Navigator.
- 2Choose the logo image, and check it at phone width.
- 3Check the footer uses the same file.
The site icon#
The site icon is the small image browsers show in a tab and beside a bookmark: the favicon, in the old language. It lives in website Settings, under Options, and is completely separate from the header logo on purpose, because a tab shows one thing at 16 pixels.
A simple letter or shape in the brand colour usually beats shrinking the logo. Keep it square and let the background fill.
Take the website offline
The address shows a holding page until you publish again. Nothing is deleted.
Take the website offlineDelete this website
Deleting removes the pages, posts and messages. Published files stop being served.
Step 1 of 2
Site icon
The small image in a browser tab and beside a bookmark. A simple letter or shape usually beats shrinking the logo.
Reduced motion is on, so the walkthrough waits for you. Use the arrows or pick a step.
Good to know: Search engines and social shares have their own image: the shared image sits on the SEO tab as the site default.
Common questions
Which file types work for the logo?
PNG, SVG, JPEG, GIF and WebP. SVG is best for sharpness, PNG for everything else. Upload limit is 10 MB per file.
Related guides
Something here out of date, or a step that did not match what you see? Tell us and we will correct the guide. Never send a password or an API token.