Quelles tailles génère-t-il ?

Des favicons de 16, 32 et 48 px, une icône Apple touch de 180 px et des icônes de 192 et 512 px pour Android et les PWA.

Qu'est-ce que je télécharge ?

Un seul zip avec chaque taille en PNG, un site.webmanifest prêt à l'emploi et les balises HTML exactes à coller dans l'en-tête de votre page.

Mon logo est-il envoyé ?

Non : chaque taille est générée localement dans votre navigateur.

Générateur de favicon

Une image → toutes les tailles de favicon, un manifeste web et l'extrait HTML. Dans votre navigateur.

Chargement de l'outil…

Comment créer un favicon

Importez votre logo et cutbg le génère dans toutes les tailles dont ont besoin les navigateurs et les téléphones — de 16 à 512 px, plus l'icône Apple touch — regroupées dans un zip avec un manifeste web prêt à l'emploi et les balises HTML exactes à coller.

Privé par défaut

Tout est généré localement dans votre navigateur ; votre image n'est jamais envoyée.

Tailles de favicon et fichiers à prévoir pour un site

Ce que contient favicons.zip

Importez une image et le générateur produit, dans votre navigateur, tous les fichiers dont un site actuel a besoin :

Fichier	Taille	Utilisé par
`favicon.ico`	16, 32 et 48 px dans un seul fichier	Onglets, favoris, Windows, tout outil qui demande `/favicon.ico`
`favicon-16x16.png`	16×16	Onglets sur écrans standard
`favicon-32x32.png`	32×32	Onglets sur écrans haute densité, raccourcis
`favicon-48x48.png`	48×48	Résultats Google, raccourcis bureau
`apple-touch-icon.png`	180×180	« Sur l'écran d'accueil » sur iPhone et iPad
`android-chrome-192x192.png`	192×192	Écran d'accueil Android
`android-chrome-512x512.png`	512×512	Sites installés comme appli (PWA) et écran de démarrage
`site.webmanifest`	—	Indique à Android/Chrome où se trouvent les deux grandes icônes
`README-favicon.html`	—	Les balises HTML à coller

Quelle image de départ choisir

Carrée, simple, marquée. À 16 px, vous disposez de 256 pixels en tout. Un logo complet avec slogan devient une tache ; une lettre ou un symbole reste lisible. Beaucoup de marques utilisent une version simplifiée réservée au favicon.
Au moins 512×512. La plus grande icône fait 512 px : une image plus petite sera agrandie et paraîtra floue. Un logo SVG est idéal, il est rendu en haute résolution avant réduction.
PNG transparent ou SVG. La transparence est conservée dans le .ico et les petits PNG, l'icône s'intègre donc aux thèmes clairs comme sombres.
Image pas carrée ? Elle est placée dans le carré sans recadrage, avec des bandes transparentes sur les côtés. Pour remplir le carré, recadrez-la d'abord ou faites une version ronde avec Recadrage en cercle.

Le fond de l'icône Apple touch

iOS n'accepte pas la transparence sur les icônes de l'écran d'accueil : les zones transparentes deviennent noires. Le fichier apple-touch-icon.png (180×180) reçoit donc toujours un fond plein. Il est blanc par défaut ; le champ couleur à côté de la zone d'import permet de choisir la couleur de votre marque (la pipette couleur peut la relever sur votre logo). Les autres tailles restent transparentes.

Où placer les fichiers

Décompressez et envoyez tous les fichiers à la racine du site, pour que https://votresite.fr/favicon.ico affiche l'icône.
Collez les balises de README-favicon.html dans le <head> de chaque page (ou dans le modèle d'en-tête de votre thème) :

<link rel="icon" href="/favicon.ico" sizes="any">
<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Si le site est dans un sous-dossier, adaptez les chemins.

Sous WordPress, Apparence → Personnaliser → Identité du site → Icône du site s'en charge avec une seule image de 512×512 : utilisez android-chrome-512x512.png. Shopify, Wix ou Squarespace proposent un champ « favicon » équivalent.

Le site.webmanifest fourni ne liste que les icônes. Pour que vos visiteurs puissent installer le site comme une appli, ajoutez name, short_name, theme_color, background_color et "display": "standalone".

« J'ai changé le favicon mais je vois toujours l'ancien »

Les favicons sont mis en cache plus obstinément que presque tout le reste.

Ouvrez directement https://votresite.fr/favicon.ico et forcez le rechargement (Ctrl + F5, ou Cmd + Maj + R sur Mac).
Ajoutez une version aux liens, par exemple href="/favicon.ico?v=2", pour que le navigateur le considère comme un nouveau fichier.
Videz le cache de votre CDN ou de votre extension de cache le cas échéant.
Les favoris et raccourcis d'écran d'accueil gardent l'ancienne icône jusqu'à ce qu'on les recrée.
Google ne met à jour l'icône dans ses résultats qu'après avoir recrawlé votre page d'accueil, ce qui peut prendre des jours voire des semaines. Google demande une icône carrée dont le côté est un multiple de 48 px : le PNG 48×48 et le .ico y répondent.

Outils liés

Supprimez le fond d'une photo avant d'en faire une icône : Supprimer l'arrière-plan.
Logo en WebP ? Convertissez-le en PNG si votre logiciel ne l'ouvre pas.
Besoin d'une simple image 512×512 pour une boutique ou un profil ? Redimensionner en 512×512.

Outils associés

Image en PDF Recadrer une image Pivoter et retourner une image Pipette à couleurs d'image

Questions fréquentes

Quelles tailles génère-t-il ?: Des favicons de 16, 32 et 48 px, une icône Apple touch de 180 px et des icônes de 192 et 512 px pour Android et les PWA.
Qu'est-ce que je télécharge ?: Un seul zip avec chaque taille en PNG, un site.webmanifest prêt à l'emploi et les balises HTML exactes à coller dans l'en-tête de votre page.
Mon logo est-il envoyé ?: Non : chaque taille est générée localement dans votre navigateur.