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:

  1. Really simple
  2. Limited to two or three colors
  3. 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.

23 responses

  1. 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?

  2. Speaking of naughty, here’s a favicon I just created yesterday! 🙂

  3. *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.

  4. I put a flower on mine, http://www.SeattleDreamHomes.com. My sites theme is “Martha Stewart goes into real estate.”

  5. 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?

  6. I love my Favicon! A friend helped me set it up before getting these neat instructions – check it out – http://www.pasadenaviews.com

    🙂

  7. Irina: You’re way too cute! 😉

  8. 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. 🙂

  9. Jay: I love your house! You can keep yours. (as if I had any say over it!). 😉

  10. 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. 🙂

  11. I like mine I but I’m open to feedback.

  12. The OC works for me! 😉

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

  14. Interesting. Thank goodness I don’t have a home for a favicon.

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

  16. 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!

  17. OK now I have favicon envy, I’ll be adding one to my site, thanks!

  18. Tina, let us know when you add one so we can come check it out!

  19. a favicon should never be missing. I love these colorful images in my bookmarks.

  20. 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?

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

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

  23. 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!

Leave a Reply