Ajouter une icône à son site internet dans les navigateurs (tuto)

Posté le 27/01/2015 dans la catégorie Tutoriels | 8 commentaires

Intégration d'une favicon pour son site internet Wordpress

Vous l’avez sans doute déjà remarqué, votre navigateur affiche pour la plupart des sites internet, une icône à côté de son adresse ou dans l’onglet. Celle-ci, appelée « favicon », (prononcée « favicone »), reprend souvent le logo et les couleurs  de l’entreprise ou de la marque. Grâce à elle, l’adresse du site devient plus visuelle et se distingue, notamment lors de son ajout dans les sites favoris. Cela vous tente de faire la même chose sur votre site web ? Alors, suivez le guide grâce à ce tutoriel dédié à la favicon !

Les prérequis pour intégrer une favicon pour son site web

Pour suivre ce didacticiel il vous faut :

  • un logo ou une image simple qui pourra être recadré en un carré et qui reflète votre entité ; si vous n’en avait pas vous pouvez toujours créer un carré de couleur avec la première lettre de votre nom de domaine !
  • un logiciel de retouche d’image: paint,  gimp…
  • un logiciel FTP tel que Filezilla, Cyberduck…
  • un éditeur de code HTML: logiciel ou CMS (WordPress)

1 – Créer une icône du site au bon format et avec la bonne extension

Génération d'une favicon au format jpeg avec le logiciel Gimp

Création de la favicon en .jpeg avec le logiciel Gimp

Dans un premier temps, il vous faut redimensionner voire recadrer votre image (logo) pour en faire une icône carrée de 32 pixels de côté (32 px x 32 px). Sachez que cette taille c’est comme un pin’s à l’échelle d’une page internet ! Pour que votre favicon ressemble à quelque chose, il faut qu’elle soit simple, en forme comme en couleurs. Pour ce faire, vous pouvez utiliser par exemple le logiciel gratuit Gimp (voir tutoriel) :

  • Ouvrez votre image
  • Sélectionnez (en maintenant la touche Maj pour forcer la forme carrée) la partie souhaitée de votre image
  • Cliquez sur la sélection
  • Cliquez sur « Découper la sélection » dans le menu « Image »
  • Cliquez sur « Echelle et taille de l’image » dans le menu « Image »
  • Mettez 32 pixels comme largeur et hauteur puis validez en cliquant sur le bouton « Echelle »
  • Enregistrez l’image au format Jpeg (« Enregister sous… » dans le menu « fichier ») avec la qualité maximum : 100)
  • Favicon.ico générée depuis un site générateur d'icones

    Génération de la favicon sur un site générateur de fichier .ico

    Ensuite, rendez vous sur un site dédié pour générer à partir de votre image carrée JPEG une icône au format ICO (extension .ico). Par exemple, essayez le site http://favicon-generator.org/:

    • Cliquez sur le bouton « Choississez un fichier » et parcourez vos documents pour sélectionner votre image carrée Jpeg de 32 pixels de côté
    • Cliquez sur le bouton « Create Favicon »
    • Cliquez enfin sur « Download the generated favicon » pour télécharger votre icône, renommée et formatée comme il faut (.ico), sur votre ordinateur

2 – Placer la favicon sur le serveur web

Transfert FTP de la favicon avec Filezilla

Transfert de la favicon sur le serveur web avec Filezilla

Une fois votre icône générée en .ico, il vous faut la placer à la racine de votre site internet. Pour cela lancez votre logiciel de transfert de fichiers (FTP). Pour ce faire, vous pouvez utiliser par exemple le logiciel gratuit Filezilla (voir tutoriel) :

  • Connectez-vous à votre serveur web
  • Sélectionnez le dossier racine de votre site web (en général le dossier « www »)
  • Parcourez votre ordinateur (Site local dans la partie de gauche)
  • Sélectionnez votre fichier favicon.ico fraichement généré et glissez-déposez le sur votre site distant (fenêtre de droite ouverte sur votre dossier « www »)

3 – Intégrer le code HTML pour mettre en  place la favicon

Ligne de code HTML pour favicon dans le CMS WordPress

Intégration du code HTML pour la favicon dans l’éditeur WordPress

Maintenant, il ne vous reste plus qu’à mettre quelques lignes de code HTML dans l’entête de vos pages web souhaitées (la page d’accueil notamment) :

  • Parcourez le début de votre code HTML de votre page jusqu’à isoler la partie entre les balises <head> et </head> ; si vous êtes sur WordPress, vous devrez éditer le fichier header.php via l’« Editeur » depuis le menu « Apparence ».
  • Copiez la portion de code ci-dessous et collez la entre les balises head, juste avant la balise </head> de votre page par exemple :
    <link rel="icon" type="image/x-icon" href="/favicon.ico" /><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
  • Enregistrez votre fichier pour sauvegarder les modifications.

Voilà, il ne vous reste plus qu’à tester votre site internet en rafraîchissant votre page, vous devrez voir apparaître votre favicon à côté de la barre d’adresse ou dans l’onglet de votre navigateur. Tentez d’ajouter votre site web dans les sites favoris, vous devriez le retrouvez facilement grâce à sa nouvelle icône !

J’espère que ce tutoriel vous aura bien aidé. Si vous souhaitez des précisions, ou si vous avez des questions pour mettre en place une favicon sur votre site internet, n’hésitez-pas à utiliser les commentaires ci-dessous.

8 commentaires

  1. Bernard ROCHER
    2 février, 2016

    Merci pour ce tuto qui m’a permis de faire cette opération qui me trottait dans la tête depuis un moment. J’utilise Webcreator pro pour mon site.

    Cordialement.

    B. ROCHER

    Répondre
  2. yoxpo
    17 février, 2016

    Merci du code par contre je pense que dans le code il ne faut pas ajouter le «  »

    Répondre
    • Sébastien
      17 février, 2016

      Effectivement il y avait des caractères superflus dans le code, c’est corrigé. Merci.

      Répondre
  3. GERARD
    8 janvier, 2017

    Bonjour,
    Pour aller plus loin…maintenant sur certains sites, dans la barre adresse avant le www il y a le nom de l’entreprise par exemple : La Poste SA [FR] https://pro.boutique.laposte.fr

    Comment fait-on pour obtenir cela ?

    Merci
    Gérard

    Répondre
    • Sébastien
      9 janvier, 2017

      Bonjour Gérard, en effet il s’agit des informations de sécurité mise en place par le site. Cela passe par la mise en place du protocole sécurisé https plutôt que http. Cette pratique permet de crypter les échanges entre votre ordinateur et le serveur sur lequel est hébergé le site. Pour ce faire, il vous faut vous rapprocher de votre hébergeur pour activer ce protocole. Cette opération peut être gratuite ou payante en fonction du certificat utilisé. Bonnes continuations. Sébastien

      Répondre
  4. Paul
    8 janvier, 2017

    Pour avoir le nom de l’entreprise avec le cadenas vert (en https) il faut obtenir un certificat EV SSL (c’est une norme de certificat étendu EV est l’abréviation de validation Entreprise). ce sont des certificats assez cher pour un « petit » site pro. Par contre le fait d’avoir cette information à côté du cadenas vert augme le taux de conversion (moins d’abandon de commande car confiance des acheteurs). il faut compter environ 200€ par an pour avoir ce genre de certificat (rechercher sur Google CERTIFICAT EV SSL

    Paul

    Répondre
    • Sébastien
      9 janvier, 2017

      Merci Paul pour ces précisions. Sinon pour des petits sites, cela peut-être gratuit, je pense notamment aux offres d’hébergement mutualisé proposées par OVH. Cordialement.

      Répondre

Laisser un commentaire