Faire un favicon

Rubrique Développement Web

Le favicon est un petit gadget inutile mais rigolo. Internet Explorer ne comprenant les favicons qu’au format .ico, le problème est qu’il faut passer par un logiciel de création d’icône souvent payant et difficile d’utilisation. Voici une solution on ne peut plus imple !

Publié il y a déjà trop longtemps…

Il permet, lorsque l’internaute place votre site en favori ou marque-page, d’afficher une petite icône à côté de l’intitulé de votre site. En outre, sur certains navigateurs tels que Firefox, lorsque vous êtes sur un site, le favicon s’afficha dans la barre d’adresse.

Pour placer un favicon sur ses pages, il faut placer une balise <link /> spécifique entre les balises <head>, comme ceci :

[html] <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

Avec un navigateur comme Firefox, il est possible de choisir d’autres formats que le .ico, des jpg, des gif, des png, etc. C’est un cas similaire au curseur personalisés.

Pour créer un icône, voici un petit logiciel nommé AveIconifer, déniché par Tonton Freud, qui converti des PNG en ICO et vice et versa. Il suffit de glisser son image directement dans l’encart de son format et de glisser à nouveau du logiciel vers son dossier pour récupérer le format désiré.

Téléchargez AveIconifer

Un seul hic, le poids des icônes générées est assez volumineux.

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

Monique

Bonjour,

Je trouve ce gadget bien utile au contraire (avec un navigateur comme Firefox, bien-sûr) : bien utile quand j’ai toute une série d’onglets ouverts, bien utile aussi dans la barre personnelle où je gagne dans la place pour afficher les sites/forums où je vais très souvent (un favicon prend moins de place qu’un nom, même raccourci).

Un outil en ligne plutôt efficace http://www.html-kit.com/favicon/
Il donne un ico (32×32), un png (16×16) et même un gif animé !
Il permet aussi de tester immédiatement l’effet dans le navigateur.

Amicalement,
Monique
Shemu

Merci Monique pour cet excellent lien !
robby

Il doit bien y avoir une astuce/fonctionnalité dans Photoshop CS ?
Expert Shemu: qu’en dis -tu
Fanny

Personnellement j’utilise un plug-in Photoshop qui permet l’enregistrement au format .ico, c’est extrêmement pratique! http://www.telegraphics.com.au/s...
Arthur

Génial je cherchais depuis longtemps un aussi bon tutorial ! Merci
Kob

excellent ! tout simplement !

merci Shemu et merci Monique !! ;)
eagle

perso jai importer un fichier jpeg et je lai enregistrer en .ico sur photoshop et ca marche :)
Shemu

Eagle > Oui, mais tu peux pas gérer la transparence.
Laurent

GIMP permet aussi de faire un export d’une image en format .ico
ElYoM

Personnellement, j’utilise la technique suivante qui assure la compatibilité Internet Explorer et FireFox (ou navigateurs de type Netscape) :

<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
<link rel="icon" type="image/gif" href="../animated_favicon.gif" />

On sert d’abord le .ICO à Internet Explorer puis le .GIF à FireFox (ou tout autre format géré par FireFox du moment que le type MIME est correctement indiqué).

/!\ATTENTION/!\ Il ne faut surtout pas intervertir les deux balises LINK sinon ça ne fonctionne plus sous FireFox, c’est-à-dire qu’il faut d’abord servir le .ICO à Internet Explorer avant de servir le .GIF à FireFox et non l’inverse.
LuciferX

Personnellement, je recommande à tous l’exellent site converticon.com/ qui permet de convertir un .ico vers .png et vice versa sans perte (ou alors très légère) de qualité qui vient tout juste de réouvrir ses portes!
:-)
fx

hello
pour ma part, j’utilise irfanview, un logiciel gratuit de traitement d’images. Le poids des .ico générées est tout petit (1Ko à peine). Et ce n’est qu’une des infinies possibiltés d’irfanview.
Boro64

Bonjour,
c’est bien beau et nien joli…mais le format .cur???comment et avec quoi y arriver???
phyl

bonjour,
Pour moi, j’utilise : tools.dynamicdrive.com/fa…
trés trés simple !
manau

le lien de téléchargement ne marche plus :

http://www.customxp.net/logitheq...
neophyte

Bien plus simple, tu crées sous photoshop ton favicon en 16×16, l’enregistres en gif, jpg ou png, puis une fois enregistré tu le renommes en .ico.
Le tour est joué !

Les commentaires sont clos.