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.
Leave a Reply