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.
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">
- 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.
Explanation and method in detail