En recherchant des favicons, j'ai découvert que j'avais besoin de plus de 10 types de fichiers pour fonctionner dans tous les navigateurs et appareils :(
Je me suis énervé et j'ai créé mon propre générateur de favicon, qui crée tous ces fichiers et l'en-tête HTML correct pour chacun d'eux: faviconit.com
Je espère que vous l'apprécierez.
Si vous avez déjà une image de logo que vous souhaitez transformer en favicon, vous pouvez la convertir en utilisant http://www.favicomatic.com/ . Il crée des favicons nets et je n'ai pas eu à les modifier après les avoir créés. Il générera des favicons en 16x16 et 32x32 et pour les citer: "Toutes les foutues tailles, monsieur!". Le site prend également en charge/préserve la transparence présente dans certains pngs. De plus, leur site a l'air cool et est facile à utiliser.
Par exemple, voici un logo stackoverflow: 
Voici quelques-uns des favicons générés:
Ils génèrent également le html nécessaire:
<link rel="Apple-touch-icon-precomposed" sizes="57x57" href="Apple-touch-icon-57x57.png" />
<link rel="Apple-touch-icon-precomposed" sizes="114x114" href="Apple-touch-icon-114x114.png" />
<link rel="Apple-touch-icon-precomposed" sizes="72x72" href="Apple-touch-icon-72x72.png" />
<link rel="Apple-touch-icon-precomposed" sizes="144x144" href="Apple-touch-icon-144x144.png" />
<link rel="Apple-touch-icon-precomposed" sizes="60x60" href="Apple-touch-icon-60x60.png" />
<link rel="Apple-touch-icon-precomposed" sizes="120x120" href="Apple-touch-icon-120x120.png" />
<link rel="Apple-touch-icon-precomposed" sizes="76x76" href="Apple-touch-icon-76x76.png" />
<link rel="Apple-touch-icon-precomposed" sizes="152x152" href="Apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
J'ai regardé les 20 premiers résultats de google, et c'était de loin le meilleur.
GIMP est un bon programme pour cela. Enregistrez simplement l'image au format PNG, puis ajoutez
<link rel="SHORTCUT ICON" HREF="/favicon.png">
sur le <HEAD>section de votre page.
Vous créez un fichier d'icône de 16 x 16 ou 32 x 32 ou 64 x 64. Nommez-le favicon.ico et placez-le à la racine du dossier public de votre site Web.
Il existe des sites Web qui convertiront d'autres formats graphiques en .ico pour vous. c'est à dire. http://tools.dynamicdrive.com/favicon/
L'un des meilleurs outils de favicon en ligne est FaviconGenerator.com . Design rapide et moderne, pas de peluches.
J'utilise le programme open source Paint.net avec le plugin Icon .
Vous pouvez ensuite créer et enregistrer une image au format .ico avec toutes les différentes tailles intégrées dans le fichier .ico.
Si vous souhaitez créer des fichiers .ico, vous pouvez également utiliser GIMP pour créer des favicons. Les navigateurs modernes peuvent utiliser des fichiers d'image normaux, mais à l'origine, je pense que ce n'était que des fichiers .ico. C'est un éditeur d'images open source similaire à Photoshop. Créez et modifiez une image de la bonne taille (disons 32 x 32), aplatissez-la sur un calque (sauf si vous voulez plusieurs icônes dans le même fichier) et enregistrez-la au format .ico. Il le formatera correctement, puis utilisez le <link rel="SHORTCUT ICON" HREF="/favicon.ico"> De Stefano pour l'utiliser dans votre page Web.
Et si vous utilisez asp.net, essayez de cette façon d'appliquer le favicon à votre page:
<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />
mais vous pouvez trouver plus d'informations ici: http://doctype.com/
Lors de la création d'un favicon, vous souhaitez prendre en compte les facteurs suivants:
- Plates-formes prises en charge Il y a dix ans, vous ne vouliez prendre en charge que les navigateurs de bureau et la solution consistait à générer la version classique
favicon.icoimage. De nos jours, vous souhaitez prendre en charge iOS (et iOS Safari) et Android (et Android Chrome). Peut-être Windows 10 (et Edge) et le nouveau Mac Book) Pro Touch Bar également (macOS Safari). Vous ne pouvez plus utiliser une seule image "taille unique". - Conception Dès que vous prenez en charge plusieurs plates-formes, vous êtes confronté à plusieurs directives de conception. Par exemple, Google utilise des icônes transparentes pour ses propres applications natives sur Android, tandis que les icônes iOS ne peuvent pas du tout être transparentes. Vous ne pouvez pas simplement utiliser une approche "conception unique pour tous".
- Icônes générées et code HTML Depuis deux ou trois ans, la référence a été de générer autant d'icônes que possible afin de couvrir tous les cas. Je crains d'avoir créé cette tendance tout seul: -/Le problème est que vous vous retrouvez avec des lignes de 20 ou HTML, ce qui est beaucoup trop. Afin d'avoir une solution technique satisfaisante, vous devez équilibrer la quantité d'icônes/HTML générées et les plates-formes prises en charge.
Comme d'habitude, vous pouvez créer tous ces actifs manuellement. À moins d'avoir des besoins très spécifiques et un budget, ce n'est certainement pas la voie à suivre.
La bonne façon pour la plupart des gens est d'utiliser un générateur de favicon qui vous permet de décider de l'apparence de toutes les icônes et de prendre soin de tous les détails. Le seul qui le fait est Real Favicon Generator . Divulgation complète: je suis l'auteur de ce site.
Je fais mes favicons 16 x 16 ou 32 x 32 en utilisant Photoshop. Je l'enregistre ensuite en gif et j'utilise IrfanView pour convertir le gif en ico.