HTML Favicon Code

A favicon is a small image file that contains one or more icons that can be used to represent a website, blog, or even a single web page.

Favicons typically appear in places such as the browser's tab, address bar, browser history, bookmarks bar, etc. Favicons are a great way to distinguish your site from others — especially when users have many tabs open or they're searching through their browser history or bookmarks bar. Favicons assist in the visibility of your brand, as users will learn to associate the favicon's colors, fonts, etc with your brand as they use your website.

If you don't have a favicon for your website, users will usually just see a generic web page icon.

Adding a Favicon to your Website

First you need to upload a favicon to your server. You can call it anything and place it anywhere, but, if you call it favicon.ico and place it in the website's root directory, most browsers will automatically display it. Having said that, you can also add some HTML code to your website to ensure that browsers know which favicon to use.

Here's an example of the code you can use. Place it inside the <head> element (replace the image location with the location of the image to be used):


<link rel="shortcut icon" href="http://example.com/favicon.ico" />

Note that if you use this code, you can name the favicon anything you like.

Also, although this example uses the .ico extension, you could use other image formats, such as .png. .gif, .jpeg, and even animated GIFs. However, the .ico format has had wide acceptance from browsers for quite some time and is a common format when using favicons.

Favicons can be 16x16, 32x32, 48x48, or 64x64 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth.

Apple iOS Home Screen Icons

Apple devices with the iOS operating system version 1.1.3 or later (such as the iPod Touch, iPhone, and iPad) support the ability for you to provide a custom icon to be displayed on users' Home screen when they use the Web Clip feature (called Add to Home Screen within Mobile Safari).

Some Android devices also support this feature.

To provide an icon for this purpose, upload the icon to the server, then add the following code with the HTML of the website, inside the <head> element (replace the image location with the location of the image to be used).


<link rel="apple-touch-icon" href="http://example.com/images/apple-touch-icon.png" />

iOS will add rounded corners and a reflective shine to your iOS home screen icon.

If you prefer it without the reflective shine, use the following code:


<link rel="apple-touch-icon-precomposed" href="http://example.com/images/apple-touch-icon.png" />