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.

Note: The Site Logo block is primarily used when editing the Template files in the Site Editor.

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.

Video showing how to add 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. 

How to add Site Logo block quickly
How to add 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
Site Logo Block Toolbar
Site Logo Block Toolbar

Transform to

Transform options for Site Logo Block
Transform options for Site Logo Block

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

Drag icon in the Site Logo Block
Drag icon in the Site Logo Block

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

Move arrows in the Site Logo Block
Move arrows in the Site Logo Block

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.

Clicking the Crop icon displays more buttons in the Block Toolbar
Clicking the Crop icon displays more buttons in the Block Toolbar

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.

Video showing the Crop option in Site Logo block

Top ↑

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.

Apply duotone filter in the Site Logo block
Apply duotone filter in the Site Logo block

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. 

Video showing how to use the duotone filters in the Site Logo block

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

Clear the duotone changes
Clear the duotone changes

Top ↑

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.

Replace option in the Block toolbar
Replace option in the Block toolbar

Top ↑

More option

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

More options in the Site Logo Block
More options in the Site Logo Block

Read about these and other settings.

Top ↑

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.

How to turn on the Block Settings sidebar
How to turn on the Block Settings sidebar
Block Settings in the Site Logo Block
Block Settings in the Site Logo Block

Top ↑

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.

Styles setting in the Site Logo block.

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).

Additional classes added for the selected styles in the Site Logo block.

Additional classes added for the selected styles

Top ↑

Other settings

Other settings in the Site Logo Sidebar
Other settings in the Site Logo Sidebar

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.

Advanced option in the selected Block
Advanced option in the selected Block

Top ↑

Changelog:

  • Created 2022-06-29

Was this article helpful? How could it be improved?