A while ago I’ve written a post of How to Add a Favicon to Your WordPress Blog? But this time it is different. I want to add a favicon to a static website – meaning a website which only uses html. How can I do that? The follow steps are what I’ve followed and created mine. See it in this static website: Weight Loss With Green Tea. What do you think?
- First make sure you have an image ready in your desktop.
- If not you can follow this post to make one: Create a Favicon With Free Favicon Generators Online.
- You have to save the image as favicon.ico format.
- You probably have to download favicon.ico image to your desktop and unzip it.
- Then login to your web hosting cpanel.
- Upload the favicon.ico to your website directory. Mine looks like this: http://www.yourdomainname.com/
Make sure you change your domainname to be your real domain name. - Once you’ve done that. Open your index.html file and add the follow code between <header> and </header>
<link rel="shortcut icon"
href="http://www.yourdomainname.com/favicon.ico"
type="image/x-icon" />
Make sure you change your domainname to be your real domain name.
- The final step is to save your index.html file.
Now go to check it out and see whether it works. If you use Internet Explorer as your browser, then holding Ctrl and hit R at the same time to reload your blog/website. If you use Mozilla Firefox as your browser, then holding Ctrl and hit F5 at the same time to refresh your blog/website. Sometimes it takes a little while for my favicon to show up the first time.
Would you like to add a favicon to your static website? Adding a favicon to a website helps to establish your website branding. Do you think so? Please leave your comment below.
Update: Note it didn’t show up when I first created it but it showed up the next day.
Related article
How to Add a Favicon to Your New Blogger?