Dans ce 7ème mini tutoriel, je vais vous présenter une web application très utile qui va vous permettre de générer dans toutes les déclinaisons possible la favicon de votre site. Que ce soit en haute définition, en icône d’application (Android/iOS) sur votre écran d’accueil, en Tuile Windows 8/10 ou encore en « pin » sur Safari, votre site aura tout le temps une jolie icône à afficher quelque soit ce que vous en faites !

En plus vous pourrez aussi customiser la couleur de barre de menu sous Chrome pour Android (ou Microsoft Edge).

Le plus cool c’est que vous n’aurez besoin que d’un seul fichier SVG de votre icône ! Une web application s’occupera de générer vos favicons et même de les customiser … Vous êtes prêts  ?? ???? ????

Un site tout en un

RealFaviconGenerator est une web application gratuite permettant de générer 16 déclinaisons de votre favicon. La seule condition minimale, un fichier JPG/SVG/PNG de 70×70 pixels. Néanmoins ce que je conseille c’est une icône en SVG de format carré (la taille importe.. SI vous vous demandez pourquoi ne revenez plus ici ^^).

Commencez donc par uploader votre fichier (SVG de taille carré je rappelle) ici…

Dès que le chargement est terminé, la page s’actualise et vous pourrez ensuite éditer en détail le rendu de vos icônes selon l’appareil ou le navigateur :

Générez vos icônes finales et vous disposerez d’un fichier .zip à télécharger, suivi du code HTML suivant :

[cce_html]

















[/cce_html]

Pensez à rajouter l’url complet de votre site au niveau des chemins de vos images, dans le cas ou vous faites de la réécriture d’url ou autre…

Notez la dernière meta « theme-color », si vous avez une barre de menu d’une certaine couleur ou une couleur générale (hors foncé ou blanc), vous pouvez choisir d’y mettre son code couleur. Par exemple pour mon propre site, j’ai ajouté la couleur de mon logo #df3741 :

[cce_html][/cce_html]

Ce qui donne :

Cool non ? ????