WordPress.com Support

Blocks, Design Your Site, Theme Blocks

Theme Blocks » Site Logo Block

The Site Logo block displays an image to represent your website. Once a site logo is set, it can be reused in different places and templates.

Table of Contents

  1. Add the Site Logo Block
  2. Block Toolbar
    1. Duotone Filter
  3. Block Settings
    1. Styles
    2. Settings

Add the Site Logo Block

To add the Site Logo block, click on the + Block Inserter icon and search for “Site Logo”.

💡

Using your keyboard, you can also type /logo and press enter on a new line to quickly add a new Site Logo block.

GIF showing adding a Site Logo block using the keyboard shortcut.

For more, visit our detailed instructions on adding blocks.

↑ Table of Contents ↑

Block Toolbar

When you click on the block, a toolbar of options will appear:

The Site Logo block has the following options in its toolbar:

  • Change block type.
  • Drag the block.
  • Move the block up or down.
  • Align the logo image to the left, center, or right.
  • Crop the image.
  • Add a duotone filter to the image.
  • Replace the image with a new one.
  • Reset the image.
  • Additional settings.
Duotone Filter

The duotone filter option allows you to set colors for the logo image from the block toolbar. Think black and white photos, but in any color combo of your choosing. To get started, select the Duotone Filter button in the toolbar, then choose from the examples shown, or set your own colors.

A gif of an image being clicked in the Editor, then applying several different Duotone Filters to see how it looks.

To set your own colors, select the dots within the color bars:

A screenshot highlighting where to click on the Duotone filter setting to set a custom color, on the color bar.

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

The block settings can be found in the right sidebar.
Block settings
Styles

Choose a style for your logo image:

  • Default: the logo will appear in its original form.
  • Rounded: the logo will appear as a circle (if your image was originally square) or a capsule/ oblong shape (if your image was originally a rectangle.)

If you set a Default Style using the dropdown option, that style will be used for any future Site Logo blocks you insert.

Logo Image Styles Settings, with Default selected.
Settings

Under Settings, you can control:

  • The width of the logo image.
  • If the image links to your homepage, and if you want that link to open in a new tab.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS to style the block. Learn more about adding additional CSS classes to blocks.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

Versatile plans and pricing

  • Free

    Best for students

  • Personal

    Best for hobbyists

  • Premium

    Best for freelancers

  • Business

    Best for small businesses

Choose a plan

Not quite what you're looking for?

Get Help