How to create your own favicon
March 24th, 2008 by Andreas from Xavier Media® in Uncategorized. Topics: HTML & The WebI guess you've all seen that sometimes when you visit a site or bookmark a new page their icon is not the usual standard icon. Have a look at the following examples if you haven't noticed the icons before:
As you can see, www.sampleaddress.com got the boring standard icon while blog.xaviermedia.com got the Xavier Media logo as favicon.
This may seem like a kind of useless function, but this icon is actually really valuable. Since it's not only used in the address bar of the browser, but it also shows up in the bookmark list making your site standout from the rest of the bookmarks. Why would all the big sites like Google and Yahoo use it otherwise?
There are several online favicon creators that are both free and easy to use. I created the Xavier Media favicon at www.favicon.cc for example. At favicon.cc you can design the icon from scratch or upload a picture (like your company or web site logo) and the creator is free to use:
When you've designed your new favicon.ico icon you simply upload it to the root of your web site like www.sampleaddress.com/favicon.ico. You also need to add this tag of HTML code between the <HEAD></HEAD> tags to make the favicon work on all your pages:
<link rel='shortcut icon' type='image/ico' href='/favicon.ico' />
For some reason I only got this to work in Firefox and not Internet Explorer, so I had to use a favicon validator I found using Google. The validator will check if you've done everything correct setting your favicon up, and according to it I did so I have no idea why I can't see the favicon in IE 
.
About the authorAndreas co-founded Xavier Media® in 1996 and has since been involved in all kinds of development, marketing and making money online.
You may also be interested in...
I.O.U – I Owe You
Create Your Own Postage Stamps and PhotoStamps.com
AboutUs.org new features
