The humble favicon – a simple square of 16 pixels – is one of the easiest ways to identify a website. A website without a favicon looks like Penn without Teller and Cheech without Chong – something just feels amiss.
Let’s take a look at how to create a favicon for your own website:
What is a Favicon?
Favicon stands for ‘Favorites Icon’. Favicons were originally developed by Microsoft in Internet Explorer 5 to provide an easy pictographic way to identify websites in a favorites list. This practice was later adopted by other browsers and has now become a web standard. Favicons are especially useful in this age of multi-tab browsers. They also provide a way for websites to extend their brand image to the browser window itself.
Learn how to create gorgeous icons for iPhone with this course!
Favicons were originally 16 x 16 pixel icons (*.ico) that were placed to the left of a website’s title in a browser window. Go ahead and visit your favorite website right now. The little icon you see right next to the website name is the favicon.
Recent changes in how we access the internet – through smartphones, tablets and computers with high resolution retina displays – have changed the favicon as well. Favicons today might be much larger than 16 x 16 pixels to accommodate the demands of different screens. A pinned page in Internet Explorer, for example, has a 24 x 24 pixel favicon, while the favicon used in the Chrome Web Store is 128 x 128 pixels.
Below, we’ll take a look at how to create and implement a favicon for different screens.
Creating a Favicon
The favicon is usually a condensed version of the company’s logo. Condensing a full-resolution logo into a 16px icon will render the resultant image pretty much unusable. Therefore, it is recommended that you create a more simplified, smaller logo to use as the icon. If you’re struggling with your company logo, you will find this course on how to design a logo for beginners a good place to start.
While 16px is the standard size for web browser favicons, you will also need the following sizes for different screens:
- 16 x 16px: Used in most browsers.
- 24 x 24px: Used in pinned sites in IE9.
- 32 x 32px: Used for taskbar buttons in Windows 7 and 8. Also used in high-resolution retina displays.
- 54 x 54px: Used on iPad Mini home screen.
- 57 x 57px: Used on iPod Touch home screen.
- 72 x 72px: Size of iPad screen icon.
- 114 x 114px: Used on iPhone 4 and subsequent generations.
- 128 x 128px: Icon used in Chrome web store.
As a rule of the thumb, when designing for retina displays, double the size of the favicon. High resolution retina iPads, for instance, use a 144 x 144px icon. If all this sounds Greek to you, try taking this free Photoshop Tools crash course on Udemy.
To create your favicon, start with the largest icon size in the above list (in this case, a 128 x 128px icon for the Chrome web store). This will serve as the base which we can later modify for all other favicon sizes. You might also want to simplify the image file further for the smallest size – 16 x 16px. For best performance, ensure that the background is transparent (which means you can’t use JPG files).
Using the Right Favicon File Format
The original favicon implementation supported only .ico files. However, virtually all modern browsers support the popular image formats – .png, .jpg, and .gif – as the favicon. Each format has its advantages and disadvantages:
- JPG: Smooth color blending looks good at high resolution, but doesn’t translate well at small sizes. Does not support transparency either. Not recommended for favicon us.
- GIF: Limited by color but small in file size. Again, not recommended for favicon use.
- PNG: Crisp, high quality images that translate well at both small and large sizes. However, PNG files are not supported by Internet Explorer.
- ICO: Widely supported by most browsers; supports multiple resolutions. Doesn’t need any additional code to work with Internet Explorer, Chrome. Recommended format for icons.
You might have to use a free tool like Iconifier to convert your JPG/GIF/PNG images to ICO format. This tool will also automatically create different resolution icons for different screens.
Once you’ve converted the image, save it as ‘favicon.ico’
Implementing the Favicon in Your Website
Now that you have a finished icon, it’s time to implement it on your website.
A web browser will usually look in the root directory of the website to find the favicon.ico file. Placing the icon file in the root directory, therefore, is the easiest way to implement favicons on your website.
If the browser doesn’t find a favicon.ico file in the root directory, it will search for a HTML tag in the website’s header. This tag directs the browser to the favicon’s correct location. This method also works on websites where you don’t have admin access to the root directory (such as WordPress.com and Tumblr.com).
To use this method, paste this code in between thesection of your HTML code:
Where favicon.ico points to the favicon location.
You will have to use different links for different screen sizes. The code for a 144 x 144px icon for retina iPads, for example, is as follows:
Iconifier.net will also help you automatically create the code and appropriate file sizes for different Apple devices. You can see sample code for different devices at The Icon Handbook.
Learn how to create your own iPad apps with this course!
So there you have it – your very first website favicon!
What are your favorite favicons? Share them with us in the comments below!