Be more awesome with a new favicon

UPDATE: Due to the positive response that this post has recieved in the first few minutes, Liferay.com and the Liferay portal will be adopting the new favicon I created in this tutorial.

In a continuing effort (read: plead) to see your websites looking awesome, today I would like to show you how to make and update the favicon of your website.

A little background; a favicon is the small, 16x16px picture appearing next to your site's URL or site bookmark. Much like the icons on your desktop, these little icons provide an instant visual connection to your website for your visitors. A favicon should be visually appealing, it should conform to your branding, and it should fit the overall website design. Whenever anyone sees your favicon - in their address bar, or in another tab, or in the bookmarks menu - there will be immediate user recognition, so you really want to make a great impression that really stands out.

Now, I'm willing to bet many of you haven't put a whole lot of effort into your favicon, and, for one reason or another, you're still using the default Liferay favicon. Please raise your hand if the browser looks something like this when you visit your website:

You can put your hand down, Liferay.com; we're actually going to update your icon in this tutorial. Since I'm running a local copy of Liferay, as we all do, I've deployed and selected the Tuxedo theme which uses the default Liferay favicon.

Updating this favicon will be quick and easy, and I'll need just one tool, the free Windows icon editor, IcoFX.

As you saw earlier, I'm using the Liferay company logo as the favicon, but I'm not terribly thrilled with the current implementation, so I'm going to try something new. To do this I will open IcoFX and then drag a new picture of our company logo from my computer right into the IcoFX window.

Right away I'll be prompted to choose the color depth and size of my icon. Favicons are 16x16, and all modern browsers support their 32-bit alpha-transparent super-sickliciousness.

Almost there; all I need to do from here is save the file to the Tuxedo theme's images directory. I'll navigate to the webapps folder in my local copy of Liferay and then to the \tuxedo-theme\images\ directory. There I'll save and overwrite the existing liferay.ico file.

And that's it! Now I can refresh the page and see my change. Let's see a before and after:

]

I think that looks a lot better, what do you think?

Jonathan

[Aaron Delani]

Booyah! First Comment!

[Aaron Delani]

But really, this is a really minute but important theme change to have your company's symbol identified on near the title-bar, and also with bookmarks.

The relevant thing to note is that we have all those buttons to del.icio.us, digg, furl, and so on right underneath this post, and I'm able to identify over half of them without reading the text. It really is an effective way of spreading company branding.