Guy Labbé — blog à propos du graphisme & du Web

Créer un favicon, une icône personnalisée

Un favicon est une icône qu'on peut attribuer à son site Internet. Elle est visible à gauche de l'adresse URL dans la barre d'adresse du navigateur, ainsi que dans les favoris. Un favicon permet de donner davantage de personnalité à votre site Web.

Comment ajouter un favicon pour votre propre site? très simple et rapide !

  1. Utilisez un logiciel pour la retouche d'image, (tel que Photoshop, Gimp, Corel Draw, Paint, ...) et créez une image de 64x64 pixels. Vous pouvez aussi la faire d'une taille de 32x32 pixels, ou 16x16 pixels, mais 64x64 est préférable pour un favicon.
  2. Sauvegardez-la en format ICO, ou PNG, ou utilisez cet outil en ligne. Si ça peut influencer votre choix, Internet Explorer 6 ne reconnaît que les fichiers ICO.
  3. Ajoutez ceci entre la balise <head> et </head> de votre site web :

  1. <LINK REL="SHORTCUT ICON" href="mon_favicon.png">

Vous devez simplement remplacer mon_favicon.png par le nom de votre image... et voilà, c'est aussi simple que ça!

Ça parle de

Commentaires

par Le Courrier Industriel — 2010-03-22

Est-ce que la favicon gère la

Est-ce que la favicon gère la transparence ?
Merci pour le lien et le site très bien réalisé.

Commenter sur ce sujet :

Le contenu de ce champ sera maintenu privé et ne sera pas affiché publiquement.
  • Les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.
  • You can enable syntax highlighting of source code with the following tags: <code>, <actionscript>, <apache>, <bash>, <dos>, <html>, <javascript>, <mysql>, <php>, <xml>.
  • Every instance heading tags will be modified to include an id attribute for anchor linking.
  • Image links with 'rel="lightbox"' in the <a> tag will appear in a Lightbox when clicked on.
  • Image links with 'rel="lightshow"' in the <a> tag will appear in a Lightbox slideshow when clicked on.
  • Links to HTML content with 'rel="lightframe"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to video content with 'rel="lightvideo"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to inline or modal content with 'rel="lightmodal"' in the <a> tag will appear in a Lightbox when clicked on.

  • Links to specified hosts will have a rel="nofollow" added to them.

  • Insert <!--tableofcontents [list: ol; title: Table of Contents; minlevel: 2; maxlevel: 3; attachments: yes;]--> to insert a mediawiki style collapsible table of contents. Arguments within [] are optional.

Plus d'informations sur les options de formatage