How to Create a Favicon For Your Website or Blog »

February 24, 2009

3

Use this online tool to easily create a favicon (favorite icon) for your website or blog. A favicon is a small, 16×16 image that is shown inside the browser’s address bar, browser tabs and bookmark menu when visitor’s view your page. It is a good way to brand your site and increase its prominence in your visitor’s bookmark menu.

Many followers in my social network and visitor’s to my blog (Virtualpreneurs) have been asking how I added a picture next to my website/blog title instead of the blank default icon that’s commonly used for websites and blogs . If you view your browser bar right now you can see my favicon next to the web address of my blog.

There are tons of advantages for having a favicon added to your website/blog. Most obvious is that it enables you to brand your company’s logo inside the browser bar of your visitor’s computer screen.

To set up a favicon for your website or blog use the following steps:

1. Right click on http://tools.dynamicdrive.com/favicon/ and open it in another tab or another window.

2. On this web page, you can generate a favicon from any picture on your computer’s PC. Browse for your picture and upload it into the browser box and CLICK on CREATE ICON.

3. Download the dynamic drive generated icon to your PC and rename it something different. Do not keep the name favicon ( research shows naming it favicon will not make the favicon display properly on some blogs).

4. Upload the picture to your server or a free host account and get the URL of the uploaded file. ( You can set up an account with photobucket.com or googlepages).

5. An example of what the URL should look like is:

http://hideawaygetter.googlepages.com/NAMEOFUPLOADEDFILE.ico
- or for websites -
http://www.thevirtualprofessionals.com/myicon.ico

6. Copy the URL of your own icon from your server, or the free host website you uploaded it to, and insert it into the code below:

<link rel="shortcut icon" href="/favicon.ico">

7. Log in to the dashboard of your website, wordpress or blogger blog. Go to the LAYOUT section and click on EDIT HTML. Remember to back up your website or blog.

8. In the html code , locate the HEAD section (located between the codes <h>  </h> tags). Paste the code you set up in Step 6 above anywhere within the head section.

9. SAVE your changes and VIEW YOUR BLOG OR WEBSITE.

That’s it! You have now branded your icon as a favicon in the web browser.

Comment On This Article. »