{"id":15779631,"date":"2022-06-29T20:42:54","date_gmt":"2022-06-29T20:42:54","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=15779631"},"modified":"2024-10-23T20:27:39","modified_gmt":"2024-10-23T20:27:39","slug":"site-logo-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/site-logo-block\/","title":{"rendered":"Site Logo block"},"content":{"rendered":"\n
Go to the List of Blocks<\/a><\/p>\n\n\n\n The Site Logo<\/em> 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.<\/p>\n\n\n\n Note:<\/strong> <\/em>The Site Logo block is primarily used when editing the Template files in the Site Editor<\/a>.<\/p><\/div>\n\n\n\n To add a Site Logo<\/em> block, create a new page or open the Site Editor. Click the Block Inserter icon and search for the Site Logo<\/em> Block. <\/p>\n\n\n\n You can also type \/site-logo<\/kbd> and hit enter in a new paragraph block to add the Site Logo<\/em> block quickly. <\/p>\n\n\n\n Select the Site Logo<\/em> placeholder icon and upload a new image or select one from the Media Library. <\/p>\n\n\n\n Once you have added an image logo, you can resize it using the drag handles.<\/p>\n\n\n\n When you add an image to the Site Logo <\/em>block, the change applies to all Site Logo<\/em> blocks on your website.<\/p>\n\n\n\n To use the site logo image as the site icon in browser tabs, bookmark bars, and WordPress mobile apps, access the Site Logo<\/em> block settings panel and enable the Use as site icon option. It automatically set the image in the Site Logo <\/em>block as the site icon.<\/p>\n\n\n\n Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n A block toolbar lets you customize or modify each block in the editor. Select the Site Logo<\/em> block to view its block toolbar. Below is a list of tools shown in this block toolbar:<\/p>\n\n\n\n The Transform to<\/strong> button lets you convert the Site Logo<\/em> block into a Columns<\/em>, Group<\/em>, or Site Title<\/em> block. You can also change the Site Logo<\/em> block style from Default <\/strong>to Rounded<\/strong>.<\/p>\n\n\n\n Use the block-moving tools to move the Site Logo<\/em> block.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Moreover, you can also use the arrows icon to move the block left or right within the group of nested blocks.<\/p>\n\n\n\n Get more information about moving a block within the editor.<\/a><\/p>\n\n\n\n Use the Change alignment<\/strong> tool to modify the alignment of the Site Logo<\/em> block. Select the icon and pick one of the following alignment options:<\/p>\n\n\n\n The Apply duotone filter<\/strong> 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n If you want to undo all the changes, use the Clear button.<\/p>\n\n\n\n Use the Crop<\/strong> 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:<\/p>\n\n\n\n The Crop button only appears in the block toolbar after you have inserted an image into the Site Logo<\/em> block.<\/p>\n\n\n\n The Replace <\/strong>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.<\/p>\n\n\n\nHow to use the Site Logo block<\/h2>\n\n\n\n
<\/figure>\n\n\n\n
<\/figure>\n\n\n\n
Block toolbar<\/h2>\n\n\n\n
\n
Transform to<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
Block-moving tools<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
Change alignment<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
\n
Apply duotone filter<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
Crop<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
\n
Replace<\/h3>\n\n\n\n
<\/figure>\n\n\n\n
Options<\/h3>\n\n\n\n
<\/figure>\n\n\n\n