When you visit a website, there is an image in the browser tab that displays for each site (See image to the right). This is called a “favicon.” The favicon image is in the .ico file format. You can have other file formats; however, this article will only explain how to use the .ico format. The .ico format is universally accepted in all browsers. To create your own favicon, you can use our Favicon Generator In this article, you’ll learn how to add the favicon to your site.
You will want to name your favicon image “favicon.ico“. Also, when creating a favicon, you will want to make sure your image is square and not rectangle.
Once you get your favicon generated, you can upload it to your server and add code to your site to display your own image in the browser tab. Below are the steps to get your own favicon working on our server.
Steps to add a favicon to your site
- Login into your cPanel.
- Go to the File Manager, Select your directory for your site (In this case the main domain public_html location) and Click Go.
- Upload the favicon to your server.
Edit the source code that contains the <head> code of your site. The head section code should look similar to the snapshot to the right. - Add the following line of code below the <title> tag.
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon' />
- Save the file and preview your site in your browser. You should see the favicon show in your browser.
If you do not see your favicon load in your browser, you may need to Clear your browser cache.
Nice tutorial. This tutorial is fully informative about add favicon in website. It saved lot of time. This was so easy to follow and exactly what I was looking for.
Thanks.
Good source of information. Really helpful post for newbies bloggers.
I uploaded the new favicon which as the exact same name as the old favicon so I replaced upon uploaded. Then I cleared my browser cache. I still don’t see it when I navigate to my site. I can navigate directly to it and see displayed correctly but it doesn’t appear where it should. I still see the genertic InMotion favicon.
I can’t find the file the has the code to edit. I don’t see an index.html file in my web root.
Any ideas?
Hello Miles,
I can understand the frustration. Check out this post about forcing a favicon refresh. I hope this helps to answer your question, please let us know if you require any further assistance.
Regards,
Arnel C.
works beautifully! thanks!
Just deleted the cache and navigated directly to the favicon file and it displays correctly (i’m using chrome). Now the favicon displayed aside the title of the page is the blank paper. I just found a solution! First of all i have two domains on the same hosting account, the first one is pointed to my public_html folder, the second in a subfolder in public_html. The only way to display the favicon is to upload it directly in the public_html folder instead of uploading it in let’s say “public_html/domain_B”. Why can not i use the favicon file in the subfolder of site_B?
The favicon should be in the root directory for that domain so if it is an addon domain, you would place it in the directory for that addon domain. If you need to specifically define a favicon directory, you may do so within your code itself. Please this in your
section of your code to define a specific favicon path:<link rel=”shortcut icon” href=”https://example.com/myicon.ico” />
I tried both the solutions but i’m still seeing the inmotionhosting favicon…how can i fix it?
Thanks in advance!
Hello Emanuele,
Thank you for your question. In most cases, you will not see the new Favicon, until you clear your browser cache.
Also, as a test, try to view the favicon, by navigating directly to it.
If you have any further questions, feel free to post them below.
Thank you,
-John-Paul
For anyone having problems with this. If you use the following line of code instead of the one given up top may help.
<link rel=”icon” type=”image/ico” href=”https://www.insertyourwebsite.com/favicon.ico”/>