How To Add Favicon To Your Website
A logo or an icon is one of few great ways to increase brand awareness to the public. For a website, this can be achieved by adding a favicon. Therefore, in this article, I would like to share with you how to add a favicon to your website.
What Is A Favicon
Favicon, derived from Favorite Icon, is an icon with several sizes associated with a particular website. It typically displayed in the browser tab, bookmark bar, and history page. Besides that, a favicon also appears as an icon for bookmark page, in the RSS reader and many more.
It was first supported when Microsoft released their Internet Explorer 5 in March 1991. But later it was standardized by the World Wide Web Consortium (W3C) during the release of HTML 4.01 in December 1999.
Originally, a favicon requires ICO format but nowadays, modern browsers have supported more image formats like PNG, JPG, SVG, and GIF. Some of the web browsers even support animated image for the favicon.
Why You Should Add A Favicon To Your Website
As I stated above, using a favicon is a great way to increase your brand awareness. It not only makes your website look professional but also gives identity to your website. This will allow your site to stand out in the web browser along with other popular websites.
The usage of icon or logo has become extremely important that even a 3 years old kid can instantly recognize YouTube logo. Now, try to imagine all these popular websites like Facebook or Twitter without their logo?
Add A Favicon Via Customizer
The easiest and fastest way to add a favicon to your website is by using WordPress customizer. All you need is an image preferably using PNG format with at least 512 pixels of width and height.
Unfortunately, this method only available for WordPress version 4.3 or more. And if you haven't update your WordPress yet, I strongly encourage you to do so. This is because the latest version of WordPress is more secure and has fewer bugs.
To get started, first, login to your WordPress backend and go to Appearance » Customizer. Then, locate Site Identity option in the customizer of your active theme and open it. Please note that the placement of the Site Identity option may vary depending on the theme.
Next, click on the Select image button and select an image for your favicon with at least 512 x 512 pixels.
After that, scroll up and click on the Publish button to save your favicon. While this method is easy, but from my personal experience, your favicon will not be displayed in some apps.
For example, in the RSS reader application like RSS Owl or other feed readers. So, unless you don't mind about it, then this method probably the best for you.
Add A Favicon To Your Website Manually
Preparing Favicon Images And Related Files
If you wish to use a more advanced approach, then you can add a favicon to your website manually. Please note that this method requires an FTP connection. So you might want to read how to upload files and folders using FTP.
Personally, I prefer and recommend this method because it is easy and support all major platforms and devices. And to do so, first, go to realfavicongenerator.net website. Then, click on the Select your Favicon picture button and select your image. Please refer to the image below.
Once you click the button above, it will generate favicon of various sizes and redirect you to page similar like the image below. Next, set up your favicon settings according to your needs. And after that, click on Generate your Favicons and HTML code button to continue.
Then, you will reach the new page with installation instruction. In this step, there are two things you need to do. First, download your favicons by clicking on the Favicon package button. Second, copy all the codes in the third instruction somewhere. Please refer to the image below.
Uploading Favicons And Files To Web Server
Then, upload everything to your web server to the exact location you have set during favicon setting previously. For example, in the root directory or particular folder. This includes all images, ico, xml, svg and webmanifest files.
Next, copy and paste the following lines in your child theme functions.php or site-custom plugin. And replace everything from 3rd to 11th line with the code you have saved from third instruction of Realfavicongenerator earlier. Please note that your code may have more or less line depending on your setting.
Finally, save the file and open your website. Don't forget to clear your cache if you've ever used a favicon before. You should have a brand new favicon which looks perfect on all major platforms and devices.
Add A Favicon Using A Plugin
Beside two methods above, you also can add a favicon using a WordPress plugin. There are a few great plugins you can use to add a favicon to your website easily. You might want to read how to install a WordPress plugin.
For example, Favicon by RealFaviconGenerator is the most popular plugin for this cause. Not only it is extremely easy to use but it also supports all major platforms like Windows, Mac, Android, iOS, and more. In which you can set up a favicon for all popular browser such as Internet Explorer, Chrome, Firefox, Opera, Safari in just a few seconds.
Besides that, All In One Favicon is another great plugin you can use to add a favicon to your website. It also comes with Apple Touch support. However, unlike the previous plugin, All In One Favicon only support three type of favicon which is ICO, PNG, and GIF.
In the long run, adding a favicon will definitely help to popularize your brand and make it more recognizable. If you have other ways to add a favicon to your website, please kindly share it with us in the comment section.
He is a web developer, a programmer, and a computer technician. He obsessed with coding and enjoy learning new things. In his spare time, he likes to play online games, musical instruments or watching anime and movies.