Aller au contenu
FlexiConvert

Générateur de favicon

Toutes les icônes de votre site à partir de votre logo, prêtes à mettre en ligne.

Autres outils : JPEG en JPG Compresser JPG Compresser PNG Compresser WebP Redimensionner une image Recadrer une image Fusionner des images

Un fichier à la fois, jusqu’à 20 Mo.

Ajustement au carré

Les icônes sont carrées. Si votre image ne l’est pas, choisissez si elle s’affiche en entier (avec des marges transparentes) ou si elle remplit le carré.

Pour l’icône Apple, qui ne peut pas être transparente, et comme couleur du thème sur Android.

Vos fichiers sont supprimés automatiquement après la conversion, et au plus tard une heure après leur envoi. Comment nous traitons vos fichiers

Créez le favicon complet de votre site à partir de votre logo : l’icône de l’onglet du navigateur, celles de l’écran d’accueil de l’iPhone et d’Android, le manifeste et le code HTML pour les relier. Envoyez une image PNG, JPG, WebP ou SVG et téléchargez un ZIP contenant tout, sans inscription et sans filigrane.

Comment créer un favicon

  1. Sélectionnez votre logo ou icône en PNG, JPG, WebP ou SVG, de préférence carré et d’au moins 512 pixels.
  2. Choisissez si l’image s’affiche en entier ou remplit le carré, et la couleur de fond de l’icône Apple.
  3. Cliquez sur « Créer le favicon » et téléchargez le ZIP.
  4. Mettez les fichiers à la racine de votre site et collez le code de head.html dans la balise head de vos pages.

Ce que contient le paquet

Fichier À quoi il sert
favicon.ico L’icône classique de l’onglet, avec les tailles 16, 32 et 48 pixels dans un seul fichier. Les navigateurs la cherchent même si vous ne la reliez pas.
favicon-16x16.png et favicon-32x32.png Les icônes de l’onglet et des favoris dans les navigateurs récents.
apple-touch-icon.png L’icône de 180 pixels qu’utilisent l’iPhone et l’iPad quand on ajoute votre site à l’écran d’accueil.
android-chrome-192x192.png et android-chrome-512x512.png Les icônes d’Android et des applications web installables.
site.webmanifest Le manifeste qui déclare les icônes Android et la couleur de votre site.
head.html Les balises pour relier les icônes depuis vos pages.

Comment l’installer sur votre site

  1. Décompressez le ZIP et mettez tous les fichiers, sauf head.html, à la racine de votre site (là où se trouve la page d’accueil).
  2. Copiez ces balises, qui figurent aussi dans head.html, dans la balise head de vos pages :
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
  1. Si vous le souhaitez, indiquez le nom de votre site dans name et short_name dans site.webmanifest.

Les navigateurs gardent le favicon en cache : si vous ne voyez pas le nouveau tout de suite, actualisez la page en forçant le rechargement ou patientez un peu.

Contenir ou remplir

Toutes les icônes sont carrées. Si votre image ne l’est pas, vous pouvez la contenir, pour qu’elle s’affiche en entier avec des marges transparentes, ou remplir le carré, en recadrant ce qui dépasse sur les côtés. Pour un logo horizontal avec du texte, il vaut souvent mieux n’utiliser que le symbole du logo, recadré en carré.

L’icône Apple ne peut pas être transparente : iOS remplirait le fond en noir. C’est pourquoi nous la créons avec la couleur de fond que vous choisissez, également utilisée comme couleur de votre site sur Android. Les autres icônes conservent leur transparence.

Conseils pour un bon résultat

  • Partez d’une grande image, d’au moins 512 × 512 pixels, ou mieux encore d’un SVG : les petites icônes sont calculées à partir d’elle.
  • Simplifiez : à 16 pixels, les textes et les détails fins ne se lisent pas. Un symbole ou une initiale aux couleurs contrastées fonctionne bien mieux.

Si vous n’avez besoin que du fichier .ico, vous pouvez convertir votre PNG en ICO.

Limites

  • Une image à la fois, jusqu’à 20 Mo et 100 mégapixels.
  • Nous ne modifions pas votre site : vous devez mettre les fichiers en ligne et ajouter les balises vous-même, ou le demander à la personne qui le gère.

Questions fréquentes

Quelle taille doit faire l’image pour créer un favicon ?

Plus elle est grande, mieux c’est : au moins 512 × 512 pixels, ou un SVG. Toutes les icônes, de 512 à 16 pixels, sont calculées à partir d’elle.

Où dois-je mettre les fichiers du favicon ?

À la racine de votre site, dans le même dossier que la page d’accueil. Collez ensuite les balises de head.html dans la balise head de vos pages.

Pourquoi je ne vois pas le nouveau favicon dans mon navigateur ?

Parce que les navigateurs gardent le favicon en cache. Actualisez la page en forçant le rechargement, ouvrez-la dans une fenêtre privée ou patientez un peu.

Pourquoi l’icône Apple a-t-elle un fond de couleur ?

Parce qu’iOS n’accepte pas la transparence dans les icônes de l’écran d’accueil et remplirait le fond en noir. Nous la créons avec la couleur de fond choisie pour un bon rendu.

Puis-je créer le favicon de mon site sous WordPress ?

WordPress a sa propre option, l’« Icône du site » (dans Apparence › Personnaliser › Identité du site ou, selon la version et le thème, dans les réglages généraux) : vous envoyez une image carrée et il crée les tailles lui-même. Le paquet de cet outil est destiné aux sites sur lesquels vous pouvez mettre des fichiers en ligne et modifier le code.

Convertissez aussi vos fichiers PNG, JPG, WebP ou SVG