June 16, 2020
June 16, 2020
You might come across the term favicon when it comes to web design and development. But what is it exactly? Well, in this article, we’ll be answering your question and showing you how to add a favicon to your website. Let’s get started!
Extremely fast, secure, and user-friendly web hosting for your successful online projects! And a 30-day money-back guarantee!
Simply put, a favicon is your website logo that appears next to the meta title on your browser tab. In other words, instead of showing a blank document icon on the browser, your website will display your official website icon.
Most websites usually use their logo as a favicon. If your website doesn’t have a logo, you can simply create one with the free logo maker. This way, your visitors will easily notice your website when they’re opening a lot of tabs in a single browser window. Plus, your site will look much more professional.
Pick one of two ways below to add a favicon to your website!
The easiest way to add an icon to your site is by uploading it as a .png or .ico file from your hosting’s File Manager. Follow these steps to do so:
If you already have a .png file, use it. However, convert the image to .ico format using ConvertICo.com if you ever need to.
Most browsers automatically detect favicon.png and favicon.ico file located in your website directory as your website’s icon. So, you’ll need no coding.
Alternatively, if you have an image other than .png or .ico format (jpg, BMP, gif, etc.), you can use it as your website’s icon as well. However, you need to modify the header.php file on your currently used theme folder. To do so, perform these steps on your hPanel.
You may both keep the original name of the image or rename it to favicon. It’s recommended to rename the icon to distinguish it from other images.
<link rel="shortcut icon" type="image/jpg" href="/favicon.jpg"/>
Change the /jpg and /favicon.jpg parts according to the format and the name of the image you’re about to use.
If you can’t see the new favicon, clear your browser cache and restart your browser.
As you can see, having a favicon on your website is crucial. Not only does it make your site distinguishable on browser tabs, but it also gives a professional look to your website.
You can add it automatically by uploading a .png or .ico image named favicon to your public_html folder. Alternatively, you can upload a regular image (jpg, BMP, gif, etc.) and modify the header.php file within your currently used theme folder.
Was this tutorial helpful? Leave a comment below!
December 25 2017
April 22 2018
Try useful tool to generate favicon/icon online for website, applications & more. Hope you like it! iconmaker.me/
February 20 2020
it's really understandable thanks
April 10 2020
I looked this up a couple days ago. I don't know how I searched, but information was limited. I ended up on some kind of W3 spec sheet and figured, forget this. This search, wow. So easy. THANK YOU
April 17 2020
I did this on my site and it's not working. when i refresh i dont see any favicon
Replied on April 20 2020
Hey Francis, If you can’t see the new favicon, clear your browser cache and restart your browser. Let me know if it worked.
July 16 2020
Brilliant. That's so much quicker than trying to do it through the CMS. Cheers. Robin
October 15 2020
uhh, so if I am using hostinger's site builder and not wordpress, this is not helpful.