Add your logo and favicon

Upload a logo and a browser-tab icon, decide whether your site name shows next to the logo, and fine-tune its size and style.

On this page
  1. Open the panel
  2. Favicon
  3. Logo image
  4. Site name
  5. Where the logo shows

Your logo and favicon live in the Logo & Favicon panel of the Design editor. The logo appears in the header and footer of every page; the favicon is the small icon in the browser tab. Both are optional - a site with no logo simply shows your site name as text.

Open the panel

  1. Open your site in the dashboard and choose Design in the sidebar.
  2. Click Logo & Favicon.

Everything in this panel saves automatically and updates the preview as you go.

Favicon

  1. Under Favicon, click Choose… to open your media library and pick an image.
  2. Use a square image, at least 48 x 48 pixels. PNG or WebP works well.

The favicon shows in the browser tab, in bookmarks and in search results. The one image you pick is used everywhere; FolioPage does not generate extra sizes. To swap it, click Replace; to go back to the default FolioPage icon, click the remove button next to it.

Logo image

  1. Under Logo image, click Choose… and pick an image from your media library. If you have not uploaded it yet, see upload images and files.
  2. Once a logo is set, two extra controls appear:
    • Logo image height makes the logo larger or smaller in the header, as a percentage change from the default.
    • Corner radius rounds the logo's corners: None, Small, Medium, Large or Circle. Circle works best with a square image.

A PNG with a transparent background fits most header styles. Click Replace to swap the image or the remove button to take it off.

The Logo & Favicon panel
The Logo & Favicon panel

Site name

Show site name is on by default and decides whether your site name appears in the header and footer:

  • On, with no logo: the name shows as text.
  • On, with a logo: the logo and name show together.
  • Off: only the logo shows. The name is still used as the logo's alternative text for screen readers and search engines.

When the toggle is on, you also get:

  • Logo above site name (only when both a logo and the name show) stacks the logo on top of the name instead of beside it.
  • Site name - the text itself. This is the same name you set in Settings, so changing it here changes it there too.
  • Site name size, Color, Font weight, Uppercase and Letter spacing to style the text. Leave Color unset and the name follows the header text color.

Tip: If you use a wordmark logo that already contains your name, turn Show site name off so it is not shown twice.

Where the logo shows

The logo and site name appear in both the header and the footer. Corner radius applies in both places; Logo image height and the stacked layout apply to the header only, and the footer keeps its own sizing.

Header colors that affect how the logo area looks, such as the header Text color or the scrolled-state colors, are in the Header panel. See header, footer and menu styles.

Related articles