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:
- Drawing software (Gimp, pixia, inkscape ...)
- Specialized software (IconEdit32 or IconWare)
- Websites (which transform an image favicon):
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
- 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:
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">