Site Logo Block

Go to the List of Blocks

Use the Site Logo block to add a graphic to represent your site.

The Site Logo is different from the Site Icon, which is the smaller image (also called the favicon) visible in your dashboard, browser tabs, etc, used to help others recognize your site.

To add a Site Logo block, click the Block Inserter icon when editing the page template. Search for the Site Logo block. Click on it to add the block to your page template.

Once you add the Site Logo block, you will find a placeholder icon on the page template. Click on the placeholder icon to add a new image or select an image from the media library.

Once you pick the image, you can resize the image using the drag handles. Updating the block will apply the changes wherever the Site Logo block is used.

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

Detailed instructions on adding blocks

Block Toolbar

To view the block toolbar, click on the block and the toolbar will be displayed.

Every block comes with unique toolbar icons. These block-specific controls allow you to manipulate the block right in the editor.

The Site Logo block shows seven buttons in the block toolbar:

• Transform to
• Drag icon
• Move arrows
• Crop
• Apply duotone filter
• Replace
• More options

Transform to

Click on the “Transform” button to convert the Site Logo block into a “Group” block, “Columns” block, or “Site Title” block. You can also change the style of the Site Logo block from “Default” to “Rounded”.

Drag icon

To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.

Move arrows

The left and right arrow icons can be used to move the block left or right inside the group of nested blocks.

Get more information about moving a block within the editor.

Crop

Click on the ‘Crop’ icon to open a set of buttons in the Block toolbar to help with cropping the site logo image.

Zoom: Zoom the image. You can change the % for zooming
Aspect Ratio: Keep the aspect ratio while cropping, from the choices in the drop down list.
Rotate: Rotate the site logo image.
Apply and Cancel: Click the ‘Apply’ button to keep the crop changes or the ‘Cancel’ button to cancel the changes.

The ‘Crop’ button is displayed in the Block toolbar only after an image is selected for the site logo.

Apply duotone filter

You can create a two-tone color effect (called the duotone effect) on the site logo image without actually changing the original image. The duotone effect works best on high-contrast images. 

You can pick the two colors for the effect from the list of duotone presets provided in the duotone drop-down. These are based on the foreground, background, primary, secondary and tertiary colors set in the theme’s color palette.

You can also pick your own colors for the shadows and highlights by clicking on the Shadows /Highlights option which opens up the color picker and selecting your custom color from the color palette. 

To clear all the changes you made, use the clear button at the bottom right corner.

Replace

You can replace the site logo image by uploading a new image, or selecting another image from the media library. You can also click ‘reset’ to reset all the changes you made.

More option

These controls give you the option to copy, duplicate, and edit your block as HTML.

Read about these and other settings.

Block Settings

In addition to the block toolbar, every block has specific options in the editor sidebar.

If you do not see the sidebar, click the ‘cog’ icon.

Style settings

You can modify the Site Logo block styles by choosing the ‘Default’ or ‘Rounded’ buttons in the Styles settings panel. Hover over the ‘Default’ or ‘Rounded’ buttons to get a preview of the styles.

The style options may vary based on your theme.

Based on which style you choose for the Site Logo block, WordPress automatically adds a CSS class to the Site Logo block. You can find the class in the Advanced settings panel under Additional CSS class(es).

Other settings

Change the Image width using the slider or by typing in a numerical vale in the text field next to the slider.

Turn on ‘Link image to home’ button to make the site logo image, a link to the site’s homepage. This button is turned on by default.

Turn on ‘Open in new tab’ button to make the site logo image link to the home page open in a new tab.

Turn on ‘Use as site icon’ button to make the site logo image same as the site icon. Site Icons are what you see in the browser tabs.

Advanced

The “Advanced” tab lets you add CSS class(es) to your block. This will allow you to write custom CSS and styles to the block.

If you change the CSS class that is automatically added by WordPress based on the Styles you picked, it will change the Style of the Site Logo.