Qu'est-ce que Générateur de favicons multi-tailles ?

Importez une image — ou tapez 1 à 3 lettres ou un emoji — et obtenez toutes les tailles standard, du ICO 16×16 à l'icône App Store 1024×1024, plus un favicon.svg vectoriel. Inclut Apple Touch, Android Chrome, MS Tile et l'onglet épinglé Safari. Téléchargez-les une à une ou toutes ensemble en ZIP.

Partez de votre propre logo ou composez une icône rapide à partir de quelques lettres ou d'un emoji, avec vos couleurs et votre police. Le générateur sort 17 fichiers PNG distincts couvrant les tailles favicon classiques (16, 32, 48, 64, 96, 128, 256), les icônes Apple Touch (152, 167, 180), l'icône App Store 1024, Android Chrome (192, 384), MS Tile (144, 150, 310) et l'icône PWA 512. Filtrez la grille par plateforme, choisissez la forme de sortie carrée, arrondie ou circulaire, et vérifiez le favicon sur des onglets clairs et sombres avant de télécharger. Chaque ZIP contient aussi un favicon.ico multirésolution, un favicon.svg vectoriel, un extrait HTML prêt à coller et un manifest.json avec maskable purpose sur les tailles Android ; ajoutez un nom et un nom court pour le rendre installable en PWA.

Comment utiliser

1. Importez une image carrée haute résolution (au moins 512×512px) comme source, ou passez en mode texte et tapez 1 à 3 lettres ou un emoji pour en créer une instantanément.
2. Passez en revue toutes les tailles générées dans la grille. Activez ou désactivez celles dont vous avez besoin selon la plateforme.
3. Téléchargez une taille à l'unité, récupérez un favicon.ico multirésolution, ou cliquez sur « Tout télécharger » pour obtenir un ZIP avec toutes les tailles sélectionnées, le pack ICO, l'extrait HTML et le manifeste.

Quand l'utiliser

• Lancer un nouveau site et avoir besoin de favicons sur tous les navigateurs et systèmes.
• Refonte de marque : régénérer toutes les icônes PWA et d'écran d'accueil à partir du nouveau logo.
• Activer ajouter à l'écran d'accueil pour qu'Android rende une icône maskable correcte.

Résultat

Une agence web importe le nouveau logo d'un client pour une refonte de marque. Elle obtient 12 tailles pour navigateurs de bureau, iOS Safari, Android Chrome, vignettes Windows et icônes de manifeste PWA, prêtes à l'emploi.

FAQ

Quelle taille pour mon image source ?

Au moins 512x512 pixels, carrée, avec le logo centré et un peu de marge autour. En dessous, l'icône PWA 512 sera floue. Une source vectorielle (SVG rasterisé en PNG 1024) donne un meilleur rendu.

Pourquoi avoir des favicons PNG et ICO ?

Les navigateurs récents utilisent du PNG en plusieurs tailles via link rel='icon' et privilégient de plus en plus un unique SVG vectoriel. Le fichier .ico reste exigé par les vieux navigateurs Windows, certains hébergeurs et quelques parcours de sites épinglés. Ce générateur produit les trois : du PNG pour chaque taille moderne, un favicon.svg vectoriel et un favicon.ico regroupant les images 16, 32 et 48px.

Qu'est-ce qu'une icône maskable et pourquoi Android en a besoin ?

Android rogne les icônes de l'écran d'accueil en cercle, squircle ou carré arrondi selon le launcher. Une icône maskable a une zone sûre au centre (~80% du canevas) pour que les parties importantes du logo ne soient jamais coupées. Ajoutez ~10% de marge autour de la source.

Où placer les fichiers générés ?

Mettez chaque PNG à la racine public du site (ou /static), collez l'extrait HTML dans le head de la page, et liez le manifest.json. Apple Touch et favicon vont dans le head HTML ; les icônes PWA sont référencées par le manifest.

À quoi servent les options de fond et de padding ?

Les logos transparents passent bien dans les onglets mais paraissent décalés quand Android ou iOS ajoute son propre rectangle arrondi derrière. Combiner un fond uni et 8-12% de padding donne un rendu prévisible sur n'importe quel launcher.

Outils similaires