Générateur de favicon — toutes les tailles d’un site

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

Quelle taille doit faire un favicon ?

Un favicon.ico contient 16 × 16, 32 × 32 et 48 × 48 pixels ; les appareils Apple utilisent un PNG de 180 × 180, Android et les applications web du 192 × 192 et du 512 × 512. Google affiche l’icône des résultats de recherche en 48 × 48 ou un multiple, d’où le PNG de 96 px. Ce générateur les crée toutes à partir d’une seule image.

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>.

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.

Que contient site.webmanifest, et pourquoi mon nom est-il coupé ?

Le nom du site (name), un nom court (short_name) affiché sous l’icône sur Android, les deux icônes de 192 et 512 px et la couleur du fond choisi (#ffffff pour un fond blanc ou transparent). Le nom court est limité à 12 caractères : « Les Herbes de Margot » devient « Les Herbes », coupé après le dernier mot entier. Choisissez un nom de 12 caractères au plus, ou corrigez short_name à la main dans le fichier.

Pourquoi l’icône Apple n’a-t-elle ni transparence ni coins arrondis ?

Parce que l’iPhone remplit en noir les zones transparentes et arrondit lui-même les coins de l’icône. apple-touch-icon.png est donc toujours un carré plein de 180 × 180, sur la couleur de fond choisie, ou sur du blanc si vous avez choisi « Transparent ». Les autres fichiers gardent la forme et le fond réglés.

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.