« Back

Be more awesome with a new favicon

Company Blogs July 31, 2009 By Jonathan Neal

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.

various favicons

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:

the default liferay favicon

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.

localhost with 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.

the drag and drop

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.

the options

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:

localhost with the default liferay faviconlocalhost with the new liferay favicon]

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


Threaded Replies Author Date
Booyah! First Comment! Aaron Delani July 31, 2009 4:49 PM
But really, this is a really minute but... Aaron Delani July 31, 2009 4:55 PM
Instead of coming up with a new ico it might be... Tom Thomas February 24, 2011 7:45 AM
Sorry Aaron, didn't mean to reply to you, but... Tom Thomas February 24, 2011 7:47 AM

Aaron Delani
Booyah! First Comment!
Posted on 7/31/09 4:49 PM.
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.
Posted on 7/31/09 4:55 PM.
Instead of coming up with a new ico it might be more productive for the staff to address issues regarding a user trying to install their own icon. The instructions in the following link may or maynot work:

Other­ search results on "favicon" turned up numerous incidents of problems when trying to change the default icon.
Posted on 2/24/11 7:45 AM in reply to Aaron Delani.
Sorry Aaron, didn't mean to reply to you, but the Wiki author.
Posted on 2/24/11 7:47 AM in reply to Aaron Delani.