Make Big Money Online Top

Standing Out with Favicons

Written by Ryan Ambrose  · June 5, 2008

Have you ever seen a site with a favicon? It’s that tiny little image to the left of the URL that also appears in your favorites list if you bookmark it. It doesn’t seem like all that much, but it could be useful to you. How? It could help your site stand out in the crowd, and on the Internet, with its millions upon millions of sites, standing out is an absolute must.

Plus, it makes you look good, and you’ve probably noticed that effect for yourself. You might have landed on a site with a favicon, looked up in the URL, saw the neat little picture, and suddenly had a much higher opinion of it. I personally love them, and take sites that have them more seriously just because of one nifty little image.

That’s why I added some of my own to both of my current web sites. I’ll grant that they’re not much more than colorful monograms, but they still do the job nicely. They’re not hard to install either, and you could even make your own.

So, how do you install a favicon on your web site?

1.) First, you make it, and you can do that at

RealWorld Graphics – Online Icon Maker

This site will also let you upload an image and change it into a 16×16 pixel favicon. I preferred that method, because punching them out by hand didn’t work as well as a picture conversion. Just remember that when you make your soon-to-be converted image, you’ll be reducing it to a tiny icon, and you’re going to lose a lot of detail.

2.) Name your image ‘favicon.ico’. The maker at the web site I gave you will do that, and save it to your computer besides.

3.) Once you get your desired favicon, put it in the root directory of your web site, and these tags just below the HEAD command in your HTML.


<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico" />
<link rel="icon" href="http://www.yoursite.com/favicon.ico" />

Don’t copy and paste these, but type them into your site’s HTML file with your site’s name instead. They’re formatted to display properly in HTML, and not to be put in a text file.

Putting both LINK commands covers multiple browser types.

4.) Make sure your favicon looks the way you want, and that it appears. IE7 gave me some trouble with updating the images if I downloaded new ones, but Firefox was more cooperative.

I put mine up recently, and I suspect they’ll require some optimization just like everything else. Still, I like the way they turned out, and recommend you adding your own.

Seriously, how do you make a beautiful, sellable ebook? Find your answers today with The Ebook Walkthrough!

My name is Ryan Ambrose, and I’m one of the co-authors of Can I Make Big Money Online.



AddThis Social Bookmark Button


Comments

11 Responses to “Standing Out with Favicons”

  1. George Manty on June 6th, 2008 9:07 am

    Ryan,

    I agree with you. When I see a fav icon on a website I automaticaly think of the site as more professional. While not having a fav icon doesn’t lower my opinion of a site, having a favicon makes me think better of it.

  2. One Year Millionaire on June 8th, 2008 5:14 pm

    favicon is a very easy thing to implement on your website… and it costs nothing…

  3. Web Hoster on June 9th, 2008 12:41 am

    Does your fav icon effect your SEO positioning at all? Im guessing it doesnt but maybe they will think more favorably of your site if you have it….sort of like ‘oh if they spent the time to add a fav icon it must be a valuable site.’

  4. Ryan Ambrose on June 10th, 2008 7:45 am

    I don’t think the icon has any effect on SEO.

    In technical terms, it’s just a 16×16 pixel image and a LINK tag between the HEAD and /HEAD tags of your web page. It’s strictly for the consumption of real people, which is just fine. It’s the real people that give you sales, opt-ins, and referrals, and SEO is just for getting free search engine traffic.

  5. Rt on June 10th, 2008 9:15 am

    I think Fav icon is as important as your website logos , by that small tiny image visitors will remember your site little long, I believe it will help in seo.

  6. Takeoffzone on June 10th, 2008 6:49 pm

    I have been using a favicon on my main site almost since I published it 6 years ago. I never put those lines of HTML code within the head tag like you say one should, but that doesn’t seem to be affecting the icon been correctly displayed on neither Firefox nor IE. – Javier.

  7. Melvin on June 11th, 2008 4:00 am

    this is done because of branding… and i think using it makes you diffrent from others

  8. Ryan on June 11th, 2008 7:18 am

    Odd it worked that way for you Javier. Maybe the browsers just recognize the ‘favicon.ico’ file without help now. The way I learned it involved the tags, but if it works just fine for you, I suppose it’s ok.

  9. Ben Callis on June 11th, 2008 4:53 pm

    Thanks for the article I have always been making them by hand working on a nice 16×16 work area, which isn’t ideal.

    They really do make you site stand out when browsing through bookmarks. Like Takeoffzone I have never bothered using tags and it appears to be fine in all browsers in safari.

  10. SJL Web Design on October 7th, 2008 9:36 am

    You can create them in photoshop using a .ico plugin and a 16×16px canvas. I use them on all of my sites as they look really professional.

  11. Milton Keynes on February 23rd, 2009 4:14 am

    I regularly use the .ico plugin available on the web to create favicons in no time. I would definitely recommend that you check it out.





   _________________________________________________




Bottom