How to Add a Favicon to Your WordPress Blog

So its now 2010 and I am still seeing tons of websites without favicons. Favicons are definitely on the lower end of the importance scale but they really add polish to a website design. So if your website is still sitting out there showing the standard “white page” icon in Firefox, then this overview is for you.

Now most of this information isn’t necessarily new but lets just say if you want me to take your website seriously you should have a favicon. Lets face it I’m ADD and browse with too many tabs open and your Favicon helps me identify your website.

Now lets get started.

What are Favicons?

Favicons simply put is a “favorites” icon. Favicons are the small icons that you see next to the URL in your browser. Look for the one up top. It should look like this:

favicon-aob

Favicons are also displayed in the “tab” area of many browsers such as Firefox and Internet Explorer.

How are Favicons Used?

Favicons help users identify what website they are visting. Favicons are used by nearly all modern browsers and are often used by other services such as RSS Readers and Bookmark Applications.

Why does my site need a Favicon?

This really is a personal question, but considering how easy they are to implement, I would highly suggest you add one. Plus, it helps make your website feel more polished.

How do I make a Favicon?

To make an favicon start by opening your favorite image editing software such as Photoshop or GIMP and create a new 16×16 file. Once you have a new file open, work your magic and create the Favicon of your dreams.

Once you are done save the file as a .png .

Conversion Time:

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

Detailed Instructions:

Simply 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.

How do I add a Favicon?

Once you have your .ico file saved. It is time 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-thesisIf you are using Thesis Theme to mange your website the process of adding a favicon couldn’t be 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.
Nick Reese is a multi-passionate entrepreneur who believes anyone can transform their business and life they they’ve got guts and hustle. He’s also the co-founder of Broadband Now which aims to simplify the broadband shopping process.

Written by

Nick Reese is a multi-passionate entrepreneur who believes anyone can transform their business and life they they've got guts and hustle. He's also the co-founder of Broadband Now which aims to simplify the broadband shopping process.

«
»

Comments are closed.