L3.3 – Creating a Logo & Favicon

Module : 03 – Themes & Customization

Lesson < : Lesson 3.2 — Customizing Your Theme
Lesson > : Lesson 3.4 — Using Page Builders (Optional)

What Is a Logo?
What Is a Favicon?
Recommended Sizes and Formats
How to Create a Simple Logo
How to Create a Favicon
Uploading Your Logo in WordPress
Uploading a Favicon (Site Icon)
Best Practices
Summary

1. What Is a Logo?

A logo is a graphical representation of your website or brand. It helps visitors identify your site and builds visual recognition. Logos are usually placed in the header and may also appear in site footers or emails.

Your logo should be simple, clear, and readable at different sizes.

2. What Is a Favicon?

A favicon, also called a site icon, is the small icon that appears in browser tabs, bookmarks, and mobile shortcuts. Although small, it plays an important role in branding and professionalism.

A favicon should be a simplified version of your logo or a recognizable symbol.

3. Recommended Sizes and Formats

To ensure your logo and favicon display correctly, follow these recommended dimensions and formats:

Logo (header): 200 × 60 px or similar proportions
High-resolution logo: 400 × 120 px
Favicon (site icon): 512 × 512 px
File formats: PNG or SVG (for vector logos)

SVG files provide the best sharpness but may require theme or plugin support.

4. How to Create a Simple Logo

You do not need advanced design tools to create a simple logo. Basic tools such as Canva, Figma, and Adobe Express allow beginners to create clean and effective designs.

Steps to Create a Logo

Choose a canvas size such as 800 × 800 px
Select a simple icon representing your brand
Add your website or business name
Apply clean, readable typography
Use brand colors for consistency
Export the logo in PNG format

A minimal design is usually the most effective for websites.

5. How to Create a Favicon

The favicon should be a simplified version of your logo or a single-letter symbol. Because it appears very small, avoid detailed designs.

Steps to Create a Favicon

Start with a canvas size of 512 × 512 px
Use a single icon, letter, or simplified graphic
Ensure high contrast for visibility
Export the file as PNG

A clear, bold icon works best as a favicon.

6. Uploading Your Logo in WordPress

The method for uploading your logo depends on whether you are using a classic theme or a block theme.

Classic Themes (Customizer)

Go to Appearance → Customize
Select Site Identity
Click Select Logo
Upload or choose your logo
Adjust cropping if prompted
Publish the changes

Block Themes (Site Editor)

Go to Appearance → Editor
Select the header template
Click the Site Logo block
Upload or choose your logo
Adjust size and alignment
Save changes

Most block themes support the Site Logo block for easy customization.

7. Uploading a Favicon (Site Icon)

The favicon or site icon is set through the Site Identity settings.

Go to Appearance → Customize
Select Site Identity
Upload a 512 × 512 px image
Preview the icon
Publish the changes

Block themes may also allow favicon settings inside the Site Editor sidebar under Site Settings.

8. Best Practices

Following best practices ensures your logo and favicon display clearly and consistently.

Use high-resolution images for clarity
Keep designs simple and readable
Use consistent colors and fonts across branding
Ensure the favicon remains recognizable at small sizes
Test appearance on mobile and desktop devices

A clean and professional logo enhances brand identity and improves user trust.

9. Summary

A logo represents your brand visually across your website
A favicon is a small icon used in browser tabs and bookmarks
Use recommended sizes for clarity and consistency
Create simple, readable designs using tools like Canva or Figma
Upload your logo and favicon through the Customizer or Site Editor
Follow best practices for effective branding