METTEZ UN PEU DE PIMENT!

Publié : 10 années

Créer et intégrer son FavIcon

Suite à mon petit soucis de compatibilité de favicon entre les navigateurs, je viens vous donner la solution… Premier tuto conseil !


Qu’est-ce qu’une favIcon ?
Une favicon est une icône mise à disposition par un site Web pour enjoliver les endroits où ce site est mentionné. Cette icône pourra être utilisée dans la barre d’adresses, les favoris, les onglets…
On la trouve à gauche de l’url du site Web, elles sont devenues indispensables pour représenter chaque site Web !

Comment créer son favIcon ?
Les favIcons peuvent exister au format .ico, .png, .gif… Mais attention Internet Explorer ne reconnait que les .ico !
Ils doivent avoir une taille de 16×16 ou 32×32 pixels.
Vous pouvez utiliser des logiciels online qui permettent de les créer et de les enregistrer directement comme Favicon.cc !
Ou alors utiliser un logiciel de retouche puis transformer votre fichier avec FavIcon from Pics. Il y a même un plugin : ICO Format qui permet de les créer avec Photoshop.

Comment intégrer son favicon sur son site Web ?
Il faut préalablement déposer son .ico et/ou son .png à la racine de son site Web grâce à un logiciel de FTP. Je vous conseille de mettre les deux formats de fichier pour avoir une compatibilité maximale avec chaque navigateur.
Puis ajouter cette ligne de code dans les balise <head></head> :

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

Cette première ligne s’adresse particulièrement à Internet Explorer qui n’utilise que les .ico. Puis ajouter une deuxième ligne :

<link rel="icon" type="image/png" href="/favicon.png" />

Celle-ci s’adresse aux autres navigateurs. Elle a résolu mon problème de favicon sur Firefox !

Maintenant M.INce, tu peux le dire « ça marche ! » lol
😉

4 Commentaires.
  1. ince dit :

    Et oui ! effectivement je le comfirme ! ça marche !!!

    😀

  2. Tam dit :

    Héhé Merci INce !
    😉

  3. Carine dit :

    Eh bien… c’est vrai que je ne suis pas un super webmaster, mais j’avoue que pour moi eh bien… marche pas. Une ligne en html apparaît sur la première page de mon site… et pas de favicon.
    Pourriez-vous recommencer à tout me réexpliquer tout doucement tout doucement avec des mots simples (et me dire s’il y a des choses à remplacer dans mes phrase html par exemple…)
    Merci beaucoup!

  4. GéGé dit :

    Oui oui, je peux vous aider, je vous envois un email…

Laisser un commentaire ?

Some HTML is OK