Vous êtes ici : Accueil | Comment ajouter un FAVICON sur un site WordPress facilement

Vidéo : Comment ajouter un FAVICON sur un site WordPress facilement



Transcription de la vidéo :

Salut les Cuistots j’espère que vous allez bien.

Alors aujourd’hui on va apprendre à ajouter un favicon sur un site WordPress.

Allez c’est parti.

Qu’est-ce qu’un Favicon ?

Alors avant de commencer vous vous demandez peut être ce qu’est un favicon. En fait c’est très simple, c’est l’image qui vous représente sur Internet. Donc, on peut la trouver majoritairement dans les navigateurs, au niveau des onglets juste ici, là j’ai ma petite marmite qui est définie et on peut aussi le retrouver sur des icônes lorsque l’on met des raccourcis sur des tablettes, sur des téléphones ou sur des ordinateurs.

Vous allez me dire : « Alex c’est bien sympa mais on en a déjà parlé de ça dans ta vidéo sur la création d’un site WordPress »

(Si vous ne l’avez pas vu d’ailleurs je vous engage à allez la visionner si vous n’avez pas encore de site)

Du coup oui on en a déjà parlé. on a vu qu’Il suffisait d’aller dans  apparence => personnaliser et ensuite il suffisait d’aller dans « identité du site » pour pouvoir définir une image, une icône de site également appelée favicon.

Jusque là c’est très bien, c’est exactement ce que j’ai fait pour la Marmite, on peut le voir ici

installer un favicon ou icone de site

donc à l’instant je vous parlais que ça devait s’afficher sur tout un tas d’appareils et bien le problème est qu’avec la fonctionnalité par défaut de WordPress, ça ne s’affiche pas sur tous les appareils.

Donc par exemple si vous avez une tablette Windows, une tablette… là les tablettes Apple ça fonctionne, mais tout ce qui est Windows, Android, ça peut causer des problèmes.

Pour vous montrer ce qui fonctionne et ce qui ne fonctionne pas, il y a un petit outil qui permet de vérifier cela, ça s’appelle « Favicon checker », je vous ai mis le lien dans la description.

J’ai mis la marmite et je vais voir sur quels périphériques ça fonctionne et sur lesquels ça ne fonctionne pas.

Donc là, on a du vert, on a du rouge. Sur iOS et tout ce qui est Mac ça fonctionne, pas de soucis.

Mais par contre sur Chrome, Android Chrome, ça ne fonctionne pas, la résolution n’est pas correcte, etc… Il manque des choses.

Sur Windows 8 et Windows 10 ça ne fonctionne pas non plus

Sur Mac OS, si j’ai envie de mettre un raccourci dans Safari, ça va être moche, ça va être flouté, donc l’image ne sera vraiment pas très correcte.

Et pareil, donc là ça fonctionne dans certains cas et là ça ne fonctionne pas correctement. Bon voilà, il y a quand même pas mal de rouge,

donc l’idée c’est de corriger tout ça, pour que, un maximum de personnes puissent avoir le favicon qui s’affiche correctement. Ce serait dommage d’avoir le favicon flouté, si je vous parle en flouté, ça ne va pas vous plaire.

Alors comment corriger ça, tout simplement, on va utiliser une extension qui va nous permettre de créer automatiquement toutes ces petites images. C’est la solution du feignant je vous l’accorde mais également la solution du débutant et, j’avoue que ça ne sert à rien de se casser la tête quand on peut mettre une petite extension qui fait tout pour nous.

Utiliser l’extension Real Favicon Generator

Alors, on va aller sur notre site de test pour pouvoir installer cette extension, donc comme d’habitude on va dans extensions => ajouter et on va installer l’extension qui s’appelle « Real Favicon Generator ».

extension real favicon generator

Donc là ça recherche et on l’a juste ici sur notre gauche. D’ailleurs cette extension a été créée par un français qui s’appelle Philippe Bernard, donc « Salut Philippe si tu nous regardes, merci beaucoup pour ta contribution »

Je suis sûr que ça aide déjà pas mal de monde, on peut voir +100 000 installations actives. « Merci encore pour ta contribution, ça va aider de nouvelles personnes »

Donc je clique sur « Installer » et bien sûr en attendant, il faut que vous ayez une image de prête à mettre en tant que favicon. Il faut que ce soit une image de forme carrée avec une image qui vous représente le plus. Moi dans mon cas j’ai mis le petit pictogramme de la Marmite.

Vous le reconnaissez.

Là j’ai mis aussi une grande image de 1.000 pixels sur 1.000 pixels pour pouvoir faire en sorte que l’extension puisse redimensionner ça pour tous les types d’appareils. Donc Là je vous concède que l’on a vraiment une grosse image, mais c’est assez.

Donc là notre extension est installée, il suffit juste de l’activer, on attend un petit peu, le temps que ça mouline…

Voilà c’est bon.

Alors, pour pouvoir commencer à utiliser l’extension, il suffit juste d’aller dans Apparence => favicon, et là on va donner notre image de base.

Donc là ils nous disent 260*260 taille recommandée, 70*70 en taille minimale, moi avec mon 1.000*1.000, je suis tranquille.

Et en plus je fais des rimes, si c’est pas beau !

J’ajoute mon image ici, ça y est, elle est envoyée sur WordPress.

Je la sélectionne et je n’ai plus qu’à cliquer sur le bouton « Générer le favicon ».

Donc là ça nous renvoie automatiquement sur le site « Real Favicon Generator », c’est tout à fait normal, ne vous inquiétez pas, après on va revenir sur notre site.

Donc là, on doit donner différents paramètres. Ce qui est dommage c’est que ce n’est pas en français, mais je vais vous montrer comment configurer tout ça.

Alors ici, on peut laisser « utiliser le favicon original », éventuellement on peut mettre un arrière plan et après une couleur de fond. Moi je ne vais pas le faire, vue que l’icône originale me convient.

Ici on peut dire « créer des icônes pour iOS 7 et iOS 6 et même avant et même créer… donc là on coche tout, comme ça tous les appareils, tous les gens qui ont encore des iPhones plus anciens auront un beau favicon, donc là c’est bon.

Pour Android Chrome, ici on a notre icône en aperçu, on peut voir ce que ça donne sur les différents contextes de navigation.

On peut laisser les options par défaut, ce que l’on va faire, juste, c’est donner un nom à notre site, donc là c’est WP Marmite.

Voilà comme ça on a bien le nom qui s’affiche ici.

Thème color, vous pouvez laisser ça.

Ensuite, Windows Metro, donc pour Windows 8 et Windows 10. Là on a notre icône qui s’affiche bien mais on a une couleur qui n’est pas terrible derrière. Donc moi je vais mettre la couleur du fond qui correspond un petit peu à mon noir et là c’est beaucoup plus intéressant.

Donc là on va dire que l’on veut que ce soit compatible avec tout, on va tout cocher, comme ça il n’y aura vraiment pas de problèmes.

Voilà.

MacOS Safari, là c’est un peu moins beau, parce que ça transforme notre image en image monochrome, donc en image toute blanche.

Donc là on peut voir ce que ça donne, sinon mettre « pas d’icône » et on peut éventuellement donner une autre image si on le souhaite.

Donc là je viens de créer une petite image transparente qui pourra fonctionner sur MacOS, donc je l’ajoute.

Voilà…

favicon checker

Et si on regarde bien, sur Safari on verra que ça sera beaucoup plus sympa. Et même sur la Touch Bar, vous savez les nouveaux Mac maintenant ils vont avoir une Touch Bar tactile et donc là, ça s’affichera comme ça. C’est plutôt sympa si on met un raccourci de la Marmite sur son Mac Book. Donc voilà.

Ici, on a d’autres options, si vous avez un nouveau site vous cliquez ça.

Si vous avez un site existant qui a déjà un favicon, vous cliquez ici, donc moi je vais mettre ça.

Compression : alors là on peut dire comment le favicon doit être compressé, on peut réduire sa taille et donc le site se charge plus rapidement.

Donc là on peut voir ce que ça donne en compression. Donc là même si on est en très mauvaise qualité, ça a quand même une bonne tête, donc on va garder comme ça. Après c’est à vous de voir en fonction de l’image que vous avez envoyée, si ça s’affiche plus ou moins bien.

Donc vous choisissez la meilleure.

Ensuite, ici qu’est-ce qu’on a ?

Là on choisit l’algorithme qui va compresser l’image, donc on voit la meilleure image, donc là, comme je vous le disais, ce n’était pas terrible, moi, mon logo. On le voit ici en 16*16, on essaye de trouver ce qui correspond le mieux, je trouve que celui-là est pas mal, vous me direz ce que vous en pensez en commentaire. Je vais cliquer là-dessus.

Et maintenant on va pouvoir créer notre favicon. Donc là ça va mouliner, ça va me créer toutes les petites images pour tous les périphériques, avec les options que j’ai données et après on va être automatiquement redirigé sur notre site avec tout de configuré.

Donc voilà, comme je viens de vous le dire, on est redirigé et tout est bon, on a même un aperçu pour les différents périphériques et là c’est bon vous n’avez plus rien à faire.

Alors bien sûr ne désactivez pas l’extension sinon ça va désactiver automatiquement tous les favicons. Il ne reste plus maintenant qu’à tester pour voir ce que ça donne sur votre tablette, sur vos téléphones, demandez autour de vous s’il y a des gens qui ont des appareils que vous n’avez pas pour pouvoir tester ce que ça donne.

Et d’ailleurs je vous encourage à me dire comment vous voyez le favicon de la Marmite sur les appareils que vous possédez, ça me permettra de savoir si tout fonctionne bien.

Et voilà c’est déjà terminé, j’espère que cette vidéo vous a plu et si c’est le cas, mettez-moi un beau petit pouce en l’air juste en dessous, ça m’encourage à continuer. Bien sûr abonnez-vous à la chaîne pour recevoir les futures vidéos.

Et si même vous voulez être tenu au courant, il y a une petite cloche juste au niveau du bouton d’abonnement qui vous permettra d’avoir une notification à chaque fois que je sors une nouvelle vidéo donc une fois par semaine, comme ça vous ne louperez rien.

Sur ce je vous dis à très bientôt pour une nouvelle vidéo. Ciao !

 



Si vous avez apprécié cet article, inscrivez-vous à la newsletter

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 10000 personnes l'ont fait, pourquoi pas vous ?

C'est parti, je m'inscris !

1f289032cc2623e9a3fa1e69dd4adcf6ppppppppppppppppppppppppp
Partagez
Tweetez
Partagez