Favicon - have the icon of your site in the address bar

December 2016

Certain websites have an icon to the left of the URL in the address bar of the internet browser. There are several methods available to create a favicon or an icon for a website that can be displayed in the address bar. Drawing software such as Gimp, Pixia or specialized software such as IconEdit32 or IconWare can be used to create a favicon. There are websites that can be used to transform an image favicon. Some websites allow webmasters to generate an ICO file and animate the favicon. The Link tag is used to indicate the path of the favicon and put it online so that visitors to the website can see the icon in the address bar.


You have probably noticed the presence of an icon to the left of the URL in the address bar of your browser when accessing certain websites?

To implement this type of icon on your own website follow the steps below.

Creating a favicon


There are several methods:

For most browsers:


The first step is to create an image in png or gif.
You can choose from various sizes, 16x16 or 32x32 (pixels).

For Internet Explorer:


For this browser, use an image or a .ico file (renamed bmp) -size 16x16 pixels.

To create an animated favicon or generate an ICO file


http://www.html-kit.com/favicon/
  • The link above will allow you not only to generate an ICO file easily but also to animate your favicon and scroll the text if you wish.
  • Click the Browse button and choose an image on your computer.
  • You can also add text to scroll after your icon; it automatically generates an animated icon.
  • Finally, it is also possible to generate an animated icon without text, by checking the Animated Favicon (the favicon itself that seems to scroll).
  • Then click on the Generate Favicon.ico button
  • You will then have an overview of your favicon.
  • Then simply download the zipped file on your computer.
  • After unzipping the file, copy the file favicon.ico to your site.
  • If you have downloaded an animated icon, the ZIP file will also contain the Extra file containing animated favicon (animated_favion1.gif) then copy it to your site.

Putting favicon online

  • To put the favicon on your site, indicate its path via the link tags found in the header.
  • Here's an example with a png image:


<link rel="icon" type="image/png" href="/images/myfavicon.png" />
  • Depending on the format, the "type" attribute will change:


Png: image/png

Gif format: image/gif

Jpeg format (jpeg or jpg extension): image/jpeg
  • And if you have a favicon that do not meet the standards, the attribute "rel" change also:


link rel="shortcut icon" type="image/x-icon" href="/images/icon_ie.ico" />
  • If your icon is animated (GIF, insert the following tag:


<link rel="icon" href="/images/animated_favicon1.gif" type="image/gif">

Notes


Related :

This document entitled « Favicon - have the icon of your site in the address bar » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.