Three Must-Have Icons for Better Branding

I am going out on a limb here, but my guess is that most bloggers are not taking advantage of Gravatars. Most of the sites that I visit do, however, take full advantage of the opportunity to sport a favicon. Understandably, favicons have been around for much longer than Gravatars and therefore are much more prevalent.

Still, I can’t help but wonder why more people aren’t taking advantage of the free personalized avatar service provided by gravatar.com. For every Gravatar-enabled site there are many opportunities to build brand recognition. And there are many Gravatar-enabled sites from which to choose.

Get social on social media!

Just as favicons are excellent tools for transforming a user’s browser into a fully branded web portal for your site, so are gravatars, favatars, and other avatars incredibly useful marketing tools for your blog. If you need to further develop a strong sense of name-recognition and brand-awareness, take a few moments to implement and customize these three “must-have” branding tools:

Favicons

As mentioned, a vast majority of sites now feature customized favicons. So prevalent are favicons among today’s Web, that those sites still without a favicon look overwhelmingly poor. Favicons are used everywhere — toolbars, tabs, bookmarks, address fields, folders, files — favicons are even used on Favatar-enabled blogs when you leave a comment. Have you ever tried to bookmark a site that didn’t have a favicon? Pretty sad. We’re talking mission critical here, people! Of course, if you need help creating or implementing them, here is everything you ever wanted to know about favicons.

Gravatars

Obviously, leaving good comments on other people’s blogs is a great way to increase brand-awareness and expand your network. It’s been this way for years — comments are the lifeblood of the blogosphere. Since the advent of Gravatars (globally recognized avatars), many sites automatically display personalized icons for every comment. Unfortunately, not everyone uses gravatars, so oftentimes Gravatar-enabled comments are disturbingly vacant. Instead of being another “faceless” void, get a Gravatar and brand the entire comment section for yourself. Dropping even a single comment on one of these Gravatar-enabled sites serves many impressions of your brand to a target audience. Now multiply the effect by an increasing number of Gravatar-enabled comments and the results are clear: free mass-marketing of your blog or business to the niche-specific audience of your choice. I am continually surprised by the number of people who aren’t using gravatars, especially when registering your own Gravatar is completely free and easy.

iPhone/iPod-Touch Webclips Favicon

Relatively new to the icon-branding scene is the uber-cool iPhone/iPod-Touch webclips icon. While not critical to everyone, sporting a solid webclips favicon is essential to penetrate and influence the financially lucrative Apple market. As the iPhone becomes increasingly popular, its new capacity to display customized site icons instead of default screenshots provides enormous branding potential for your blog or site. Upon bookmarking your webclips-enabled site on their iPhone or iPod Touch, Apple freaks fans will appreciate the savviness of your carefully crafted 57×57-pixel icon, dutifully displayed in all of its high-gloss glory. Sure, only the chosen ones actually have an iPhone, but you definitely don’t want to be the only icon on the screen that isn’t customized. In fact, I wouldn’t be surprised if some users didn’t outright refuse to even bookmark such non-customized icons. Fortunately, implementing your own custom webclip icon is dead simple. Here are two easy ways to deliver the goods:

Method 1

First, make a complete backup of your entire site. Just kidding. Simply name your 57×57-pixel icon “apple-touch-icon.png” and upload it to the root of your domain. For example:

http://rockstar-domain.com/apple-touch-icon.png

..and that’s all there is to it. iPhones will now automatically detect your custom icon and display it as the webclips icon for your site. Sweet :)

Method 2

Alternately, after creating your custom icon, name it anything, upload it to any directory, and link to it in the <head> section of your web pages. For example, to link to your icon named “mullet.jpg” located in a subdirectory called “icons”, you would use the following code to make it go:

<link rel="apple-touch-icon" href="http://rockstar-domain.com/icons/mullet.jpg" />

The key here, of course, is inclusion of the requisite code, “rel="apple-touch-icon"”, along with an accurate path/filename declaration. This method is great if you need to customize the deliver of your customized Apple webclips icon :) If you are privileged enough to possess your own iPhone, drop the code and dial it in.. oooh, it’s so glossy!

Let’s get outta here!

..and that’s a wrap. The take-home message of this article is that you should be taking advantage of these three free icon branding opportunities. Effectively designed, synchronized, and delivered, these free graphical marketing opportunities will help further develop your name-recognition/brand-marketing strategy. Regardless of which icons you decide to use — favicons, favatars, gravatars, avatars, webclips — icons play an important role in building your online empire.

About the Author

Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.