Because favicon love is so easy to give
If you’re running a website, did you give your favicon any love? Do you even know what a favicon is?
A favicon is simple a mini-logo (icon?) that shows up next to your URL in most address bars. (Favicons also show up on the tabs of browsers and are often included next to articles you write when being pulled by other news sites, such as this business week page about online real estate that pulled the favicons when linking to articles from Rain City Guide and Inman News). and
Here is the favicon I created for 4realz.net: 
In terms of a icon, I don’t like it as much as the 4realz logo that I generally use on my marketing materials:
but it shows up so much better when displayed at a really small size and kept the site’s color scheme. The idea is that people who know the site will quickly start to relate the favicon to 4realz.net.
Before creating a favicon for a different site (not yet launched), I decided to do a bit of research and look at the favicons for a variety of real estate sites. Here’s a peak at some of the sites I looked at:
There are some really good favicons there in that they are instantly recognizable for the website they represent, but just as many are pretty bad… and without the help of a little text, it’d be hard to know what site they represent.
So what makes for a good favicon?
A good favicon is:
- Really simple
- Limited to two or three colors
- Recognizable in place of your logo
However, as the examples form above show, using your logo is almost never a good idea.
For example, the blue/green “Z” house of the Zillow logo, just doesn’t cut it for me at the small size of a favicon. Ditto for the landscape scenes used by Altos Research and Real Central Virgina.
Something more likely to work is a cute play on the logo, such as the tomato from the Real Estate Tomato, the owl’s eyes of Roost, the explosion from Blown Mortgage, or (I like to think) the rain drop of Rain City Guide. At the same time, the “R” of Realtor is so recognizable that the realtor.com team was smart to keep their favicon that simple.
Looking through the list of favicons from above, it’s also obvious that the “home” metaphor is way overdone. Phoenix Real Estate Guy, Redfin, The Real Estate Bloggers, Move, HotPads, Estately, Altos Research, and Zillow all feature homes in their favicons…
Create your own Favicon!
So, you’re inspired to create a nice looking favicon for your site. Here’s how I created the 4realz favicon in a few minutes using nothing more powerful than Microsoft Word (or in my case, Mac’s Pages app):
Step 1: Using a document processer (Microsoft Word will work), create your image. For the 4realz logo, I create a grey circle and put a blue “4″ in the center. If you feel like you need something more complex than simple graphics and simple text, then you’re probably making your favicon too complicated!
Step 2: Take a screenshot of the image
Step 3: Upload your screenshot to Genfavicon, and follow their simple instructions in order to create an “*.ico” image. (as mentioned in a recent hotlist post!)
Step 4: Rename the file “favicon.ico”and upload it to the root file of your server.
That’s it! Once you’ve created one favicon, I think you’ll see that the entire process can be done in less than 10 minutes.
It’s worth noting that in order to have a personalized favicon, you MUST be using a self-hosted website where you can add files to the server. Folks using blog platforms like ActiveRain and Wordpress.com can’t have their own favicon.
Of course, if you have photoshop you can get way more advanced and create really killer favicons directly from the app, but if you know what you’re doing in photoshop, then you probably wouldn’t read this far!
Finally, favicons are important because they show just how much effort you put into the details. They’ll never be a big thing (they’re way too small!) and they’ll never bring success to your website, but with a little effort, it’s not hard to create a fun, recognizable icon that will help you make a better connection with your readers.






Susie Blackmon 3:12 am on November 3, 2008 Permalink |
Hmmmm, I love details. Am working on new website with Mark Davidson so will have to add this to the mix. Why do I only think of naughty favicons?
Dustin 3:27 am on November 3, 2008 Permalink |
Speaking of naughty, here’s a favicon I just created yesterday!
Jay Thompson 5:56 am on November 3, 2008 Permalink |
*Love* RCG’s rain drop.
And you’re right, the house is overdone. But I had mine first damn it! Perhaps change is in order….
Outside of the real estate space, flavors of the RSS icon are also overdone, so I’d avoid that too.
Marlow 10:21 am on November 3, 2008 Permalink |
I put a flower on mine, http://www.SeattleDreamHomes.com. My sites theme is “Martha Stewart goes into real estate.”
Mike Simonsen 12:24 pm on November 3, 2008 Permalink |
ooh. I hate to be cliche. But with a compelling name like “Altos Research” at least the logo should imply the market we work in, right?
Irina Netchaev 5:46 pm on November 3, 2008 Permalink |
I love my Favicon! A friend helped me set it up before getting these neat instructions – check it out – http://www.pasadenaviews.com
Dustin 11:01 pm on November 3, 2008 Permalink |
Irina: You’re way too cute!
Dustin 11:02 pm on November 3, 2008 Permalink |
Mike: I agree that the logo is good, but I can’t make heads or tails out of your favicon. Just a simple “A” and “R” in the right colors would probably be a bit clearer.
Dustin 11:02 pm on November 3, 2008 Permalink |
Jay: I love your house! You can keep yours. (as if I had any say over it!).
Steve Jagger 8:43 am on November 5, 2008 Permalink |
A little self promotion, but in the Ubertor platform, you can change your favicon. Plus we have most of the major real estate companies favicons already available for use.
Linsey 5:47 pm on November 5, 2008 Permalink |
I like mine I but I’m open to feedback.
Dustin 5:47 pm on November 5, 2008 Permalink |
The OC works for me!
DesignTeam 10:11 pm on November 5, 2008 Permalink |
Hi,
Would you like to see favicons near search results? There’s a firefox add-on that does the trick.
Looking forward to your comments.
Design Team
Kevin Tomlinson-Miami Beach Real Estate 2:31 pm on November 6, 2008 Permalink |
Interesting. Thank goodness I don’t have a home for a favicon.
Geordie Romer - Leavenworth Real Estate 1:07 am on November 16, 2008 Permalink |
Any thoughts from the masses about my new (draft) favicon? It’s for the soon to be redesigned Icicle Creek Real Estate site and can be seen in the attached avatar.
Dustin 1:16 am on November 16, 2008 Permalink |
My initial thought is that there’s no way the four letters will be readable at 16 pixels wide… I tried to get three letters to show up on one favicon I designed and it was really hard to find a font that was long and thick enough to work. Just a head’s up!
Tina 6:49 pm on November 16, 2008 Permalink |
OK now I have favicon envy, I’ll be adding one to my site, thanks!
Dustin 11:01 pm on November 16, 2008 Permalink |
Tina, let us know when you add one so we can come check it out!
Tom 3:17 pm on November 25, 2008 Permalink |
a favicon should never be missing. I love these colorful images in my bookmarks.
Rhonda Porter 12:08 am on December 27, 2008 Permalink |
I would love to have a favicon…I’m just not sure what to use. I’ve sadly used my big “head” shot as a logo on my blog. I do have a snazzy logo that I paid dearly to have created…but it really doesn’t suit me anymore.
You’ve got my wheels spinning again, Dustin.
Besides being cool to look at…what purpose do they have?
Dustin 3:04 am on December 27, 2008 Permalink |
Rhonda: even if it’s simple to begin with, I highly recommend getting yourself a favicon!
In terms of their purpose, it’s just an added way to identify your blog on other sites. I’m sometimes surprised to see the random places I’ll see the RCG and 4realz logos. Obviously places include the browser tabs and bookmarks, but more interesting places include google reader, various profiles on social networks and links to articles from social bookmarking sites.
Mr Williamsburg/ John Womeldorf 6:12 am on January 13, 2009 Permalink |
Dustin,
Great sessions at ICNY . Learned more in 3 days than I have in the last year.
FYI You can have a favicon in a wordpress blog.
See mine for a poor example http://williamsburgsrealestate.com/
After reading your post I am re doing it..
Thanks
Dustin 11:34 pm on January 13, 2009 Permalink |
John, I just checked out your favicon, and it’s pretty small and definitely too small to read. Even the same icon next to your comment above is a bit too small to read.
One idea would be to use a “W” or something a lot simpler for the small graphics just so that it would means something for the rest of us… I’d also probably go with white for the letter of your favicon instead of grey/gold just so that there’d be a bit more contrast between the background.
Nonetheless, thanks for sharing!