Site Logo Block

Go to the List of Blocks

The Site Logo block lets you add a logo or image representing your website identity and help increase brand recognition. Unlike a site icon or a favicon, a logo is only visible on website pages like the home page.

How to use the Site Logo block

To add a Site Logo block, create a new page or open the Site Editor. Click the Block Inserter icon and search for the Site Logo Block.

You can also type /site-logo and hit enter in a new paragraph block to add the Site Logo block quickly. 

Select the Site Logo placeholder icon and upload a new image or select one from the Media Library.

Once you have added an image logo, you can resize it using the drag handles.

When you add an image to the Site Logo block, the change applies to all Site Logo block in your website.

To use the site logo image as the site icon in browser tabs, bookmark bars, and WordPress mobile apps, access the Site Logo block settings panel and enable the Use as site icon option. It automatically set the image in the Site Logo block as the site icon.

Detailed instructions on adding blocks

Block Toolbar

A block toolbar lets you customize or modify each block in the editor. Select the Site Logo block to view its block toolbar. Below is a list of tools shown in this block toolbar:

• Transform to
• Block-moving tools
• Change alignment
• Apply duotone filter
• Crop
• Replace
• More options

Transform to

The Transform to button lets you convert the Site Logo block into a Columns, Group, or Site Title block. You can also change the Site Logo block style from Default to Rounded.

Block-moving tools

Use the block-moving tools to move the Site Logo block.

The drag or six dots icon allows you to freely reposition the block anywhere within the editor by holding the icon and dragging it to the new location.

Moreover, you can also use the arrows icon to move the block left or right within the group of nested blocks.

Get more information about moving a block within the editor.

Change alignment

Use the Change alignment tool to modify the alignment of the Site Logo block. Select the icon and pick one of the following alignment options:

• None – is the default block size.
• Align left – makes the block left-aligned.
• Align center – lets you align the block to the center.
• Align right – makes the block right-aligned.

Apply duotone filter

The Apply duotone filter option lets you create a two-tone color effect on the site logo without changing the original image. Note that the duotone effect works best on high-contrast images.

To apply the duotone filter, click the icon and choose the two colors from the provided duotone presets. You can create custom duotone colors using the Shadows and Highlights options. Choose from the provided color presets on each option, or use the color picker to set the custom colors.

If you want to undo all the changes, use the Clear button.

Crop

Use the Crop icon to adjust the site logo image. When clicked, it will display a set of tools for cropping the image. Below is a list of the Crop tools:

• Zoom – enlarges the image by up to 300%.
• Aspect Ratio – modifies the image’s aspect ratio with the choices in the dropdown list.
• Rotate – revolves around the site logo image.
• Apply – confirms or keeps the site logo image customization.
• Cancel – discards any changes to the site logo image.

The Crop button only appears in the block toolbar after you have inserted an image into the Site Logo block.

Replace

The Replace option lets you change the site logo by choosing another image from the Media Library or uploading a new one from your local computer. You can also remove the site logo image by clicking Reset.

Options

The Option icon on the Site Logo block toolbar lets you access more block options. A drop-down menu will appear when you click it, and below is a list of actions you can do with the Site Logo block:.

Read detailed information about the Other settings.

Block settings

WordPress blocks have specific configuration options in the block settings panel. To access the Site Logo block settings panel, click the Settings button at the top-right corner of the editor. Moreover, the Site Logo block settings panel is divided into two tabs – Settings and Styles.

Settings

The Settings tab has several options as follows:

Block Settings

Change the image width using the slider or typing a numeric value in the text field next to the slider.

Enable the Link image to home option to make a hyperlink to your website’s home page. This option is turned on by default.

Turn on the Open in new tab option to automatically open the home page in a new tab when the site logo image is clicked.

Activate the Use as site icon option to set the site logo image as the site icon. A site icon is a small image next to the site title in a web browser tab.

Note that this option is only available after you add an image to the Site Logo block.

Advanced

The Advanced section lets you add CSS class(es) to the Site Logo block. This will allow you to write custom CSS and styles for the block.

You can also apply the block styles to all Site Logo blocks by clicking the Apply globally button.

Styles

The Styles tab has the following options:

Styles

Use the Styles option to change the look of the Site Logo block. The initial configuration for the block’s style is Default. You can change the site logo shape to round by clicking the Rounded button.

Dimensions

The Dimensions option adds additional settings for the Site Logo block, where you can set custom width, padding, and margin.

Learn more about the Dimensions settings.