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 :
Il sera possible de changer la couleur du fond (les icônes sur iOS doivent être pleines) et d’ajuster la largeur de l’icône à l’intérieur. Le titre de l’icône ne peut être forcé, il reprendra le titre de la page où l’on souhaite créer un raccourci.
Vous pourrez aussi uploader un autre fichier.
La même chose que pour iOS (couleur de fond et ajustement de la taille de l’icône), vous pourrez cependant choisir de ne pas mettre de fond.
Vous pourrez aussi uploader un autre fichier.
Ce n’est pas fini, vous pourrez choisir de forcer votre raccourci à démarrer le navigateur avec ou sans la barre de menu chrome. Vous pourrez aussi spécifier une url de démarrage (souvent la page d’accueil), très pratique si vous faites une petite webapp, et que vous souhaitez sur les raccourcis démarrent tous sur une certaine page…
Pour finir vous avez la possibilité de générer des icônes spéciales pour Safari (icône pin) et aussi de customiser votre tuile pour Windows : une icône blanche et une couleur de fond.
Vous aurez aussi la possibilité d’uploader une autre image
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 ? ????