In this article we are going to walk through how to generate Favicons for all platforms, starting with just one favicon file, and then add them to a WordPress site.
What is a Favicon?
Since WordPress 4.3, when it suddenly became extremely simple to add a site icon to a website, the majority of WordPress websites now display a favicon. Favicon is short for ‘favorite icon’, but it can also be seen on the WordPress Customizer under the name of ‘site icon’.
A favicon is the image that is displayed on a browser tab, and as an app icon, to help people recognize a website. If you look up at the top of your page now, to the tabs open in your browser, you will see a row of favicons. These are placed next to each website’s page title.
A site icon usually reflects a website’s brand. Often they will be the same image as a site’s logo. However, they can also be a picture that represents your business in some way. Subconsciously, users will become familiar with a wide assortment of favicons, and will be able to select a site from numerous open tabs, just by recognizing the symbol.
Why You Should Be Using a Favicon
Using a favicon is a clever marketing ploy. The main aim of a favicon is to help a user to identify your site from its competitors. A favicon visually engages with your audience, reminding them of your site and ensuring they can locate it quickly.
A favicon also helps promote your brand, and establishes your site as a reputable source. The ease of setup, alongside the marketing benefits, should ensure all that all sites add a favicon.
How to Create a Favicon
A favicon can be any image, but as already mentioned, it is better if it is either your site logo or is linked to your branding in some way. A simple yet strong and bold icon will make a site stand out and be remembered.
Once you have created or decided on an image, it will need to be edited. A WordPress favicon must be square in shape and be at least 512 x 512 pixels in dimension. Although it can be cropped in WordPress, best practice would be to produce your favicon in an image editing software. GIMP is an easy to use image manipulation program that will help you to quickly edit your image to the right dimensions in minimum time.
You will also need to decide if you want your favicon to have a colored background, or if you would rather transparency. Again, always try to represent your site’s look and style, whilst bearing in mind your icon needs to stand out in a sea of browser tab favicons.
When you are happy with the look of your favicon, it should be saved in either jpeg, png, or gif format. Now you are ready to upload it to WordPress.
Method 1: Place a Favicon within your WordPress directory
Method 2 : Use a plug-in for Favicon
- Log in to the administration panel of your WordPress site.
- On the left side menu, navigate to Plugins > Add New.
- Search for and then install the plug-in titled All in One Favicon (Figure 1)
- Upload the Favicon to the frontend and backend of your site and click Save Changes (Figure 2).
- Refresh the page, and the new Favicon should display.
Method 3 : Edit your theme header.php file
Attention: Unless you are experienced at modifying themes, make a backup of your files before modifying them.
- Before starting the upload process, ensure that your Favicon file is named favicon.ico.
- Using FTP or SSH, upload the Favicon SH to the directory containing the WordPress installation.
- Log in to your WordPress Admin Panel.
- On the left menu, click Appearance > Theme Editor.
- Select the file titled header.php to edit the file.
- Locate or add a line of code as shown in Figure 3.
- If this line does not exist, add the code within the html tags.
We hope that this article helped you add favicon to your WordPress site.
You might also like 5 Best SEO WordPress plugins to Improve Search Ranking
For questions and feedback you can leave a comment below or catch us on