Ajouter une icône à son site internet dans les navigateurs (tuto)
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
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)
-
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
Si vous n’avez pas de logo, vous pouvez utiliser des outils pour en générer automatiquement sans connaissance de conception ni d’utilisation de Photoshop. Il existe notamment le site https://www.logaster.fr/favicon/ pour générer des dizaines de versions de logos prêts à l’emploi en 2 minutes. Il vous suffira de faire votre choix et le télécharger pour créer votre favicon.
2 – Placer la favicon sur le serveur web
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
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.
24 commentaires
Bernard ROCHER
2 février, 2016Merci 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
Sébastien
3 février, 2016Bien joué Bernard 😉 A bientôt.
yoxpo
17 février, 2016Merci du code par contre je pense que dans le code il ne faut pas ajouter le « »
Sébastien
17 février, 2016Effectivement il y avait des caractères superflus dans le code, c’est corrigé. Merci.
GERARD
8 janvier, 2017Bonjour,
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
Sébastien
9 janvier, 2017Bonjour 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
Paul
8 janvier, 2017Pour 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
Sébastien
9 janvier, 2017Merci 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.
claudie
8 octobre, 2017Bonjour je souhaiterai le faire sur mon site comment je peu faire si j’ai pas www a droite dans filezilla ? Merci d’avance pour votre réponse ! Cordialement Claudie
Sébastien
10 octobre, 2017Bonjour Claudie,
Il n’y a pas forcément de dossier www, cela dépend de votre hébergeur.
Vous devez y avoir normalement un fichier index.html ou index.php.
Cordialement.
claudie
10 octobre, 2017Bonjour merci pour votre réponse !Oui j’ai bien sa mais je pence que lorsque j’ai crée mon icône je n’avait pas le lien a coller dans ma page code ! J’ai fini par trouver un autre site et lien et je viens tout juste d’y arrivée et je suis ravie !!!bonne après midi ,cordialement Claudie
Sébastien
19 octobre, 2017Désolé, je viens juste de voir votre dernier commentaire. C’est super si vous avez au final réussi à intégrer votre icône. Bonnes continuations.
claudie
20 octobre, 2017Bonjour Sébastien
Pas de soucis sais pas grave ! Oui je suis quand même arrivée a le faire ,en se qui concerne mes 2 page principale ! Plus qu’a le faire sur les autres !! Merci bonne continuation également !
Alain
23 octobre, 2018Un grand merci. Moi aussi cela me trottait.
A celles et ceux qui au premier essai ne voit pas l’icône, pensez à faire CTRL F5 pour vider le cache et actualiser la page.
Alain
Sébastien
23 octobre, 2018Merci Alain de votre retour et votre partage.
Amélie
17 juin, 2019Bonjour Sébastien, cette manip est-elle possible avec les outils de création de sites comme wix?
Merci !
Amélie
17 juin, 2019C’est tout bon, c’était assez simple en fait…
Sébastien
17 juin, 2019Super Amélie, merci de ton retour 🙂
Swaswa
26 juin, 2019Peut-on l’icone après le titre ?
Sébastien
26 juin, 2019Pouvez-vous reformuler votre question svp ?
elsa Przybylski
2 octobre, 2019Bonjour en tout cas pour moi cela ne fonctionne pas….
Sébastien
2 octobre, 2019Bonjour Elsa,
Pouvez-vous en dire plus ? Qu’avez-vous entrepris, sur quel site… ?
elsa Przybylski
2 octobre, 2019J’ai voulu rajouter l’icon dans le header php de mon wordpress, après avoir ajouté le fichier.ico dans mon « www » sur filezilla…. Et même après avoir vidé le cache et actualisé rien n’est apparu , c’est sur mon site pro piwonya.fr
Sébastien
3 octobre, 2019Cela semble fonctionner (Safari sous Mac pour ma part). Cela venait peut-être de la mise en cache de votre navigateur malgré le rafraichissement.