How to Create a Favicon and Why Should You Use One

What is a Favicon?

A Favicon is a small square icon associated with a website or a web page. In a browser, it is typically displayed before a web page’s address in the address bar and also before the name of the web page in the list of bookmarks, if you add it your Favorites. So “Favorites Icon” is where the name Favicon comes from. Browsers that have tabbed document interface show a page’s favicon next to the page’s title on the tab as well.

By a small square icon, I mean that a favicon is a really small icon measuring 16×16 pixels. You can also create a 32×32 pixels or 64×64 pixels icon. Creating a larger favicon is only useful if user opens up a folder that is set to display large icons. In all other cases, your Favicon will be scaled down to 16×16 pixels to be displayed in the tabs, favorites menu or the address bar.

Why Should You Use a Favicon?

At CSSJockey, making your web presence outstanding is a key point that is always on our mind. One of the ways to make your website stand out from other pages on the WWW is to use a Favicon that represents your website if it’s opened in a browser or saved in someone’s list of bookmarks. You probably know how cluttered can a person’s list of bookmarks or favorites can be. Having a graphic identity in the form of a Favicon is a great way to catch attention.

In this post, we’ll see how to create a Favicon.ICO file in 2 easy ways:

Create a Favicon.ICO using Photoshop

You can create your Favicon offline using Photoshop. This requires that you add a plugin to your Photoshop that allows it to open and save .ICO files. You can download the .ICO Format plugin for Photoshop from Telegraphics. Extract the contents of the .ZIP file and place the “ICOFormat.8BI” file into Plug-insFile Formats directory inside the Adobe Photoshop folder where it is installed.

Now we can start with a new 16 x 16 pixels canvas but since its a very small area it can be a little hard to work with. Instead, we can start with a 64 x 64 canvas (because if you plan to re-size an image later, it’s always good to use even multiples of the original dimensions.)

If you already have a logo, try scaling it down to this canvas size. It’s well and good if it holds.. and you can use it. But if it doesn’t look good and crisp, try creating a simple design that uses colors from your website’s design.

When you’re ready with your Favicon design, Select Image>Image Size menu and enter 16 x 16. NOTE: CS versions of Photoshop will have an option called “resample image” – If you’re using a CS version of Photoshop – Check the Resample Image option and choose “Bicubic Sharper” from the drop-down menu. This technique is for optimizing reduction transformation.

Save your image from the File > Save menu, enter a suitable name and select ICO (Windows Icon) .ico from the Format drop down menu.

Create a Favicon.ico from images in other formats using Online Favicon Generators

If you have your website’s logo or an image that you’d want to use as your Favicon in formats other than .ICO such as PNG, GIF, JPEG, etc. you can still Create a Favicon from those using Free Favicon Generators available online. Here are a few nifty Favicon generators that I have seen around the internet:

This is my personal favorite! When you open this website, you’re presented with a grid where you can paint each pixel of the grid using any colors from the palette provided alongside and also preview the result of your creativity LIVE just below the workarea. Besides sketching a FavIcon, you can also import an image in various formats and convert them into a favicon.ico file. You have an additional option to keep the dimensions of the image you choose, or to shrink the uploaded image to a square icon. There are also user generated favicons in two sections – “Latest Favicons” and “Top Rated Favicons” that you can view or download.

How to use your Favicon

After you’ve created your favicon, it’s time to add it to your website. You can do so by following these steps:

1. Upload the favicon.ico file to the root directory of your website. Visit http://your-website.com/favicon.ico to make sure it is present.

2. If your website is a static website with different HTML pages, insert the below code in the HEAD section of your pages:

1

<link rel="shortcut icon"type="image/x-icon"href="/favicon.ico">

If your website is based on WordPress and you’re using a theme, you’ll need to modify the above code as follows:

You can use both if you want! Clear your browser’s cache, restart the browser and visit your web page. Ideally, you should be able to see your Favicon. However, it must be noted that sometimes the Favicon doesn’t show up immediately. You should try putting a ‘?’ at the end of the URL, which will trick a browser into thinking the page is new and not cached. In some cases the favicon might not show up in Internet Explorer 7. You’d want to add

19 thoughts on “How to Create a Favicon and Why Should You Use One”

Did you try clearing your browser’s cache and then viewing the post? If you still couldn’t see the Favicon.. a good way would be to use the trick I mentioned in the post.. Append a ? to the URL of the post and try to open it.. This will trick the browser into thinking that the page is not cached and it’ll load all the resources including the favicon.. Let me know if that works for you..

Yea a favicon is a must it also helps people when the look through their bookmarks, I am triggered to them when I am searching, not one reads the full links you search for like “css tricks” or whatever.

Good post mate, enjoyed it. The Photoshop extension is the way I do it to, do you not think they should just build this into PS? seems odd to me that they haven’t

It’s usually a challenge getting our clients convinced they need an impressive favicon, but it always turns out to be a huge chunk of the design meetings. Even though they might not think it’s important initially they always get more involved once they see examples popping up in the browser.