Créez votre favicon
Le générateur de favicon gratuit Vivlab fabrique les icônes de votre site à partir d'une image, d'un emoji ou d'une lettre, directement dans votre navigateur.
Personnalisez votre favicon, téléchargez chaque taille, puis copiez le code HTML à coller dans votre page.
Source
Code HTML
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
Aperçu
Mode d'emploi
Créer un favicon en 3 étapes
Choisissez la source
Partez d'une image, d'un emoji ou d'une lettre, puis réglez la couleur de fond et celle du texte selon votre marque.
Vérifiez l'aperçu
Comparez les rendus en 512, 32 et 16 pixels côte à côte pour vous assurer que l'icône reste lisible en tout petit.
Téléchargez et intégrez
Récupérez les PNG en 512, 180, 32 et 16 pixels, puis copiez le code HTML fourni à coller dans l'en-tête de votre site.
Tout savoir sur le favicon
Qu'est-ce qu'un favicon
Le favicon est la petite icône qui représente votre site. On la retrouve dans l'onglet du navigateur, dans la liste des favoris, dans l'historique et, sur mobile, sur l'écran d'accueil quand un visiteur ajoute votre site en raccourci. C'est un détail, mais il renforce la reconnaissance de votre marque.
Les tailles utiles
Quelques formats couvrent l'essentiel des usages : 16×16 et 32×32 pixels pour l'onglet et les favoris, 180×180 pour l'apple-touch-icon des appareils Apple, et 512×512 pour l'écran d'accueil Android et les applications web. Notre outil génère chaque taille à partir de votre visuel.
Comment l'ajouter
Téléchargez les fichiers, placez-les dans votre site, puis ajoutez les balises fournies dans la partie de vos pages. Chaque balise indique au navigateur quel fichier utiliser pour quelle taille. Le code prêt à coller est généré automatiquement dans l'outil.
Notre conseil
Restez simple et carré : à 16 pixels, un logo détaillé devient illisible. Préférez un symbole épuré, une initiale ou un pictogramme bien contrasté, qui reste reconnaissable même tout petit.
Questions fréquentes
Le favicon en pratique
Pourquoi plusieurs tailles ?
Le 16 et le 32 pixels servent à l'onglet et aux favoris du navigateur. Le 180 correspond à l'icône d'accueil sur iOS (apple-touch-icon) et le 512 alimente le manifeste d'une application web. Chaque contexte réclame sa résolution.
Faut-il un fichier .ico ?
Plus vraiment. Les navigateurs actuels lisent des PNG déclarés avec des balises link, ce que fournit cet outil. Le .ico historique sert surtout au fichier /favicon.ico appelé par défaut, mais les balises couvrent l'essentiel.
Comment l'ajouter à mon site ?
Placez les fichiers PNG à la racine de votre site, puis collez le bloc de balises link dans la partie head de vos pages. Sur une boutique Vivlab, le favicon se règle directement depuis les paramètres, sans toucher au code.
Que mettre dans un favicon de 16 pixels ?
Restez simple : une lettre, un monogramme ou un symbole fort. Un logo complet devient illisible à cette taille. Misez sur un contraste net entre le motif et le fond pour rester reconnaissable dans un onglet.
Mon image est-elle envoyée en ligne ?
Non. Les icônes sont générées dans votre navigateur à partir de votre fichier, rien n'est téléversé. Votre visuel reste sur votre appareil pendant toute l'opération.
Continuer la découverte