Favicon is the tiny image that appear next to your website title in the browser. It helps your users identify your website and more frequent visitors of your site will build an instant recognition for that tiny image. This increases your brand recognition and helps you build trust among your audiences. Recently in our article about most common WordPress mistakes, not adding a favicon was among the top 25. In this article, we will show you how to add a favicon to your WordPress blog.
Why you should Add a Favicon to Your WordPress Site?
As we mentioned earlier that it establishes your website’s identity. However, it also improves your site’s usability and user experience. This image will help you understand it better:
Most users usually have many tabs open in their browser window. This hides your website’s title as the number of tabs increase. The favicon helps user identify your website and quickly switch to the tab they want.
How to Create a Favicon
A favicon is a simple square image. Ideally, it can be 32×32 pixels or a 16×16 pixels image. Open Photoshop or another image editor and create a square image of 128×128 pixels so that you can easily work on the image. Once you have created the image you can resize it into a 32×32 pixels and save it as a PNG file.
Even though most modern browsers will display a favicon in PNG format, older versions of Internet Explorer will not. To make sure that your favicon is displayed in most browsers and devices it is recommended that you convert it to a 16×16 pixels .ico file. To convert a PNG file into .ico you can use Dynamic Drive’s favicon generator.
Adding Favicon to WordPress Site
Upload your favicon to your website’s root directory using FTP. After that you can simply paste this code into your theme’s
<link rel="icon" href="http://www.wpbeginner.com/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://www.wpbeginner.com/favicon.ico" type="image/x-icon" />
Replace wpbeginner.com with your site’s URL and you are good to go. If your theme does not have a header.php file, or you can not find it, then don’t worry we have a plugin for you. Install and activate Insert Headers and Footers plugin. After activating the plugin go to Settings » Insert Headers and Footers and paste the code provided above in the header section and save your settings.
If you don’t want to deal with FTP at all, then you can also use the plugin called All in One Favicon.
We hope that this article helped you add favicon to your WordPress site. For questions and feedback you can leave a comment below or catch us on Twitter.