favicons...

/

If you have a website (not a blog hosted by blogger or typepad etc.) you need a favicon. A favicon is that graphic that shows up in a browser address bar or in front of your bookmarks. It helps people visually identify your site. I mistakenly ended up with a green t-shirt as mine. I don't remember how I got it but I hated it.

I must add this is when I really hate it that software no longer comes packaged with a manual. I could have puzzled this out and changed this long before now. But my friend Laurie tipped me off to what a favicon was and how to make one. (Thanks Laurie!)

I made several graphics before I ended up with this one, whatever you use should be simple with a good contrast. No thin lines because you reduce it to 16 x 16 pixels which is tiny.

Once you have created your 16 x 16 pixel graphic save the file as a .png.

Before you can add the favicon to your website you need to convert it into a .ico format. To do this visit you will want to use the converter found at Faviconr.

Upload your .png file to faviconr.com

Faviconr will then convert your file into a .ico file. (you might have to hit Generate Favicon twice). Once your favicon is generated simply click Download Favicon. Remember where you saved it.

Once your .ico file is saved you need to upload it to your website. Make sure you put it in the root directory. This means if you visit http://www.yourwebsite.com/favicon.ico you will get your favicon.

Once you have your Favicon uploaded simply add this line of code within your tags.

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />

If you are using Wordpress this tag will be found within your “header.php” file.

Add a Favicon to Thesis

favicon-thesis

If you are using Thesis Theme (see link on right) to mange your website the process of adding a favicon is even easier.

  1. Start by uploading your icon to your website “root.” Again, this means if you visit http://www.yourwebsite.com/favicon.ico you will get your favicon.
  2. Next login to Wordpress and visit your Thesis Options Panel and paste the code you see above into the “Header Scripts” box.
  3. Once you are done click the save button and visit your home page to see your new Favicon.

I am great at making graphics but awful at anything that has code in it but somehow I stumbled through this. That means you can too. I do use Thesis which I think made it easier.