Une image. Chaque écran.

Convertisseur SVG en favicon

Petites icônes. Une impression durable.

Transformez des SVG sûrs en icônes ICO et PNG. Vérifiez le rendu matriciel en petit format et exportez le pack en local.

PNG ICO PWA

Créez votre pack d’icônes

Transformez votre image en favicons, icônes de l'application et plus encore.

1Importer
2Ajuster
3Télécharger

En attente d’une image

Déposez votre image ici

SVG · Jusqu’à 5 MB

Votre image est traitée dans le navigateur et ne quitte jamais votre appareil.

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

Ajustez votre icône

Affinez le rendu pour chaque écran.

Ajustement de l'image

Arrière-plan

Transparent

Couleur unie

#FFFFFF

Marge intérieure6%

Rayon des coins0%

Tailles de l'ICO (plusieurs choix possibles)

256

Icônes adaptatives

Voir en contexte(importez une image pour voir votre icône)

Onglet du navigateur

https://example.com

Écran d'accueil iOS

Votre icône ici

PWA / Android

Votre icône ici

Comment faire un favicon en 3 étapes

D'une image à un ensemble complet d'icônes.

1Importez votre image

Transformez des SVG sûrs en icônes ICO et PNG. Vérifiez le rendu matriciel en petit format et exportez le pack en local.

2Ajuster et prévisualiser

Choisissez l’ajustement, le fond et la marge intérieure. Vérifiez le résultat en petite taille.

3Télécharger et ajouter à votre site

Exportez le pack d’icônes, importez les fichiers sur votre site et ajoutez les liens des icônes au HTML.

Un logo, prêt pour chaque écran

Voir où les fichiers générés sont utilisés.

Favicon du site Web

Mon site×

16 × 16

32 × 32

Les icônes de 16 × 16 et 32 × 32 aident à reconnaître votre site dans les onglets et les favoris.

iPhone & iPad

Mon site

180 × 180

Utilisez une icône apple-touch de 180 × 180 lorsque votre site est ajouté à l’écran d’accueil.

PWA & Android

Installer l'application

192 × 192

512 × 512

Les images de 192 × 192 et 512 × 512 sont des tailles courantes dans les manifestes d’applications web.

Qu'y a-t-il dans votre pack d'icônes ?

Un ensemble d'icônes prêtes à l'emploi pour toutes les plateformes.

favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
apple-touch-icon.png180 × 180
icon-192.png192 × 192
icon-512.png512 × 512
site.webmanifestManifeste de l'application Web

Ajouter des icônes à votre site Web

Placez ces liens dans le <head> de votre HTML.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Décompressez le pack dans public/ à la racine du projet Nuxt. Conservez les noms et placez site.webmanifest à côté de favicon.ico, pas dans app/.
Ajoutez le code au bloc script setup de app/app.vue. Remplacez les liens vers les anciennes icônes, puis reconstruisez et publiez votre projet.

useHead({
  "link": [
    {
      "rel": "icon",
      "type": "image/x-icon",
      "href": "/favicon.ico"
    },
    {
      "rel": "apple-touch-icon",
      "sizes": "180x180",
      "href": "/apple-touch-icon.png"
    },
    {
      "rel": "manifest",
      "href": "/site.webmanifest"
    }
  ]
})

Ouvrez /favicon.ico, /apple-touch-icon.png et /site.webmanifest sur votre site. Vérifiez les réponses réussies et les données image ou JSON réelles. Un statut 200 avec une page d’erreur HTML indique aussi un chemin incorrect. Vérifiez chaque URL d’icône du manifeste.

Si l’ancienne icône reste, cherchez les liens en double dans head, désactivez le cache dans les outils du navigateur et rechargez. Vérifiez aussi les caches CDN et service worker utilisés. Comparez les aperçus réels de 16 et 32 pixels : simplifiez les petits textes et traits fins.

Ces fichiers fournissent des icônes et des métadonnées de manifeste. Ils ne suffisent pas à créer une PWA installable. Cet exemple suppose un déploiement à la racine du domaine ; dans un sous-dossier, adaptez tous les liens et chemins des icônes du manifeste.

Nuxt 4 · public/ · Nuxt 4 · useHead

Convertisseur SVG en favicon

Transformez des SVG sûrs en icônes ICO et PNG. Vérifiez le rendu matriciel en petit format et exportez le pack en local.

Les tracés SVG sûrs restent vectoriels. Les images matricielles et de texte ne sont pas vectorisées.

Le SVG doit contenir un dessin sûr et autonome.

Démarrer la création

Questions fréquentes

Qu’est-ce qu’un favicon ?

Une petite image qui représente votre site dans les onglets et les favoris du navigateur.

Quel format d’image utiliser ?

PNG convient aux logos transparents. Vous pouvez aussi utiliser JPG, WebP et des fichiers SVG sécurisés.

Puis-je utiliser une image non carrée ?

Oui. Choisissez Ajuster, Recadrer ou Étirer pour créer une icône carrée.

Pourquoi inclure plusieurs tailles d’icône ?

Les navigateurs et les écrans d’accueil utilisent des tailles différentes. Les petites icônes restent nettes dans les onglets ; les grandes conviennent aux raccourcis d’application.