Un Favicon est un petit icone qui apparait dans la barre d’adresse du navigateur, à côté de l’adresse URL d’un site internet. Il apparait également dans les favoris, dans les onglets des navigateurs ainsi qu’en icone de raccourci sur le bureau. Cet icone est un fichier image au format .ico.
Photoshop si doué soit-il ne sait pas enregistrer une image au format .ico. Afin de remédier à ce problème un format de fichier doit être ajouté.
Ajout du format ico sous Photoshop CS5 64 bits
1/ Téléchargez le format de fichier ico
2/ Copier le fichier ICOFormat64.8bi dans votre répertoire ex : C:\Programmes\Adobe\Adobe Photoshop CS5 (64bits)\Plug-ins\File Formats
3/ Redémarrer Photoshop
Vous pouvez maintenant enregistrer n'importe quelle image au format .ico
Ajout du format ico sous Photoshop CS4
1/ Téléchargez le format de fichier ico
2/ Copier le fichier ICOFormat.8bi dans votre répertoire ex : C:\Program Files\Adobe\Adobe Photoshop CS3\Modules externes\Formats de fichiers
3/ Redémarrer Photoshop
Vous pouvez maintenant enregistrer n'importe quelle image au format .ico
Créer un favicon
Le favicon est une petite image de taille carré : 16 pixels par 16 pixels.
1/ Créer un carrée de 16px / 16px
2/ Ajouter votre image
3/ Enregistrer au format .ico
Note : Pour créer un favicon transparent, il suffit lors de la création de laisser le fond de l'image transparent.
Ajouter votre favicon sur votre site
Entre les balises <head></head> ajoutez ce code :
<head>
...
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
...
</head>
Vous pouvez également créer un favicon sous des formats différents comme en PNG pour une meilleure gestion de la transparence. Sachez que le format PNG pour les favicon n'est pas reconnu sous tous les navigateurs. Mais le code ci dessous peut vous aider :
<head>
...
<!-- version IE //-->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<!-- version standart //-->
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
...
</head>