Customizer. Logo and Favicon Section

To make your website more unique and outstanding you may need to add a logo and a favicon. Usually, these elements help to identify your website.

From this tutorial you’ll learn how to work with Logo and Favicon section.
A logo is one of the elements of your website of immense importance, as it represents website’s main idea to the visitors, makes its appearance easily recognizable.
A favicon is an element, that helps visitors to navigate right to your website when looking through the rows of tabs in their browsers. It performs the presentational function.

Let’s find out how to set custom logo and favicon.
To upload a logo or a favicon navigate to Appearance > Customize tab to open Customizer. Here locate and open General Settings tab. You’ll see a list of submenus, including Logo & Favicon. Enter this menu to proceed to customization.

Logo Settings

Logo type option allows choosing whether you want to use an image or a text as your website’s logo. Depending on what type of logo you want to use, the further customization options will vary.

Text Logo — there are different customization options, that allow managing the textual type of logo. Let’s peek into them.

  • Font family — here you can choose the font for your website’s logo.
  • Style — this option sets the font style for a textual logo (normal, italic or oblique).
  • Weight — this option sets the thickness of the text characters outlines.
  • Font size — here you can pick the appropriate font size for the textual logo.
  • Character set — pick the necessary character set for a logo.

Image Logo — the customization options for a logo in the form of an image are different from the ones for the text. First, choose an image as a logo, and all the settings will appear immediately. Let’s discover what we can do with the image logo.

  • Logo upload — here you can upload a logo from your website’s media library, or from your hard drive.
  • Invert logo upload — here you can upload an inverted logo to use it for the inverted color scheme.
  • Retina logo upload — here you can upload a high-resolution logo for retina-ready devices.
Favicon Settings

Site Icon — in this block you can set the favicon (your website’s icon, that is at the top of your website’s tab in a browser window. It can be in .ico, .png or any other format.

Where to apply a logo?

Usually, we place a logo at the website’s header, footer, and in the widget area.

  • To add a logo to the website’s header navigate to the Header tab in Customizer, enter Styles submenu and pick the layout, where you want to show a website’s logo.
  • Website’s footer — navigate to Footer tab, choose Footer Styles submenu and enable Show Footer Logo option.
  • About widget — enter Widgets tab, click on Add New Widget button and choose About widget. Upload a logo from the media library or your hard drive, and enter your website’s information.
This tutorial is based on Marigold WordPress theme.