Déposez une image ici ou cliquez pour parcourir
PNG, JPG, SVG — recommandé 512×512 px ou plus grand
| Size | Filename | Use case |
|---|---|---|
| 16×16 | favicon-16x16.png | Browser tab (most common) |
| 32×32 | favicon-32x32.png | Browser tab (HiDPI), taskbar shortcut |
| 48×48 | favicon.ico (embedded) | Windows taskbar pinned sites |
| 57×57 | favicon-57x57.png | iOS non-retina home screen (legacy) |
| 72×72 | favicon-72x72.png | iPad non-retina (legacy) |
| 96×96 | favicon-96x96.png | Android, Google TV |
| 114×114 | favicon-114x114.png | iPhone retina (legacy) |
| 144×144 | favicon-144x144.png | iPad retina, Windows 8 tile |
| 152×152 | favicon-152x152.png | iPad retina (iOS 7+) |
| 180×180 | apple-touch-icon.png | iPhone / iPad modern (iOS 8+) |
| 192×192 | android-chrome-192x192.png | Android Chrome, PWA manifest |
| 512×512 | android-chrome-512x512.png | PWA splash screen, maskable icon |
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> <link rel="manifest" href="/site.webmanifest" />
Les navigateurs modernes ont besoin de : 16×16 et 32×32 (onglet/raccourci navigateur), 48×48 (barre des tâches Windows), 57×57 et 72×72 (iOS non-retina), 96×96 (Android Chrome), 114×114 et 144×144 (iOS/Android retina), 152×152 et 180×180 (écran d'accueil iOS), 192×192 et 512×512 (PWA splash/masquable).
Utilisez un PNG ou SVG carré de 512×512 px ou plus pour de meilleurs résultats. Évitez les images avec des détails importants près des bords. SVG est idéal car il s'adapte sans perte de qualité.
Oui, si vous voulez que votre site soit installable en tant que Progressive Web App (PWA). Le webmanifest contient le nom, les chemins d'icônes et la couleur de fond pour l'écran de démarrage de l'app.
Placez tous les fichiers générés à la racine de votre site et ajoutez ces balises à votre head HTML : '<'link rel='icon' href='/favicon.ico'>, '<'link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>, '<'link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>, et '<'link rel='manifest' href='/site.webmanifest'>.