Be more awesome with a new favicon

UPDATE: Due to the positive response that this post has recieved in the first few minutes, 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,; 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?


Write a blog post too!

Write a deep dive into how you use Liferay projects in your technology stack. Or let people know useful tips and tricks for a particular functionality. The Liferay community needs you!

Login or Create an account