Transformez votre logo en favicon
Votre logo a un logotype, un symbole et des détails fins. À 16 pixels de large, un seul d'entre eux survit. Choisissez-le délibérément avant d'exporter quoi que ce soit.
Pourquoi le logo complet échoue
Un favicon s'affiche à seulement 16 pixels de large. Un logo complet avec un logotype et des détails fins se transforme en tache grise à cette taille : le texte devient illisible et le détail s'effondre en bouillie.
La solution est de traiter le favicon comme sa propre ressource dérivée du logo, pas comme le logo lui-même. La plupart des favicons forts sont un symbole, un monogramme ou une seule lettre, parce que c'est tout ce qui survit à la taille d'un onglet.
Du logo au favicon
- 1
Extrayez un élément
Prenez le symbole de votre logo, ou une seule initiale si votre logo est un logotype. Abandonnez le texte et tout ce qui est décoratif.
- 2
Simplifiez jusqu'à la lisibilité en petit
Retirez les lignes fines, les dégradés et les détails internes. Visez une seule forme marquante à fort contraste avec son fond.
- 3
Concevez d'abord à la plus petite taille
Zoomez à 16x16 et rendez-le lisible là. Si ça marche à 16, ça marche partout. Agrandir un design petit est facile ; l'inverse ne l'est pas.
- 4
Donnez-lui un fond si nécessaire
Une marque serrée se lit souvent mieux sur un fond plein ou légèrement espacé que flottant de bord à bord. Cela aide aussi l'apple-touch-icon, qu'iOS remplit sur du noir.
- 5
Exportez le jeu complet
Générez le favicon.ico, les PNG et l'apple-touch-icon à partir de la marque finale pour que chaque taille provienne du même visuel épuré.
Des règles de design qui survivent au rétrécissement
Le fort contraste d'abord. La marque doit se détacher nettement de son fond, car les nuances tonales subtiles disparaissent en petites tailles. Avant-plan marquant, fond simple.
Une forme, pas trois. Un favicon qui se lit comme une seule silhouette fonctionne. Empilez plusieurs éléments et ils fusionnent en bruit. Si vous hésitez entre deux idées, publiez la plus simple.
Surveillez l'espace négatif. Les fins interstices entre les formes se referment à 16 pixels et la marque se remplit en pâté. Donnez de l'espace aux formes, ou épaississez-les pour que les interstices restent ouverts.
Questions fréquentes
Puis-je utiliser mon logo comme favicon ?
Pas le logo complet. Extrayez le symbole ou une seule initiale et simplifiez jusqu'à ce que ce soit lisible à 16 pixels, puis exportez le jeu de favicons à partir de là. Un logotype complet vire à la bouillie dans l'onglet.
Comment faire un favicon à partir d'un logo ?
Prenez un élément du logo, retirez les détails fins, ajustez-le à 16x16 pour la lisibilité, ajoutez un fond si la marque est serrée, puis générez chaque taille de favicon à partir du visuel final.
Pourquoi mon logo est-il flou en favicon ?
Il a trop de détails pour 16 pixels. Les lignes fines, le texte et les dégradés s'effondrent à cette taille. Simplifiez vers une seule forme marquante et à fort contraste.
À quelle taille devrais-je concevoir un favicon ?
Concevez d'abord à la plus petite taille, 16x16. Si la marque se lit là, elle se lit à chaque taille plus grande. Agrandir un design petit et épuré est sûr ; rétrécir un design détaillé ne l'est pas.