Nouplo

Générateur de favicon

Une image en entrée ; favicon.ico, apple-touch-icon, icônes de manifeste et balises à coller en sortie.

Déposez vos fichiers ici

ou cliquez pour les choisir sur votre appareilFormats acceptés : JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG

Jusqu'à 3 fichiers par opérationJusqu'à 20 Mo par fichier10 opérations par jourSupprimer les limites avec Pro✓ Fonctionne hors ligne

Vos fichiers restent sur votre appareil

Cet outil fonctionne entièrement dans votre navigateur. Rien n'est envoyé, rien n'est stocké, et vous pouvez même couper votre connexion internet avant de commencer.

Comment ça marche

  1. Ajoutez votre logo : un SVG carré de préférence, sinon un PNG ou un JPG d’au moins 512 × 512 px.
  2. Choisissez comment il se place dans le carré — l’image entière avec une marge éventuelle, ou le carré rempli — ainsi que la forme et le fond.
  3. Cliquez sur « Créer les favicons », puis téléchargez tout d’un coup en ZIP.
  4. Placez les fichiers à la racine de votre site et collez les balises de favicon-tags.html dans le <head> de vos pages.

Questions fréquentes

Quels fichiers vais-je obtenir, et à quoi sert chacun ?
favicon.ico contient 16, 32 et 48 px dans un seul fichier, pour les navigateurs et les robots qui demandent directement /favicon.ico. favicon-96x96.png sert aux résultats de recherche, où Google veut un multiple de 48 px. apple-touch-icon.png (180 px) est l’icône de l’écran d’accueil de l’iPhone et de l’iPad. Les deux PNG web-app-manifest et site.webmanifest servent à Android et aux applications web installées. Partir d’un SVG ajoute favicon.svg, et favicon-tags.html contient les lignes à coller dans le <head>.
J’ai choisi un fond transparent. Pourquoi l’apple-touch-icon ne l’est-il pas ?
Parce qu’iOS n’affiche pas la transparence sur l’écran d’accueil : il remplit les pixels transparents en noir et arrondit lui-même les coins. Ce fichier-là est donc toujours un carré plein et opaque, dans le fond choisi ou en blanc. Les autres icônes restent transparentes.
Faut-il partir d’un SVG ou d’un PNG ?
D’un SVG si vous en avez un. Chaque taille est alors dessinée à partir du vectoriel : l’icône de 16 px est dessinée à 16 px au lieu d’être réduite d’une grande image, et vous obtenez aussi favicon.svg, que les navigateurs récents préfèrent. En PNG ou JPG, partez d’au moins 512 × 512 px ; un logo très détaillé ne survit de toute façon pas à 16 px, d’où la marge et l’intérêt d’un signe plus simple.
Pourquoi Google affiche-t-il un globe au lieu de mon icône ?
Google doit pouvoir explorer l’icône et la page d’accueil qui la déclare, et l’icône doit être carrée, avec un côté multiple de 48 px — c’est à cela que sert le fichier de 96 px. Une fois les fichiers en ligne, les résultats de recherche peuvent mettre des jours, voire des semaines, à se mettre à jour.
Mon logo est-il envoyé quelque part ?
Non. Chaque fichier est dessiné dans cette page avec le canvas de votre navigateur, et le ZIP est assemblé ici aussi. Rien n’est envoyé à un serveur.

Outils associés