Creating a WordPress Favicon or Site Icon

A favicon, also known as a site icon, is a small icon displayed on a browser tab next to a website’s page title. It can also be seen next to a website’s name in a list of bookmarked sites and used as an app icon. Despite their prevalence, many people may not have consciously noticed favicons or be aware of what they are or what they do. In this article, we will explain exactly what a favicon is and how it can benefit your business or blog. We will also look at how you can quickly and easily add one to your WordPress blog.

Favicons usually take the image of the site logo that they represent. However, they can also be an image that is linked to a site’s branding or style if this is more suitable. Once a favicon is selected, it should not be changed unless your business undergoes a re-brand. That way, your website viewers become familiar with your favicon and recognize it in a lineup of browser tabs.

The benefits of using a favicon are huge. Adding a favicon will enable your audience to subconsciously and instantly identify your WordPress website in a sea of apps or web pages. This familiarity with your favicon will help your audience find you quickly and easily. It will also remind users of your site’s existence, resulting in an increase in traffic and returning visitor numbers. Lastly, a favicon will help your site stand out from your competition and establish your site as a reputable source.

To create a favicon, the first step is to create a suitable image. A favicon should ideally be the same image as your website’s logo so visitors can immediately recognize it. However, sometimes with complicated logos, this can result in an unclear or confusing favicon. In which case, you will have to simplify your logo or use a different image. Make sure you choose something that represents your business and obviously reflects your brand.

Per the WordPress Codex, favicon images need to be square in shape and at least 512 x 512 pixels in dimension. Although images can be cropped in WordPress, it is advised to edit your image beforehand using editing software. If you are looking to design a new image from scratch or your logo needs some serious adjustments, then it is best to use a professional editing program like Photoshop or GIMP.

However, an easier solution for those with less design experience is to use Canva. This free graphic design tool website will enable you to easily edit an image and make it favicon-ready. Resize your logo or change the color or transparency to create a favicon image that will work for your site. Once you are happy with the image you are going to use as your favicon, it needs to be saved in either a gif, png, or jpeg format.

Adding a site icon used to be best left to web developers and those with in-depth coding knowledge. However, luckily, after the release of WordPress 4.3, adding a favicon became extremely easy and straightforward. To add a favicon to your WordPress site/blog, open your WordPress dashboard and in the menu select Appearance > Customize. This will open the live WordPress customizer with a preview of the homepage of your website. Select Site Identity. Here you will see displayed Site Title and Site Icon. Under Site Icon, you can add, change, or remove your favicon. Click on Select Image. Your WordPress Media Library will now appear on your screen. Select the Upload Files tab and then either drop your favicon image into the box or select it from your computer.

Back in your Media Library, check your image is ticked and then click Select in the bottom right-hand corner. WordPress will now ask you if you would like to crop your image. If you have already edited your image in an editing program, select Skip Cropping. Otherwise, crop away. In the customizer, under Site Icon, you will see your uploaded image. Select Save and Publish at the top of the customizer and then refresh the page. You should now be able to view your favicon in your web page browser tab.

There are, of course, a number of other ways to add a favicon to your WordPress website. Favicon by RealFaviconGenerator is a WordPress plugin that is a great option if you are looking to add a favicon to your website. Install the plugin to your WordPress website and then simply point and click to upload an image and add it as favicon. RealFaviconGenerator will then generate all the icons you need for various browsers and devices. This is a straightforward plugin and is free to download and use.

Many of the new themes come with numerous features and functionalities, making it quick and easy for people to set up new WordPress websites. Some of these themes now come with the option of adding a favicon for you. Check your theme’s Options page to see if this is a feature that it offers. If you are someone who prefers to code their website, you can upload your favicon image into your site’s root directory. Code then needs to be added to your header.php file.

In conclusion, uploading a favicon to a WordPress website is a very easy process. The benefits of having a favicon are impressive, a marketing tactic that will enable your users to identify your site just by spotting your image. So make it a priority to find a spare half hour in your day and set your site up with a favicon.

Stay in Touch


Related Articles