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. 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. 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.

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

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.

The WPKube site icon.

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

Site icons displayed in SERPs.

Note that you can choose some additional platform-specific options here, relating to the design and presentation of your site icon: For the final step, you’ll want to head back to WordPress, specifically to the Appearance > Theme Editor page: 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:

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

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: 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. 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.

Step 1: Choose the Right Size for Your Site Icon

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. 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. 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:

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

Once you’ve installed and activated the plugin, you’re almost finished. 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:

  • 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.

We’ll then show you three ways to upload you icon: It’s essentially a small icon that displays next to the page tab in your browser, or in Search Engine Results Pages (SERPs):

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

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.

The DesignBold app.

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

The website.

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.

3 Ways to Upload Your Site Icon to WordPress

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.

1. Use WordPress’ Built-In Functionality

Your site icon should now be ready to roll – again, you’ll want to check the front end to be sure. 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.

Step 1. Access the Site Identity Screen in WordPress

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. does this for you, although you’ll have to change settings in other generic editors.

The Site Identity 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.

Step 2. Select Your Site Icon

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.

The Site Icon section.

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:

Step 3. Check Your Site Icon on the Front End

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:

A site icon displayed within WordPress.

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.

2. Install a Suitable WordPress Plugin

In this post, we’ve looked at how to create a site icon for your WordPress website using three methods. Let’s quickly recap: To begin the upload process, simply click the blue Generate favicon button, and move onto the final step.

Step 1. Choose a Suitable Plugin

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

The Favicon by RealFaviconGenerator plugin.

The title of this step is a slight misnomer, as we only recommend one plugin: Favicon by RealFaviconGenerator: 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:

Step 2. Upload Your Full-Sized Site Icon is also fantastic for quickly creating a text-only site icon, and downloading all of the various sizes you need:

The Favicon plugin's options screen.

Next, take a look at the Site Identity section for the Select site icon dialog box: 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.

Step 3. Download Your Site Icons

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.

The Favicon plugin's download screen.

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:

Addition customization options within the Favicon plugin.

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. 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.

The Favicon plugin's preview screen.

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

3. Work With Code to Display Your Site Icon

<link rel=”shortcut icon” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

Is a site icon going to be a part of your site’s overall branding strategy? Share your thoughts in the comments section below! 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. Alternatives such as DesignBold are also perfect for the task, especially if your account already stores your site logo:

Step 2. Upload Your Site Icon Files to 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.

A WordPress directory in Cyberduck.

Once you’re here, you can move onto the next step. 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.

Step 3. Add Code to Your Website’s Header

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.

Editing the header.php file in WordPress.

You’ll first want to check that you’re working with the right theme in the Select theme to edit drop-down menu: If you’re looking for a no-nonsense approach to the task, this is the method for you. The great news for most WordPress users is that the platform offers quick and straightforward functionality for uploading a site icon.

Selecting the right theme to edit with.

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. The screen proper will show the code that makes up your entire WordPress site here, and everything is editable, so proceed with caution. 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.

Adding code to the WordPress editor.

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.

In Summary

Finally, click the blue Update File button, then check out your site icon on the front end. 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.

  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.

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

Posted by WordPress Guru