• Categories
    • Tutorials
    • Beginners Guide
    • WordPress News
    • WordPress Security
    • Best WordPress Plugins
    • WordPress Themes
    • Product Reviews
    • WP Tips & Tricks
  • Guides
    • Start a Blog
    • Make a Website
    • WordPress Hosting
  • WordPress Hosting
    • A2 Hosting
    • HostGator
    • Bluehost
    • Cloudways
  • Managed Hosting
    • WPEngine
    • Rocket.net
    • WPX
    • Kinsta
  • Coupons
    • WPEngine
    • Flywheel
    • Cloudways
    • A2 Hosting
    • WPX Hosting
WordPress Tutorials

How to Create a Site Icon for Your WordPress Website

Last Updated on: July 9, 2022 Tom Rankin Leave a Comment

How to Create a Site Icon for Your WordPress Website

Branding experts will often talk about visibility. In other words, user-facing elements of your site should practically always reflect your branding. However, one project you may not have considered is to create a site icon for your WordPress website.

The good news is that it’s easier than ever to design and upload your site icon to WordPress. In fact, there are a number of ways to get the task done regardless of your expertise, time, and budget.

In this post, we’ll look at how to create a site icon for your site. First though, we’ll outline why you’d want to consider creating a site icon, along with some considerations you’ll need to make.

What a Site Icon Is (And Why You Need One)

You’ve likely seen a site icon, even if you’re not sure what they are. In fact, you’ve already looked at one – check out the top left-hand corner of your browser window:

The WPKube site icon.

It’s essentially a small icon that displays next to the page tab in your browser, or in Search Engine Results Pages (SERPs):

Site icons displayed in SERPs.

Consider it a digital equivalent to the little ball you attach to your car antenna. However, there’s a difference between a site icon and the 5,000 other colored balls in Walmart’s car park: You can make a site icon specific to your brand.

When it comes to your site’s branding, first impressions are important. What’s more, consumers look to how consistent a brand is as a trust marker. A site icon can help to achieve both of these things.

Granted, your site icon isn’t going to carry the entire weight of your branding strategy. However, the extra visibility it brings – especially if a potential customer is browsing your site – could have a positive impact down the line.

How to Create a Site Icon for Your WordPress Website (In 3 Steps)

There are two phases involved in this task. First, you’ll want to create a site icon. Then, you’ll need to upload it to your WordPress website. Here are three steps you can take to create a site icon for your WordPress site:

  • Choose the right icon size.
  • Carry out some optimal practices when designing your site icon.
  • Select the right tool for the job.

We’ll then show you three ways to upload you icon:

  • Use the built-in functionality of WordPress.
  • Install a plugin to upload your icon.
  • Code a solution to upload your site icon.

There’s a lot to get through, so let’s get started!

Step 1: Choose the Right Size for Your Site Icon

First off, is your site icon’s size. You’d be right in thinking that these files are going to be small. However, while the sizes are tiny, understanding the various dimensions can be complex. This is because different platforms have varying requirements for site icon (or ‘favicon’) sizes.

Generally speaking, most browsers will support a 32 x 32 pixel .ico file, which has been the standard for decades. However, in practice, you’ll want to use a 512 x 512 pixel .png file. The reason is that this covers practically all bases, from the default Chrome site icon size, down to the minimum requirement.

Incidentally, this is also an explicit recommendation within the WordPress back end (more of which later). Once your sizing is set, it’s time to think about design.

Step 2: Ensure You’re Using Optimal Practices for Your Site Icon’s Design

The temptation for site icon design is simply to use a scaled down version of your site’s logo and call it a day. However, given our advice on optimal branding, you should take the time to work on a custom site icon rather than settle on the easy option.

What’s more, the virtual ‘room’ you have means you may not be able to articulate your branding using your regular logo. As such, you’ll want to consider the following when putting together your site icon:

  • Distill your branding down to one or two simple colors that offer consistency and visibility.
  • Pare your logo down to the most essential elements, and make this the subject of your site icon.
  • Use contrast to give focus to your site icon’s main aspects.

To offer a real-world example of these, look again at the WPKube site icon. It uses blue and white, which offers high contrast, and only contains the site’s logo.

This is all that’s needed. It offers visibility, consistency with the other branding elements, and ensures you can spot the tab on SERPs and browser screens.

Step 3: Select the Right Tool to Create Your Site Icon

The final step once you’ve sorted your site icon’s sizing and design is to create it. As you’d expect, there are myriad ways to create your icon, and if you have a tool such as Canva, this is going to be ideal.

Favicon.io is also fantastic for quickly creating a text-only site icon, and downloading all of the various sizes you need:

The Favicon.io website.

Bear in mind that you’ll need to save your site icon as either an 8- or 24-bit nontransparent .PNG file, as this is the most optimal format. Favicon.io does this for you, although you’ll have to change settings in other generic editors.

3 Ways to Upload Your Site Icon to WordPress

As is standard with WordPress, there are a multitude of ways to upload your site icon. We’ll touch on use cases and suitability below, although you’re free to investigate any that potentially suits you.

1. Use WordPress’ Built-In Functionality

The great news for most WordPress users is that the platform offers quick and straightforward functionality for uploading a site icon.

If you’re looking for a no-nonsense approach to the task, this is the method for you.

Step 1. Access the Site Identity Screen in WordPress

First, log into WordPress. From the dashboard, you’ll want to head to your theme options panel. Your premium theme may have dedicated options, although for WordPress’ default themes this will be within the Appearance > Customize > Site Identity screen of the Customizer:

The Site Identity screen.

Once you’re here, you can move onto the next step.

Step 2. Select Your Site Icon

Next, take a look at the Site Identity section for the Select site icon dialog box:

The Site Icon section.

Here, click and upload as you normally would with WordPress media uploads. Remember to set suitable ‘alt text’ for your site icon, to improve your accessibility.

Step 3. Check Your Site Icon on the Front End

Finally, take a look at the front end of your site, specifically to see whether your site icon has uploaded correctly. You’ll note that WordPress offers a large preview of your current site icon, within a browser mockup:

A site icon displayed within WordPress.

However, you should still take a look at how the icon renders in a browser, mainly because it will show how the icon looks for other users – a more important factor.

2. Install a Suitable WordPress Plugin

For many users, installing a WordPress plugin is the ‘go-to’ solution. However, given that practically all WordPress sites have built-in Customizer options for doing this, a plugin may be overkill.

We recommend this approach if you have specific requirements for your site icon, or otherwise don’t have the option to upload one using your theme’s options.

Step 1. Choose a Suitable Plugin

The title of this step is a slight misnomer, as we only recommend one plugin: Favicon by RealFaviconGenerator:

The Favicon by RealFaviconGenerator plugin.

It’s essentially a plugin version of the popular website, and supercharges the built-in functionality of WordPress. It generates all of the required site icons from a single image, and stores them in the Media Library.

Once you’ve installed and activated the plugin, you’re almost finished.

Step 2. Upload Your Full-Sized Site Icon

Once the plugin is activated, you’ll notice a new Appearance > Favicon panel within your WordPress dashboard. Heading here brings up an uncomplicated set of options:

The Favicon plugin's options screen.

While the wording is slightly confusing, you essentially upload to (or select an image from) the Media Library. Remember to add alt text here if you haven’t already.

To begin the upload process, simply click the blue Generate favicon button, and move onto the final step.

Step 3. Download Your Site Icons

Once the plugin begins to generate your site icons, you’ll notice it switches to a web app version of the developer’s site. This is where you’ll find all of the different site icons for various platforms and dimensions:

The Favicon plugin's download screen.

Note that you can choose some additional platform-specific options here, relating to the design and presentation of your site icon:

Addition customization options within the Favicon plugin.

However, once you’re ready, click Generate your Favicons and HTML code, at which point the plugin will work its magic.

Finally, you’ll be taken back to your WordPress dashboard, where you’ll see previews of your site icons in various mockups:

The Favicon plugin's preview screen.

Your site icon should now be ready to roll – again, you’ll want to check the front end to be sure.

3. Work With Code to Display Your Site Icon

The final approach we’ll include is arguably outdated for average users, given the alternatives. However, using code to display your site icon is ideal for very exact requirements, or even if you’re creating a custom theme.

Step 1. Access Your Site’s Server Using File Transfer Protocol (FTP)

For this approach, you’ll need server access through FTP. What’s more you’ll need a suitable client such as Cyberduck or Filezilla, and sharp enough skills. Because we’ll be working with WordPress’ core files, using a child theme is also recommended.

Once you have these in place, log into your server using the credentials found within your hosting control panel. If you’re unsure where to find them, you should contact your host’s support channels. They may also be found in an email you received when you originally purchased hosting.

Step 2. Upload Your Site Icon Files to WordPress

Once you’ve accessed the server, your FTP client should show you a directory list of your site:

A WordPress directory in Cyberduck.

Here, take your site icon file, and upload it to both your primary theme’s folder (found within wp-content > themes) and the root directory of your site.

At this point, you’re almost done. The final step is to hard-code your site icon into WordPress.

Step 3. Add Code to Your Website’s Header

For the final step, you’ll want to head back to WordPress, specifically to the Appearance > Theme Editor page:

Editing the header.php file in WordPress.

When you first access the page, a warning dialog will pop up. Beginners to this screen will want to read the notice, before clicking I understand.

The screen proper will show the code that makes up your entire WordPress site here, and everything is editable, so proceed with caution.

You’ll first want to check that you’re working with the right theme in the Select theme to edit drop-down menu:

Selecting the right theme to edit with.

Next, scroll down the Theme Files list until you find the Theme Header (header.php) option. You’ll want to select this here, which will display your header.php file in the editor.

You’ll want to search for a line of code that begins, <link rel="shortcut icon" and ends with /favicon.ico" />. If you find it, replace it with the following line of code:

&lt;link rel="shortcut icon" href="&lt;?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

If the line doesn’t exist at all, you can add the line in between your <head> tags:

Adding code to the WordPress editor.

Finally, click the blue Update File button, then check out your site icon on the front end.

In Summary

In a nutshell, your site’s icon can help users recognize your brand, and improve your visibility. Any opportunity to snare potential customers should be considered; given the time and resources you need to create a site icon, the decision to do so is easy.

In this post, we’ve looked at how to create a site icon for your WordPress website using three methods. Let’s quickly recap:

  1. Use WordPress’ built-in functionality to upload your icon.
  2. Install a plugin such as Favicon by RealFaviconGenerator.
  3. Display your site icon using code.

Is a site icon going to be a part of your site’s overall branding strategy? Share your thoughts in the comments section below!

+ Share
Disclosure

Tom Rankin

Tom Rankin is a quality content writer for WordPress, tech, and small businesses. When he's not putting fingers to keyboard, he can be found taking photographs, writing music, playing computer games, and talking in the third-person.

Related Posts

Back to all articles
  • Dealing with WordPress RSS Feed Errors: How to Identify and Fix Them

    Dealing with WordPress RSS Feed Errors: How to Identify and Fix Them

  • What is WordPress? A Beginner's Guide!

    What is WordPress? What Can it do & Is it Right for You? A Beginner’s Guide

  • How to Set Up WordPress Two-Factor Authentication: WP 2FA Review

    How to Set Up WordPress Two-Factor Authentication: WP 2FA Review

Coupons

View more deals
  • 10% OFF

    Elegant Themes Coupon

    You can’t move within WordPress circles without coming across E
    Get This Deal
  • pressable logo
    15% OFF

    Pressable Coupon

    If you’re looking for a high-quality managed WordPress hosting
    Get This Deal
  • Teachable Coupon Code
    10% OFF

    Teachable Coupon

    Building an online course business requires the right platform to
    Get This Deal

Leave a Reply Cancel reply

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

Our Newsletter

Get awesome content delivered straight to your inbox.

Thank you!

You have successfully joined our subscriber list.

.

THE BEST OF WPKUBE

Some of the best content we have published so far.

BEGINNER GUIDES & REVIEWS

110 Best WordPress Hosting Options for 2025 (Pros & Cons)
28 Best Managed WordPress Hosting Providers for 2025 Compared
38 Best Cheap WordPress Hosting Providers in 2025 (From $1.99)
46 Best WordPress LMS Plugins – Detailed Comparison & Review for 2024
55 Best WooCommerce Hosting Providers Compared in 2024 (All Budgets)
66 Best WordPress Landing Page Plugins Compared + Recommendations (2024)
79 Best List Building Plugins for WordPress In 2024
8How to Fix the 500 Internal Server Error on Your WordPress Website
9Beaver Builder Review: Honest Thoughts + Pros and Cons (2025)
10OptimizePress Review: Create Landing Pages with Ease
11How to Make a Website: Complete Beginner’s Guide
12Top 22 Best Free Stock Photo Resources For Your Site
13How to Start a Blog in 2022 (Step by Step Guide)
14How To Fix ‘503 Service Unavailable’ WordPress Error
1511 Best Contact Form Plugins for WordPress in 2025
16How to Add a Custom Logo to Your WordPress Site
17How to Fix Error Establishing a Database Connection in WordPress

Cloudways: 30% OFF Deal

Save 30% on one of the best cloud hosting providers.

Get this Deal
Featured In Forbes Huffpost Entrepreneur SEJ

About WPKube

WPKube is an online WordPress resource which focuses on WordPress tutorials, How-to’s, guides, plugins, news, and more. We aim to provide the most comprehensive beginner’s guides to anything about WordPress — from installing plugins, themes, automated installs and setups, to creating and setting up pages for your website.

We have over 500+ tutorials, guides, product reviews, tips, and tricks about WordPress. Founded by Devesh Sharma, the main goal of this site is to provide useful information on anything and everything WordPress.

Twitter Facebook

Useful Links

  • Behind the Scenes
  • Beginner Guides
  • WordPress Hosting
  • WooCommerce Themes
  • MeridianThemes
  • Exclusive WordPress Deals
View All Guides »

Reviews

  • WPEngine 33% OFF
  • WPX Hosting
  • Flywheel 33% OFF
  • Divi Theme 20% OFF
  • Systeme.io
  • Elegant Themes
Reviews »

Deals

  • InMotion Hosting
  • LifterLMS Coupon
  • LiquidWeb Coupon
  • WPEngine Coupon
  • A2 Hosting
  • Solid Affiliate
More Deals »
© Copyright 2023 WPKube ® All Rights Reserved.
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy