Générer favicon et icônes d'app pour votre site

Publié le 2026-02-27 · 3 min de lecture

#Favicon #PWA #Design

Tout projet sérieux a besoin d’un favicon clair dans l’onglet du navigateur, d’une icône Apple touch pour iOS et d’icônes d’app pour Android et PWA. Cet outil permet de tout générer à partir d’une seule image : uploadez un logo carré, choisissez les tailles, téléchargez les PNG et copiez le snippet HTML dans votre site.

Pourquoi le favicon et les icônes d’app comptent

Favicon — la petite icône dans l’onglet du navigateur et les favoris. Sans elle, l’onglet reste générique et votre marque est moins reconnaissable.
Icône Apple touch — utilisée quand l’utilisateur ajoute votre site à l’écran d’accueil sur iPhone et iPad. La bonne taille (ex. 180×180) assure une icône nette.
Icônes PWA / Android — nécessaires pour « Ajouter à l’écran d’accueil » et l’installation. Tailles typiques : 192×192 et 512×512.

Une seule image carrée peut couvrir tout ça. Le générateur s’exécute entièrement dans le navigateur : votre logo ne quitte pas votre appareil.

Image source recommandée

Utilisez une image carrée (PNG ou SVG) d’au moins 512×512 pixels. Une résolution plus haute convient ; l’outil redimensionne. Évitez les images trop petites ou déformées pour garder des icônes nettes sur les écrans haute densité.

Prise en main rapide

Upload — Cliquez sur « Choisir un fichier » et sélectionnez votre logo (PNG ou SVG, carré, 512×512 ou plus).
Fond — Choisissez une couleur de fond si votre logo a de la transparence ; elle sert aussi de theme-color dans le snippet.
Tailles — Cochez les tailles dont vous avez besoin (favicon 16/32, Apple 180, PWA 192/512, etc.).
Télécharger — Cliquez sur une prévisualisation pour télécharger cette taille en PNG, ou « Tout télécharger en ZIP » pour tout récupérer d’un coup.
Snippet — Copiez le bloc HTML et collez-le dans le <head> de votre site. Uploadez les PNG sur votre serveur (ex. /assets/icons/) et adaptez les chemins dans le snippet si besoin.

Où mettre les fichiers

Configuration courante :

Mettez les PNG favicon et icônes dans un dossier comme /assets/icons/ ou à la racine.
Mettez à jour le snippet pour que les href pointent vers ces chemins (ex. /assets/icons/favicon-32x32.png).
Ajoutez un site.webmanifest pour la PWA avec les mêmes chemins vers les icônes 192×192 et 512×512.

En résumé

Le générateur de favicon et icônes d’app permet de passer d’un logo à toutes les tailles nécessaires et à un snippet prêt à coller dans le <head>. Utilisez une image carrée en bonne résolution, téléchargez les PNG et intégrez le snippet dans votre projet.