Je ne savais pas comment démarrer cet article alors je vais juste te dire que si tu n’as pas de favicon sur ton site, tu vas apprécier la suite !

WTF : What The Favicon ?

Un favicon, c’est une petite image qui s’affiche à côté du titre de ton site, dans les onglets de ton navigateur par exemple.

Exemple de favicon

 

Oui oui ça va, je vois déjà les commentaires du type #GoogleAddict en voyant ma barre de favoris …

Parenthèse close, le favicon est en quelques sortes l’image qui permettra d’identifier en un coup d’œil ton site, donc sans lire le titre.
Mais il faut savoir qu’aujourd’hui, le favicon n’est plus uniquement utilisé dans les onglets de navigation. Je suis sûr à 99.99% que toi, lecteur du Blog du MMI, tu possèdes un téléphone portable ? Si tu dis non, tu es un menteur ou alors il ne te reste plus qu’à mettre ton épée au fourreau et partir en croisade.
Donc si tu enregistres le site blogdummi.fr dans les favoris de ton navigateur mobile, tu verras que notre favicon (qui est la petite fusée de notre logo) sera utilisé comme image pour illustrer notre site. Pas mal du tout avoue ?

Montage

 

« Hey ! Moi aussi je veux un favicon stylé ! »

T’as cru qu’on allait faire cet article sans te le dire ? Ah tiens, bonne idée, on y songera à l’avenir …

Un favicon simple, est une petite image (16px sur 16px en général) au format ICO ou PNG à héberger sur le serveur web de ton site. Ensuite, il te faut placer dans son en-tête (donc la balise <head>) la ligne de code suivante :

Si tu n’as pas encore de favicon, tu peux utiliser cet outil pour en générer automatiquement sans logiciel comme Photoshop. On te recommande d’utiliser ce site https://www.logaster.fr/favicon/ où tu pourras en générer des dizaines de versions de favicon prêts à l’emploi, en moins 2 minutes. Et ensuite, tu n’as qu’à le télécharger ! »

Le problème, c’est que ton favicon, obtenu de la sorte, ne permet pas d’être retenu par les appareils de Microsoft ou ceux d’Apple, par exemple pour l’avoir en signet comme montré plus haut ou bien sur l’écran d’accueil de l’interface Metro de Windows 8.

La solution, pour pas trop s’embêter avec le code, c’est d’aller faire un petit tour sur ce générateur de favicon : realfavicongenerator.net !

Les choses sérieuses commencent – Favicons iOS et Android

Donc une fois sur le site, il t’est demandé d’envoyer l’image qui te servira de favicon dans une taille comprise entre 70×70 et 260×260. Tout est en anglais mais relativement bien expliqué, même pour un francophone.
Une fois que tu as envoyé ton image, le générateur va simuler l’application de ton favicon sur l’interface d’iOS. Tu peux alors régler la couleur de l’icône si tu as uploadé un PNG en transparence, et même changer le padding (marges intérieures).
Si tu as envoyé un JPG, tu n’as rien à modifier en général.

Favicon pour iOS et Android

 

Et le favicon de Windows 8 alors ?

Patience ! On y arrive …
Savais-tu que tu pouvais mettre directement dans ton écran d’accueil Windows 8 un lien internet (un favori quoi) ? Du coup, on va essayer de faire ça proprement. Dans le second bloc, dédié justement au favicon Windows, je te conseille d’uploader une version soit blanc, soit noir, de ton favicon au format PNG, avec la transparence (exemple avec notre petite fusée). Ensuite, tu n’as plus qu’à choisir ta couleur dominante pour la couleur de la tuile, et le tour est joué !

Favicon pour Windows

 

Placer ton favicon sur le site

Enfin le tour est joué, façon de parler …
Il te faut générer le favicon quand même en cliquant sur le bouton dédié (pas besoin de tuto pour ça). Et là, pif paf pouf, voilà du code !
No soucy man, tu es sur le Blog du MMI, il peut rien t’arriver … ou presque !

Donc c’est très simple, il te suffit de suivre les instructions. D’abord tu télécharges ton pack de favicons (au format ZIP), et une fois descendu en local tu le dézippes. Tu vas voir, il y a une quinzaine d’images et un fichier. Tu ne supprimes rien, tu gardes tous les fichiers ensemble et tu envoies tout à la racine de ton site, sur ton serveur. Comme expliqué dans la deuxième consigne (ça va presque passer pour du plagiat), si ton site est http://tonsite.com, l’emplacement des fichiers doit être http://tonsite.com/favicon.ico.

Génération du code pour le favicon

 

Dernière étape, la plus délicate mais pas de panique, c’est de ses échecs qu’on apprend le mieux (je te mets trop en confiance là) !
Plus sérieusement, tu as dû obtenir le code présent sur l’image au-dessus.

Ce que je te conseille, c’est de tout copier-coller dans un fichier TXT et de l’enregistrer dans un répertoire concernant ton site, pour le garder bien au chaud, on sait jamais.

Ensuite, tu colles un nouvelle fois ce code dans la balise <head> de ton site, après l’appel de la feuille de style CSS par exemple (si tu en utilises une mouahah). Pour ceux qui utilisent WordPress, il faut coller ceci dans la balise <head> qui se trouve dans le fichier header.php.

Et donc normalement, quand tu as mené à bien ta quête, toi, valeureux chevalier, tu peux actualiser ton site et voir la splendeur de ton petit favicon rayonner sur n’importe quel support, que ce soit sur ton navigateur web, sur ton iPhone, ton Galaxy, ta Surface ou même ton xylophone, ton favicon est là ! Bravoooooo à toi, et à la prochaine pour un nouveau tutoriel

Créer un favicon multisupport pour ton site
4.8 (95.56%) 9 votes

Ce qui pourrait également t'intéresser ...

9 réflexions sur “ Créer un favicon multisupport pour ton site ”

  1. Je me pose la question de la compatibilité des navigateurs (surtout mobile) pour les favicon en svg. Car c’est pas que ça me gonfle les particularité d’apple avec leur retina mal géré, mais ça pourrait au moins résoudre les problèmes d’avoir le favicon affiché en 2x plus grand.

    1. Pour me répondre, le w3c intègre la variable « any » pour la taille des favicon, donc que j’imagine que c’est pour SVG. Après c’est pour les navigateurs respectant donc les standards du web *rheum rheum*. Donc déjà les svg en favicon ne sera pas intégré dans IE avant IE13 et encore rien de défini (source), mais s’intéresse-t-on vraiment à IE ? :-°

      1. A ce niveau là je ne peux pas te répondre (compatibilité avec le SVG), mais pour ce qui est de IE, la question va se poser de moins en moins puisque Firefox vient tout récemment de passer devant ..

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir