Tag Archives: Favicon

How to Add a Favicon to a Static Website?

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?

Favicon Captured

  • 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?

My Signature

Create a Favicon With Free Favicon Generators Online

There are so many Free Favicon Generators out there on the Internet. I used some of them to generate my favicons. Then I replaced all of my blogs and website’s default ones with them except for this blog (can’t do anything about it since it is WordPress.com blog).

While I was searching around to generate my favicons for my blogs and website, I found countless of them on the Internet and listed them below for your reference (if you are interested in replacing your favicon one day). To be honest with you, I don’t know which one is better. I just found them and listed here. You may have to try them out if you are interested; but I can tell you which ones I have used to generate mine:

  • FavIcon Generator – Use this online tool to easily create a favorites icon (favicon) for your site. Capable of generating desktop icons as well.
  • favicongenerator – Create free favicon.ico page icons with Favicon Generator, instantly make custom Favicons for your website.
  • FavIcon from Pics – Free and easy to use online tool that can create favicon (.ico) images for browser address bars, favorites and tabs, from pictures, logos and other graphics.
  • favicon.cc – favicon.cc is a tool to create or download favicon.ico icons, that get displayed in the address bar of every browser.
  • freefavicon – Generate a free favicon for your website from an image.
  • editor’s pick Favicon Editor – Make your own favicon with this online editor.
  • editor’s pick Favicon Generator – Favicons generated here contain text instead of images in order to be descriptive, but are colored to be nice looking.
  • CoverIcon – Convert ICO to PNG or PNG to ICO with this little web application.
  • Favicon Generator – Web script lab, Free and easy to use online tool that can create a favorites icon (favicon.ico) images for browser address bars, favorites and tabs, from pictures, logos and other graphics.
  • Favicon Generator and Gallery – Create favicon.ico files to customize the marketing logo in Internet Explorer’s favorites/bookmarks using our free online tool.
  • GraphicsGuru – Free and easy to use online Favicon Generator tool that can create Firefox-compatiable favicon .ico images.
  • Generate It – Free online favicon generator. A favicon is a small, 16×16 image that is shown inside the browser’s location bar and bookmark menu when your site is called up.
  • Favicon Generator Tool -A web-based favicon generator that can create custom favicon icons for your website.

Would you like to create a favicon with the above free favicon generators online? Why or why not? Please leave a comment below.

My Signature

Related articles
How to Add a Favicon to Your New Blogger?
How to Add a Favicon to Your WordPress Blog?

How to Add a Favicon to Your WordPress Blog?

Update: This is for a full version WordPress blog only. If you have a WordPress.com blog, this will not apply to you since you don’t have access to all the files.

Adding a favicon to your blog/website is one way to express yourself. It tells people a little bit about your blog/website too. Professional blogs/websites will never leave it out. If you don’t know what a favicon is, it is a 16×16 pixels or 32×32 pixels image (icon) that is displaced in your browser’s address bar. Check the screenshot below:
Favicon for Exploring The Internet
I just added a favicon to my WordPress blog. Now it is your turn to add yours. If you don’t know how, the following steps could be useful:

  • First you need to have your image ready in your PC (personal computer).
  • Third download favicon.ico image file to your PC and unzip the file.
  • Next upload the unzipped favicon.ico image to public_html/wp-content/themes/your-theme-name/. Make sure you change your-theme-name to be your actual theme’s name.
  • Next login to your WordPress Admin dashboard; click on Appearance/Editor/Header (header.php).
  • Then insert the following code in your header.php file; more specifically between <head> and </head>.
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
  • Finally save your header.php file.

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. You should be able to see a favicon which is next to your URL now. However, some people’s favicon may not be shown immediately.

Would you like to add a favicon to your WordPress blog? Why or why not? Please leave a comment below.

Related article
How to Add a Favicon to Your New Blogger?