Last updated on through popular avenue
.

You have surely noticed the presence of an icon to the left of the URL in the address bar of your browser on some websites? It couldn’t be simpler to set up this type of icon on your own website.

Our video

Upload your video

“FAQ: Favicon – Your site’s icon in the address bar”

Create the favicon

There are several methods:

For most browsers

First, you just need to create an image in png or gif format (standard formats, to be used).
(you can also use rarer formats, see the link at the end of the page).
You can choose multiple dimensions, 16×16 or 32×32 (in pixels).

For Internet Explorer

As usual, IE does not respect standards and does not use images with the correct formats.
For this browser, you must use an image or ico format (or renamed bmp) (non-standard, to be avoided preferably), and of dimensions 16×16 pixels.

To create an animated favicon or simply generate an ICO file

This tool will not only allow you to generate an ICO file easily but also to animate your favicon and scroll text if you wish.

Click on the button Browse… and choose an image from your computer.

You can also add text that will scroll after your icon, this will automatically generate an animated icon.

Finally, it is also possible to generate an animated icon without text by checking the Animated Favicon box: it is then the favicon itself that seems to scroll.

Then validate by clicking on the button Generate Favicon.ico

You will then have a preview of your favicon.

All you need to do is download the zipped file to your computer.

After unzipping the downloaded file, copy the favicon.ico file to your site.

If you downloaded an animated icon, the ZIP file will also contain an Extra folder which contains your animated favicon, then copy animated_favion1.gif to your site.

Upload the favicon

You must then drop the favicon on your site, and indicate its path via the link tag in the head tags.
Here is an example with an image in png format:

<link rel="icon" type="image/png" href="https://www.commentcamarche.net/images/mafavicon.png" />

Depending on the format, the “type” attribute changes:

  • Png format: image / png
  • Gif format: image / gif
  • JPEG format (jpg or jpeg extension): image / jpeg

And if you have a favicon that does not respect the standards, the “rel” attribute also changes:

<link rel="shortcut icon" type="image/x-icon" href="https://www.commentcamarche.net/images/icone_ie.ico" />

It is also possible to drop a favicon.ico file at the root of the site so that some browsers use it automatically, but this is not standard.

If your icon is animated (GIF)

Insert the following tag:

<link rel="icon" href="https://www.commentcamarche.net/images/animated_favicon1.gif" type="image/gif">

Notes

  • If you use an icon in a standard format but also another in ico format, avoid placing the latter at the root: browsers will display it if they cannot find the image in png format.

To have

Explanation and method in detail

Leave a Reply