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

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

By
Services for Real Estate Pros with Specialists Real Estate

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: Favicon Example: Google Favicon Example: Yahoo Favicon Example: MSN Favicon Example: AOL Favicon Example: MSNBC Favicon Example: las vegas real estate 

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

  1. 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.
  2. 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.
  3. 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.
  4. Move the new .ico file (favicon.ico) to your server in the images directory (or where ever you store your images).
  5. 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.

Comments (44)
Subscribe to CommentsComment

Submit
Show All Comments
Agent Web Design
Specialists Real Estate - Las Vegas, NV

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 15, 2007 05:02 AM
Tracy Santrock
Fonville Morisey/Santrock Realty Group, Inc. - Cary, NC
Raleigh - Cary Realtor/Broker In Charge
Interesting detail..i'll have to try it myself.
Aug 17, 2007 05:27 AM
Seth Callen
Farmers Insurance - Lawton, OK
Very cool.  Thanks for the step by step. 
Aug 17, 2007 06:25 AM
Anonymous
Ben Lawton

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

Nov 28, 2007 01:37 AM
#28
GA-agent.com Georgia Real Estate Directory
GA-agent.com - Canton, GA
very, very cool...just joined the group and I'm looking forward to future tips!
Nov 30, 2007 05:29 PM
Dawn Thompson
Freedom Realty of Texas - College Station, TX
I tried this some time ago, but your directions seem simple.... I'll have to try it again.   Thanks.
Nov 30, 2007 05:59 PM
Lisa Howell
Century 21 Landmark Realty Group - Elkhart, IN

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!

Feb 20, 2008 06:28 AM
Tina Merritt
Nest Realty - Blacksburg, VA
Virginia Real Estate
I was wondering how to do this!  Thanks for the explanation!
Mar 07, 2008 04:20 PM
Stephanie Ballou
Keller Williams Coastal Realty - Dover, NH
I love this one! I hope to try it out soon. Thank you!
Mar 08, 2008 01:29 AM
Bill Somerset
Re/Max Realty Group - Dover, NH
ABR, e-PRO - Realtor - NH Real Estate Agent

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 12, 2008 01:04 AM
Anonymous
Chris Satterwhite

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

Mar 28, 2008 07:23 AM
#35
Anonymous
Malliobiana

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.

Jun 19, 2008 05:22 AM
#36
Anonymous
Amy Wong, REALTOR

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" />

<script type="text/javascript"></script>
<style type="text/css" media="all">@import url("/common/css/main.css");</style>
<style type="text/css" media="all">@import url("http://images.z57websites.com/realestate/ae/css/openhouse.css");</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" src="http://images.z57websites.com/realestate/ae/js/script.js" type="text/javascript"></script>
<script language="JavaScript" src="/common/scripts/custom.js" type="text/javascript"></script>

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

 

Jul 02, 2008 06:11 AM
#37
Anonymous
Amy

change Florida to your state. :)

Jul 02, 2008 06:12 AM
#38
Maura Neill
RE/MAX Around Atlanta - Alpharetta, GA
North Metro Atlanta Real Estate

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

Jul 11, 2008 07:50 AM
Jim Cheney
Saint Francis Property Santa Rosa, CA - Santa Rosa, CA
Rincon Valley Realtor 707.494.1055

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 11, 2009 04:14 PM
Todd Kevitch
InterContinental Capital Group - Boca Raton, FL
Mortgage Loan Officer - I get deals done!

Very cool idea - thanks for the info.

Mar 25, 2009 03:32 PM
Anonymous
Invest in Real Estate

Thanks for your informations.

 

Real Estate

Jul 31, 2009 01:24 AM
#42
Sally Lawrence
Advantage Real Estate - Tehachapi, CA
Broker, CHS, e-Pro, SFR, REALTOR®

Just stumbled accross this post -- yet another gret tip from AR!  Thanks!

Dec 28, 2009 08:36 AM
Anonymous
Andrew King

Thanks for posting!! I've been trying to get rid of that broken page symbol at the top of the title forever!!

 

Finally it's gone and replaced with a sweet icon!

 

Thanks man!

Mar 29, 2011 11:33 AM
#44
Back to Top
Rainer
18,996

AgentWeb Design

Profile
Blog
smartphone(702) 376-5590
Contact The Author

Real Estate Resources

Recent Posts

View more Recent Posts   arrow_forwards

Additional Information

Every real estate agent wants to have a great web site to promote their business. Here are some tips on how to make it SHINE!

What's the reason you're reporting this blog entry?

Are you sure you want to report this blog entry as spam?