Générateur de favicon

Qu'est-ce qu'un favicon ?

C'est la petite icône qui représente un site dans l'onglet du navigateur, les favoris, l'historique, les résultats de recherche sur mobile et l'écran d'accueil d'un téléphone lorsqu'on y épingle le site. Sans favicon, le navigateur affiche une icône générique, ce qui fait paraître un site inachevé.

Créer votre favicon

Choisissez une image, idéalement carrée, d'au moins 512 × 512 pixels. Toolo génère :

• un fichier favicon.ico, le format historique reconnu partout ;
• un pack de PNG aux tailles modernes, téléchargeable en ZIP.

Installer les fichiers

Placez favicon.ico à la racine de votre site : les navigateurs le cherchent automatiquement à l'adresse /favicon.ico. Ajoutez ensuite dans le <head> de vos pages les balises correspondantes, par exemple :

• <link rel="icon" href="/favicon.ico" sizes="any">
• <link rel="apple-touch-icon" href="/apple-touch-icon.png">

Pour une application web installable, déclarez les icônes 192 et 512 dans votre fichier manifest.webmanifest.

Réussir une icône minuscule

• Simplifiez : à 16 pixels, un logo détaillé devient une tache. Une lettre, un symbole ou une forme simple fonctionne mieux.
• Contrastez : l'icône doit rester lisible sur un onglet clair comme sur un onglet sombre.
• Occupez la surface : laissez peu de marge autour du motif.

Mon nouveau favicon ne s'affiche pas

Les navigateurs gardent les favicons longtemps en cache. Rechargez la page en forçant le rafraîchissement, ouvrez le site en navigation privée, ou ajoutez un paramètre de version à l'adresse, comme /favicon.ico?v=2.

Comment créer un favicon, étape par étape

1. Préparez l'image source : un carré d'au moins 512 × 512 pixels, en PNG transparent si possible. Un logo simple ou une seule lettre reste lisible à 16 pixels.
2. Générez les fichiers : déposez l'image plus haut, puis téléchargez le favicon.ico (16, 32 et 48 px réunis dans un seul fichier) et le pack PNG en ZIP, qui contient favicon-16x16.png jusqu'à favicon-512x512.png.
3. Mettez-les en ligne à la racine du site : favicon.ico, favicon-32x32.png, favicon-192x192.png, favicon-512x512.png, et favicon-180x180.png renommé en apple-touch-icon.png.
4. Déclarez-les dans le <head> de chaque page.

Les balises HTML à copier

• <link rel="icon" href="/favicon.ico" sizes="any">
• <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
• <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
• <link rel="manifest" href="/manifest.webmanifest">, seulement si votre site a un manifeste, dans lequel vous listez les PNG 192 et 512 pour Android.

WordPress, Shopify : le réglage « icône du site »

Sur un CMS, inutile de toucher au code. Dans WordPress, l'icône du site se règle dans Apparence > Personnaliser > Identité du site, ou depuis le bloc Logo du site avec un thème à blocs : envoyez le PNG 512 px, WordPress crée lui-même les balises. Dans Shopify, ouvrez Boutique en ligne > Thèmes > Personnaliser, puis les paramètres du thème, rubrique Logo ou Favicon selon le thème.

Pourquoi l'ancien favicon s'affiche encore

En plus du cache du navigateur, un plugin de cache ou un CDN peut servir l'ancien fichier : videz-le après le changement. Dans les résultats de Google, le favicon n'est mis à jour qu'au prochain passage du robot sur votre page d'accueil, ce qui peut prendre plusieurs jours.

Questions fréquentes

Faut-il une image carrée ?

Idéalement oui. Une image non carrée sera adaptée, ce qui peut la déformer légèrement. Recadrez-la d'abord en carré avec l'outil Recadrer une image.

Mon image est-elle envoyée sur un serveur ?

Non. Les icônes sont générées dans votre navigateur ; l'image ne quitte pas votre appareil.

Un PNG transparent est-il conservé ?

Oui. La transparence est conservée dans le fichier ICO comme dans les PNG.

Faut-il vraiment toutes les tailles ?

Le favicon.ico suffit pour les onglets. Les PNG 180, 192 et 512 améliorent l'affichage sur l'écran d'accueil des téléphones et pour les applications web.

Quelles balises HTML faut-il pour un favicon ?

Au minimum <link rel="icon" href="/favicon.ico" sizes="any"> et <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Ajoutez la version PNG 32 px et un manifeste si vous voulez couvrir Android et les applications web.

Quelle taille pour l'icône du site WordPress ?

WordPress demande une image carrée d'au moins 512 × 512 pixels : utilisez le fichier favicon-512x512.png du pack.

Le pack contient-il un fichier manifest ?

Non, le ZIP contient uniquement les images PNG. Si votre site a besoin d'un manifeste, créez le fichier manifest.webmanifest et indiquez-y les PNG 192 et 512 px.