Skip Navigation
Comprar Ahora
Home » Course » WordPress Design » Introduction to Site Designing with Toolset » WordPress Site Identity

WordPress Site Identity

In WordPress, your website's title, tagline, logo, and favicon are the main site identity options. Learn how to use them to your brand's advantage.

Site Identity tab in Customizer

The Site Identity tab allows you to differentiate your brand against competitors by creating a more professional first impression to users.

To access the tab go to Appearance → Customize and search for the Site Identity panel on the left sidebar.

Adding a Site Title in the the Site Identity tab

The theme of your site affects the design output of these features. While some themes can have more customization features than the above example, others might not even allow you to access the Site Identity panel.

If your theme is missing features from the Site Identity tab, you can install a plugin that enables the ones you need.

Before designing your site, make sure to read your theme documentation to understand what is available, and where, in your Customizer. You can also contact the theme developer or support team for more information. 

Designing your logo and favicon

The first question you should ask yourself is who should design your logo and favicon. Designing takes talent, practice, and knowledge to get right.

If you’re not a designer yourself and you have the budget, you should hire a designer to design your logo, favicon, and brand identity. 

And of course, if you don’t have the budget or feel confident enough, you can always do it yourself.

A logo is a graphic symbol that helps users and clients recognize your brand, and it improves the way users view your content while strengthening your brand identity. 

It’s important to make sure your logo design is:

  • Simple: It uses no more than 3 colors or 2 font types (typography)
  • Relevant: The design is closely connected to your brand identity
  • Memorable: Not another cliché design, something unique to your business 
  • Timeless: It ignores short-living trends, unclear fonts, and uncoordinated colors
  • Versatile: It looks good on large and small screens

An example of a logo using outdated design techniques

An example of a logo using modern design techniques

You can easily make a design using online sources such as FreeLogo Design, BuildMyLogo, or Tailor Brands. If you want to make it completely from scratch, you can also use Adobe Photoshop or Figma to create your logo.

Please note that WordPress accepts JPG, JPEG, PNG, and ICO image formats by default. If you would like to upload SVG file types you need to install a plugin such as Safe SVG.

If you don’t want to create your logo from scratch or hire a designer, using a tool like tailorbrands.com helps you create a simple logo according to your answers in the wizard:

An example of an online logo-maker

How to Make a Favicon (Site icon)

A favicon, or site icon, is a small graphic image that represents your brand identity. The favicon symbol is important because it helps users quickly identify your website from others in the browser tabs. This creates a smoother experience for your clients and helps create a better first impression, which makes your site appear more professional and attractive. 

The Toolset website on the front-end

To make a good favicon, there are some requirements you should follow. 

Make sure that your favicon is:

  • Square
  • At least 512×512 pixels
  • Relevant to your brand identity, logo, and site design
  • Simple 

A website displaying a favicon that is the same as its logo

A website displaying a favicon that is a simpler version of their logo

In the example on the right, the simpler and cleaner version of the site logo works better as a favicon because users can understand the image better than the overwhelming example on the left.

Please note that if you don’t want to create your favicon from scratch or hire a designer, you can easily use the tool favicon.io. This works by generating a favicon from text, fonts, and colors you select from:

An example of an online favicon generator
Go to next step
Cloe
Updated
mayo 11, 2021
Send feedback to our documentation team