Une image. Chaque écran.

Convertisseur PNG en ICO

Petites icônes. Une impression durable.

Convertissez un PNG en ICO multitailles. Préservez la transparence, vérifiez les petits aperçus et téléchargez les icônes 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

PNG · 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

Convertissez un PNG en ICO multitailles. Préservez la transparence, vérifiez les petits aperçus et téléchargez les icônes 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