Menu
  1. Accueil
  2. How To
  3. Webmaster
Thanks
1
Thanks

A few words of thanks would be greatly appreciated.

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

Latest update on by Jean-François Pillou .
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

Thanks
1
Thanks

A few words of thanks would be greatly appreciated.

Ask a question
CCM is a leading international tech website. Our content is written in collaboration with IT experts, under the direction of Jean-François Pillou, founder of CCM.net. CCM reaches more than 50 million unique visitors per month and is available in 11 languages.

Related

This document, titled « Favicon - have the icon of your site in the address bar », is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).

0 Comments