Home : Blogs : Agent Web Design : Realtor Web Design 101 - Tips for a site that works

Adding Favicons - The little image next to your URL in the browser

This is a fun one. All you branders out there will enjoy learning how to put that little icon next to your URL in the address bar of your browser.

Favicon Explained

Here are some examples:

The image is called an icon image. The file is a .ico image which is created from a bitmap image.

We need to create the image. Go to your image editor (Photoshop, Paintshop, Fireworks, etc.) and open up a copy of the logo you want on your site. Shrink it down to 16x16. This means the pictures dimensions are only 16 pixels wide by 16 pixels high. You may have to play with your editor to make the image look clear and not blury.
Save the image as a bitmap file (if your image editor will save the image as a .ico image then do that instead and skip step 3). The file extension will be .bmp.
Now we need to convert the image into an .ico image. I don't have a specific program to recommend but I did go to http://www.download.com/ and searched for "ico". I downloaded QTam Bitmap to Icon 3.5 just to try it and it worked great for me (little disclaimer here - I take NO responsibility for this 3rd party software). Step through the options of the conversion software to convert your bitmap into a .ico file. Be sure to select 16x16 if you are given options for file dimensions. Save the file as favicon.ico.
Move the new .ico file (favicon.ico) to your server in the images directory (or where ever you store your images).
Add the following html to your header tags: <LINK REL="shortcut icon" HREF="http://www.yoursite.com/images/favicon.ico"> You'll need to adjust the HREF= url to point to the right file on your server.

Here is a simplified view of what your html might look like:

<html>

<head>
<title>Favicon Explained</title>
<META NAME="description" CONTENT="Favicon Explained.....">
<META NAME="keywords" CONTENT="favicon explained, favicon conversion......">
<LINK REL="shortcut icon" HREF="http://www.mycoolsite.com/images/favicon.ico">
</head>

<body>
...etc. etc. ...

Alrighty. That'll do it. Have fun with it.

Find other ways to personalize your site.

Posted by Agent Web Design on 03/22/2007 04:36 PM

Comments (42)

agent web design personalize

42 Comments on Adding Favicons - The little image next to your URL in the browser

MAR

2007

I love the idea, but I am not certain that I have the capabilities to actually do it. :)

Theresa: I understand the concern. It is a little more advanced than some other updates. You may need to contact your web guy. If you can create the image it shouldn't take your web guy too long to add the image to the server and then add the html or provide it to you so you can do the updates yourself. A lot of that depends on how your site is designed.

I gave it my best shot. I will try again when I have more time.

Thanks,

Fran

Fran: Where did you get hung up? I hope I haven't left out a step.

I really like this idea. I'm bookmarking this one so I can try it tomorrow. Thanks for the idea and directions!

APR

2007

AWD,

Thanks, I've bookmarked this too. Wondered what that was called.

APR

2007

Definately going give that a shot! Not sure what I want though.

Where do I go for ideas?

APR

2007

Troy: what is your web site's logo? That is where I would start. Who is your broker? Usin their logo is also an idea (of course that means you are marketing them and not you). Use something that gets across your image.

MAY

2007

Hey, this is great info, could someone point me into the right direction or look at my code to see what I am doing wrong? I am using Frontpage, here is my code.

<head>
<title>Welcome to JanicePearsonRealtor.com</title>
<meta name="description" content="King George VA Real Estate, Let me help you find or sell your home.">
<meta name="author" content="JanicePearsonRealtor.com">
<meta name="publisher" content="JanicePearsonRealtor.com">
<meta name="copyright" content="Copyright 2002-2006 JanicePearsonRealtor.com, All Rights Reserved">
<meta name="rating" content="All">
<meta name="audience" content="All">
<meta name="robots" content="index,follow">
<LINK rel="shortcut icon" HREF="http://www.janicepearsonrealtor.com/favicon.ico">
<link href="http://templates.agentedit.com/sti/1/05312075241569/remax/images/rl_style.css" rel="stylesheet" type="text/css">

</head>

Also, is there a different way to do this for Internet Explorer 7 to show it?

Thanks, please feel free to email me.

Chris: The html looks good to me. I can only think of a couple of things:

Is favicon.ico in the root? should the href be http://www.janicepearsonrealtor.com/images/favicon.ico or something?
Is the .ico file correctly formatted? is it named .ico or did you happen to leave it as a .jpg or .gif?
Does your server have any issues w/ .ico files?
Are you able to see .ico files from other sites?

Good luck with it...

MAY

2007

This is a really cool idea. I will try and add it to my sites. thanks.

MAY

2007

Hello! I've seen favicons on other websites and I wondered how to do it. Thank you for the tutorial--I bookmarked it to try when I have more time. Definitely a good post!

MAY

2007

I like that info - thanks. Bookmarked to review when I'm ready.

MAY

2007

I always wondered how to do this... I now need to make one for www.LifeAtSonoma.com!

MAY

2007

Steve: Hope it goes well.

Yolanda: Good luck.

Teri: Good luck.

Jason: Let us know how it turns out.

In the past I have noticed that Fav Icons can be kinda buggy in IE. Have you had the same result? Firefox always shows up fine. But IE is hit and miss.

MAY

2007

Thanks for the direction

Ken

MAY

2007

Brad: I have noticed the same thing. Usually the first time you visit a site the icon doesn't appear but when you go back it does. I have noticed better results in the later versions of IE. Firefox seems to grab them fine. Seems like an IE bug.

Ken: Yep, yep.

JUL

2007

AWD, thanks.

I wondered what is it and how to do it, now I know what it is and give it a try soon. thanks for sharing.

Thanks for the cool tip... I'll have to try it. Always wondered about those icons or "Favicons"

JUL

2007

Hemang: Yep. Good luck with it.

Brian: Good luck with it.

JUL

2007

Thanks, I was wondering how to get that on there, however -- I can't do it now, will bookmark. I have so many other things to learn and do, this I will add to the list. Thanks again, great tip.

The fact is that the Icon shows up only on Internet Explorer browser... any tips to make it work on all other browsers?

AUG

2007

www.RealEstateSticker.com has a great selection of favicons. Free help setting it up also. Nice people.

AUG

2007

Rosemary: Let me know how it goes.

Arina: It is a browser specific thing. It works in Firefox just fine. Sometimes it doesn't show up initially and you have to revisit the site. Browsers are tricky.

Melissa: Hmmm...do you work for them? J/K. The icons are cool. Didn't see the help.

AUG

2007

Interesting detail..i'll have to try it myself.

Very cool. Thanks for the step by step.

NOV

2007

Thanks for this one! Works fine in Internet Explorer, Firefox and Opera but I haven't tried it in Nutscrape.... I dont want Nutscrape users viewing my website anyway ;o)

Seriously though, that tutorial is as simple as it gets - kudos!!

Ben

DEC

2007

very, very cool...just joined the group and I'm looking forward to future tips!

I tried this some time ago, but your directions seem simple.... I'll have to try it again. Thanks.

FEB

2008

Very cool idea!

Just a FYI regarding www.realestatesticker.com I placed an order with them 3 1/2 months ago, was charged and have received nothing, no response to 35 emails, and the phone number is not a working number. Learn from me, stay away and save your money!

MAR

2008

I was wondering how to do this! Thanks for the explanation!

I love this one! I hope to try it out soon. Thank you!

MAR

2008

I really like this idea and concept. I have tried several times with sites that I have up. Hopefully the support from this blog will get the job done this time!

MAR

2008

This is a great tutorial, I use this on all my sites now, and it definitely helps (however small it can) with SEO.

www.vapropertiesinc.com

JUN

2008

We created the favicon fairly easily, but wanted something better, so we tried to create an animated favicon. It actually worked - you can see the result here http://www.cathetel.com/gif/angel2.gif but only Firefox showed it as an animated favicon. Explorer got confused and deleted it, so we had to go back to the static favicon here http://www.cathetel.com/gif/angel.gif Oh, well, we're waiting for Explorer to enter the 21st century.

JUL

2008

Hi Janice, try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Fredericksburg, Spotsylvania, and King George, Real Estate - Janice Pearson</title>
<meta name="description" content="Fredericksburg, real estate and homes for sale in Spotsylvania and King George. Your Fredericksburg real estate resource center, find MLS listings, condos and homes for sale in Fredericksburg " />
<meta name="keywords" content="Fredericksburg real estate, Fredericksburg real estate, Spotsylvania homes for sale, Spotsylvania real estate listings, King George real estate agent, homes for sale in King George, Janice Pearson" />
<meta name="robots" content="index, follow" />
<meta http-equiv="classification" content="real estate" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="Your name" />
<meta name="distribution" content="global" />
<meta name="rating" content="safe for kids" />
<meta name="subject" content="real estate" />
<meta name="geo placename" content="Florida" />
<meta name="geo region" content="US-FL" />
<meta name="state" content="FL" />
<base href="http://www.yoursite.com" />
<link rel="shortcut icon" href="http://yoursite.com/favicon.ico" />

</head>

There are some really nice real estate favicons at www.RealEstateSticker.com All you do is upload it to your site, its really easy.

change Florida to your state. :)

JUL

2008

Hi! I just created my Favicon - thank you!!

However, once I created it with the Favicon Generator...I got stuck. Unfortunately, I don't know what a "root directory" is, nor do I know how to find my index page. Can you help?? I just want to add it to AR.

Thanks in advance! =)
~Maura Gebhardt

MAR

well, I had my graphics people create my logo in bmp. I need to contact my web IT to figure out where to put the HTML code

MAR

Very cool idea - thanks for the info.

JUL

Thanks for your informations.

Real Estate

Leave a response…

Name:

Email:
(optional)

Comment:

What does the graphic say?