Aller au contenu

Générateur de favicon

Favicon Generator

Produit le jeu complet — ICO, PNG, icône Apple touch, manifeste web — accompagné du HTML à coller dans votre page.

Un favicon a cessé d’être un seul fichier il y a quelques années : un site a besoin du .ico pour la requête à la racine, de PNG à trois tailles pour les barres d’onglets, d’une icône tactile Apple parce qu’iOS ignore le manifeste, et d’une icône masquable parce qu’Android recadre selon une forme qu’il choisit. Cet outil produit tout cela, le manifeste, et le balisage à coller.

🔒 Fonctionne entièrement dans votre navigateurfaviconwebicongenerator

Déposez votre logo

Un PNG carré de 512×512 ou plus donne le meilleur résultat. Un SVG doit être rastérisé au préalable.

Comment s’en servir

  1. Déposez un logo carré, de 512 px ou plus

    Tout est dérivé par réduction : la plus grande icône du jeu vaut ce que valait votre point de départ, et pas mieux.

  2. Renseignez le nom et le nom court

    Le nom court est ce qui apparaît sous l’icône sur un écran d’accueil, et Android comme iOS le coupent autour de douze caractères.

  3. Choisissez les couleurs de thème et d’écran de lancement

    Elles vont dans le manifeste : la couleur de thème teinte l’interface du navigateur sur Android, le fond est ce qu’une PWA lancée affiche avant de peindre.

  4. Prenez le zip et collez le balisage

    Les fichiers vont à la racine du site ; le bloc `<link>` va dans `<head>`. Les deux sont produits ensemble pour que les chemins concordent.

Questions fréquentes

À quoi sert l’icône masquable ?

Android recadre les icônes d’écran d’accueil selon une forme que l’appareil choisit — cercle, carré arrondi, goutte — et ne garantit que les 80 % centraux. L’icône masquable reçoit toujours 10 % de marge, quel que soit votre réglage de marge, pour que le recadrage ne puisse pas atteindre le dessin.

Puis-je utiliser un favicon SVG à la place ?

Vous pouvez en ajouter un, et c’est la plus belle option là où elle fonctionne — mais elle ne remplace pas le jeu. Safari sur iOS veut l’icône tactile, Android veut les icônes du manifeste, et le .ico à la racine est demandé quoi qu’il arrive. Rastérisez d’abord le SVG et déposez le PNG ici.

Quelle marge dois-je utiliser ?

Aucune pour une marque conçue pour remplir son cadre ; dix à quinze pour cent pour un logotype qui a besoin d’air à 16 px. Les tailles de barre d’onglets sont là où la marge coûte le plus cher, parce qu’il y a si peu de place à céder.

À alimenter depuis

Ensuite

Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.