What is a favicon and how to use it

  »   Miscellaneous  »   What is a favicon and how to use it

Favicon is the shortcut from the Favorites icon.

It is a small logo found in front of the visited URL, it can be seen in Address Bar, and is used to promote a company or a trademark. On the other hand, it is useful for the user so that e can quickly locate the URL he wants to click in his bookmarked sites.

favicon example

How to add afavicon to my site

A favicon must have the following characteristics.

  • name - The default name is favicon.ico
  • size - 16×16, 32×32, 48×48, 64×64 or 128×128 pixels
  • color - 8 bites, 24 bites or 32 bites

Here's the script needed to get a favicon in the address bar

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

This script will not be functional if you do not upload the image and change the icon locations. It is recommended that this location is the root site.

This file is displayed by browsers like Mozilla, Firefox, Opera, but not Internet Explorer.

To make a favicon you can use a program such as Adobe Photoshop. Also, you can choose one of the online tools here.

You can check online if favicon file and if the way it was inserted in the page are correct. Click Here.

Favicon - Suported file types

Today favicon has full support to all browser and the support also extended to various other file type formats. Depending on the favicon format you will have to change the type attribute.

  • For PNG you nead to use image/png.
  • For GIF you nead to use image/gif.
  • For JPEG you nead to use image/gif.
  • For ICO you nead to use image/x-icon.
  • For SVG you nead to use image/svg+xml.

Animated favicon

You may also use another version of favicon like an animated one. To do this we will insert the following code:

html<link rel="icon" href="favicon.gif" type="image/gif">

You can generate a animated favicon by transforming an image to FavIcon from Pics.

Favicon compatibility

PlatformNameRel valueFavicon size
Google TVfavicon.pngicon96×96
Opera Coastfavicon-coast.pngicon228×228
Ipad Retina, iOS 7 or laterapple-touch-icon-152×152-precomposed.pngapple-touch-icon-precomposed152×152
Ipad Retina, iOS 6 or laterapple-touch-icon-144×144-precomposed.pngapple-touch-icon-precomposed144×144
Ipad Min, first generation iOS 7 or laterapple-touch-icon-76×76-precomposed.pngapple-touch-icon-precomposed76×76
Ipad Mini,first generation iOS 6 or previousapple-touch-icon-72×72-precomposed.pngapple-touch-icon-precomposed72×72
Iphone Retina, iOS 7 or laterapple-touch-icon-120×120-precomposed.pngapple-touch-icon-precomposed120×120
Iphone Retina, iOS 6 or previousapple-touch-icon-114×114-precomposed.pngapple-touch-icon-precomposed114×114

Here is how you can implemetn it into you site code.

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

<!-- wideley used favicon -->
<link rel="icon" href="/favicon.png" sizes="32x32" type="image/png">
 
<!-- for apple mobile devices -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="152x152">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="120x120">
 
<!-- google tv favicon -->
<link rel="icon" href="/favicon-googletv.png" sizes="96x96" type="image/png">