générateur de favicon en ligne gratuit

pour créer facilement vos icônes de site multi-résolution et vos images pour les icônes de favoris

: favicon.ico multi-résolution (16x16 à 48x48), favicon animé (GIF), favicon 16x16px, 32x32px, 48x48px et 96x96px (PNG)
: favicon 57x57px, 60x60px, 72x72px, 80x80px, 114x114px, 120x120px, 144x144px, 152x152px, 167x167px, 180x180px (PNG) pour iOS,
70x70px, 144x144px, 150x150px, 310x310 (PNG), avec le fichier xml browserconfig.xml pour Windows,
192x192px, 256x256 et 512x512px pour les autres navigateurs, avec le fichier manifest.json.
Soumettez une image carrée, d'au moins 100x100 pixels pour le pack standard.
Il est recommandé d'utiliser une image d'au moins 512x512 pixels pour obtenir les meilleurs résultats pour le pack extra.

Favicon.ico est une icône informatique associée à un site ou une page Web. Les navigateurs qui prennent en charge les favicons les affichent notamment dans la barre d'adresse, près du nom du site, dans la liste des favoris, ou bien encore dans les onglets et autres raccourcis de documents. Plus d'informations

Installation des favicons

Comment dois-je installer les favicons de mon site Web?
1 - Cliquez sur le bouton "Télécharger vos favicons", télécharger le pack, décompressez-le puis ouvrez-le. Tous les favicons, images ainsi que les fichiers xml browserconfig.xml et manifest.json (pack extra) sont inclus dedans.
2 - Copier tous les favicons, images et fichiers xml dans le répertoire racine de votre site Web (en général, il s'agit du dossier dans lequel votre site est stocké). Par exemple, http://www.votresite.com/favicon.ico
3 - Ajouter les balises HTML suivantes dans le code source de votre page web, après la balise <head> et avant la balise </head> :
Pour le pack Standard (pour toutes les versions actuelles des principaux navigateurs):
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" sizes="16x16" href="favicon-16.png" type="image/png">
<link rel="icon" sizes="32x32" href="favicon-32.png" type="image/png">
<link rel="icon" sizes="48x48" href="favicon-48.png" type="image/png">
<link rel="icon" sizes="96x96" href="favicon-96.png" type="image/png">
Pour le pack Extra (iOS, Android et Internet Explorer 10+):
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" sizes="192x192" href="favicon-192.png" type="image/png">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="80x80" href="apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-iphone-retina.png">
<meta name="msapplication-TileImage" content="ms-favicon-144.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
Pour les packs Standard + Extra (pour toutes les versions actuelles des principaux navigateurs, iOS, Android et Internet Explorer 10+):
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" sizes="16x16" href="favicon-16.png" type="image/png">
<link rel="icon" sizes="32x32" href="favicon-32.png" type="image/png">
<link rel="icon" sizes="48x48" href="favicon-48.png" type="image/png">
<link rel="icon" sizes="96x96" href="favicon-96.png" type="image/png">
<link rel="icon" sizes="192x192" href="favicon-192.png" type="image/png">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="80x80" href="apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-iphone-retina.png">
<meta name="msapplication-TileImage" content="ms-favicon-144.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
Optionnel : si vous souhaitez afficher le favicon animé, télécharger le fichier animated_favicon.gif et insérer la balise HTML suivante :
<link rel="icon" href="animated_favicon.gif" type="image/gif">

Qu'est-ce qu'un favicon ?

Un favicon (contraction des mots anglais "Favorites icon", icône marque-pages en français), aussi connu sous le terme anglais de "page icon", est une icône informatique associée à un site ou une page Web. Les navigateurs qui prennent en charge les favicons les affichent notamment dans la barre d'adresse, près du nom du site, dans la liste des favoris, ou bien encore dans les onglets et autres raccourcis de documents. Vous trouverez d'autres détails techniques dans la page de l'encyclopédie en ligne Wikipedia.

Est-il nécessaire de nommer le fichier d'icône de favoris "favicon.ico"?
Le nom de fichier "favicon.ico", sans être standardisé, a été adopté par l'ensemble des navigateurs modernes. Si vous le souhaitez, vous pouvez cependant spécifier un nom de fichier de favicon différent pour chacune des pages de votre site web, en intégrant, comme cela est précisé dans la page installer les favicons une balise spécifique dans chacune de vos pages.

Pourquoi devrais-je utiliser "favicon.ico"?
Si vous explorez régulièrement Internet, vous noterez que tous les sites professionnels les utilisent. Les favicons offrent à l'internaute une apparence plus personnalisée de votre site dans le navigateur; ils rendent également votre site plus visible dans le menu des favoris en remplaçant l'icône générique du navigateur par le vôtre.

Comment un fichier favicon.ico peut-il contenir des images de tailles différentes ?
Facicon.ico, comme n'importe quel autre fichier d'icônes, peut contenir plusieurs images.
Il s'agit d'une archive ou d'un dossier qui peut contenir plusieurs images différentes, le tout en un seul et même fichier - des images avec différentes profondeurs de couleur, ou des images plus ou moins grandes pour se placer dans les favoris, le bureau ou des menus.

Quelle est cette erreur "favicon.ico not found" qui remplit mon journal d'erreurs ?
Certains navigateurs cherchent automatiquement le fichier favicon.ico, qu'ils exploitent lors de la création de signets ou de favoris vers votre site web par exemple. Si vous naviguez avec Internet Explorer par exemple, vous avez déjà remarqué que certains sites de vos favoris ont des icônes personnalisés tandis que d'autres ont l'icône par défaut. Ces icônes personnalisés sont les favicon.ico que les navigateurs recherchent tant. Ainsi, placer un fichier favicon.ico à la racine de son site Web arrête les entrées dans le journal d'erreurs.

Quels sont les navigateurs qui prennent en charge "favicon.ico"?
Toutes les versions actuelles des principaux navigateurs supportent les favicons, y compris Internet Explorer, Firefox, Chrome, Opera, Safari, etc.

Comment soutenir favicons.fr ?

favicons.fr a permis de générer gratuitement 96162 séries de favicons depuis sa création. Si pour chaque série d'icônes générés, chaque utilisateur avait versé 1 centime d'euro, le coût de l'hébergement serait couvert depuis la création de ce service... Il n'en est rien.
Aussi, si vous souhaitez soutenir ce site sans publicité, vous pouvez faire un don pour aider à la maintenance et au développement de ce service.