Générateur de favicon : ICO, icônes PNG et manifest

Un favicon est la petite icône qui apparaît dans les onglets du navigateur, les favoris, l'historique et les résultats de recherche à côté du nom de votre site. Sur téléphone, des versions plus grandes apparaissent sur l'écran d'accueil quand quelqu'un enregistre votre site. Une icône claire rend votre site facile à repérer parmi des dizaines d'onglets ouverts et fait plus professionnel.

Chaque emplacement demande ses propres tailles et formats. Les navigateurs cherchent toujours favicon.ico, les appareils Apple utilisent un PNG de 180 px, Android et les applications web installables lisent les icônes d'un manifest web, et les moteurs de recherche préfèrent des icônes d'au moins 48 px.

Les tailles nécessaires

Les tailles de favicon expliquées en une ligne chacune : 16 et 32 px pour les onglets, 48 px pour Windows et les résultats de recherche, 180 px pour les icônes Apple touch, 192 et 512 px pour Android et les manifests d'applications web. Ce générateur les crée toutes, plus des versions de 64, 96, 128, 256 et 384 px pour d'autres usages.

Ajoutez un logo, idéalement carré et d'au moins 512 par 512 pixels. Un PNG à fond transparent ou un SVG donne les résultats les plus nets. Choisissez un fond transparent ou uni, ajoutez une marge si le visuel touche les bords, et arrondissez les coins pour une icône style application. Les aperçus montrent l'icône à 16, 32, 48 et 180 px sur fonds clair et sombre, pour juger du rendu dans de vrais onglets.

Saisissez le nom de votre application et la couleur du thème pour le manifest, puis appuyez sur Télécharger le pack favicon. Vous pouvez aussi télécharger seulement le favicon.ico ou un PNG de 512 px.

Partir d'un PNG

Pour créer un favicon à partir d'un PNG, partez de la plus grande version disponible. Réduire une grande image donne de petites icônes nettes, alors qu'agrandir une image minuscule donne du flou. Si votre logo est large, utilisez seulement son symbole ou son initiale, car le texte devient illisible à 16 px.

favicon.ico

Le fichier favicon.ico est créé par une conversion PNG en ICO qui stocke des images de 16, 32 et 48 px dans un seul fichier. Les navigateurs récents et Windows lisent les icônes compressées en PNG, ce qui garde un fichier léger et des contours propres.

Appareils Apple

La taille de l'icône Apple touch est de 180 par 180 pixels. iOS remplit les zones transparentes en noir : quand votre fond est transparent, le générateur donne automatiquement à cette icône un fond uni avec votre couleur de thème.

Android et applications web

Les icônes du manifest web dans site.webmanifest sont des PNG de 192 et 512 px, dont une version maskable pour Android, qui découpe les icônes en cercles ou carrés arrondis. Gardez l'essentiel du visuel dans les 80 % centraux de l'icône pour que rien ne soit coupé.

Décompressez le pack et importez les fichiers dans le dossier racine de votre site, au même endroit que votre page d'accueil. Copiez ensuite l'extrait HTML dans la section head de chaque page, ou dans votre modèle de site. L'extrait référence l'ICO, les PNG de 16 et 32 px, l'icône Apple et le manifest.

Les créateurs de sites et CMS proposent souvent plutôt un réglage d'icône du site. Dans ce cas, importez-y le PNG de 512 px et la plateforme créera elle-même les autres tailles.

Dépannage

Si votre favicon ne s'affiche pas après l'envoi, le navigateur utilise peut-être une version en cache. Ouvrez directement l'URL de l'icône, puis rechargez la page en forçant l'actualisation, ou essayez une fenêtre privée. Les moteurs de recherche peuvent mettre des jours, voire des semaines, à mettre à jour l'icône dans les résultats.

Simplifiez. À 16 par 16 pixels, les traits fins et les petits textes disparaissent. Utilisez un symbole fort, une seule lettre ou une version simplifiée de votre logo, avec un contraste marqué. Vérifiez les aperçus clair et sombre : un logo foncé sur fond transparent peut disparaître sur un thème sombre, bonne raison d'ajouter un fond uni ou un contour clair.

La cohérence compte aussi. Utilisez les couleurs de votre marque, que vous pouvez prélever avec notre pipette de couleur, et gardez l'icône reconnaissable à toutes les tailles.

Les images sont traitées dans votre navigateur et jamais importées. Les fichiers SVG sont débarrassés des scripts et références externes avant le rendu. Les entrées PNG, JPG, WebP, GIF et SVG sont prises en charge. L'outil est gratuit et illimité et n'utilise pas de crédits EnhancerPro.

Étapes suivantes

Si votre logo n'existe qu'en image matricielle, notre convertisseur d'image en SVG peut en créer une version vectorielle, et notre outil SVG en PNG exporte les logos vectoriels à toute taille.

Onglets du navigateur

Les navigateurs de bureau affichent généralement l'icône de 16 ou 32 px dans les onglets, et la version 32 px sur les écrans haute résolution. Chrome et Edge utilisent aussi les icônes PNG plus grandes pour les raccourcis et la page Nouvel onglet. Ces tailles étant minuscules, vérifiez soigneusement l'aperçu 16 px ; si l'icône paraît brouillonne, simplifiez le visuel ou augmentez légèrement la marge.

Résultats de recherche

Les moteurs de recherche affichent un favicon à côté de votre site dans les résultats, sur mobile comme sur ordinateur. Ils préfèrent une icône carrée de taille multiple de 48 px, accessible à leurs robots. Référencer les icônes dans le head de votre page d'accueil, comme dans l'extrait généré, est la méthode standard pour qu'ils les trouvent facilement.

Écrans d'accueil

Quand on ajoute votre site à l'écran d'accueil d'un téléphone, l'iPhone utilise l'icône Apple touch et Android les icônes du manifest. Les deux rendent mieux avec un fond uni et un peu de marge, pour que le symbole ne touche pas les coins arrondis ajoutés par le système.

Mode sombre

Beaucoup de gens utilisent des thèmes de navigateur sombres. Un logo noir sur fond transparent y disparaît. L'aperçu sombre de l'outil le montre immédiatement. Un fond de couleur unie, un contour clair ou une version bicolore du logo gardent l'icône visible partout.

Mettre à jour une icône existante

Quand vous remplacez un favicon, gardez les mêmes noms de fichiers pour que les liens existants continuent de fonctionner. Les navigateurs mettent les icônes en cache de façon agressive : la nouvelle peut mettre du temps à apparaître pour les visiteurs réguliers. Ajouter un paramètre de version, comme favicon.ico?v=2, aux liens de votre HTML force le navigateur à récupérer les nouveaux fichiers.

Liste de vérification avant publication

Avant de publier, vérifiez quatre points. Le fichier favicon.ico s'ouvre dans un navigateur à l'adresse votre-domaine/favicon.ico. L'extrait HTML se trouve dans le head de votre page d'accueil. L'icône Apple a un fond uni et rend bien quand vous ajoutez le site à l'écran d'accueil d'un iPhone. Le nom et la couleur de thème du manifest correspondent à votre marque. Ces points réglés, votre icône apparaîtra de façon cohérente dans les onglets, favoris, résultats de recherche et écrans d'accueil, et les visiteurs reconnaîtront votre site d'un coup d'œil.

Conserver les fichiers sources

Gardez le logo d'origine et le ZIP ensemble dans votre projet. Quand vous changerez de couleurs ou de logo, vous pourrez régénérer tout le jeu en une minute avec les mêmes réglages, et chaque taille restera cohérente. Notez aussi la couleur de thème utilisée, pour que le manifest et les icônes correspondent de nouveau à votre marque. Un dossier bien rangé avec le logo, les réglages et les fichiers générés fait gagner du temps à quiconque maintiendra le site après vous, y compris vous-même plus tard.