Créer un favicon [fermé]

95

Comment puis-je créer un favicon pour mon site Web?

html favicon Ry-
la source
1
Copie possible de Comment ajouter une icône d'onglet de navigateur (favicon) pour un site Web?
Michał Perłakowski
@Gothdo Ce n'est pas un doublon! Celui que vous pointez EST! Celui-ci a précédé celui-là d'un an et demi!
Dov Miller
5
Je vote pour clore cette question comme hors sujet car il ne s'agit pas de programmation mais de conception Web.
Kyll
@DovMiller La meilleure question avec les meilleures réponses est celle qui devrait rester ouverte.
mbomb007 le

Réponses:

100

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.

Eduardo Russo
la source
14
Excellente application. C'est l'un des meilleurs sites de générateur de favicon que j'ai vus.
Chris Livdahl
1
Merci Chris! Je suis heureux de vous aider!
Eduardo Russo
3
@EduardoRusso c'est tout simplement génial - merci!
davnicwil
4
Bon travail. Fonctionne comme prévu.
Dilshan
1
Fonctionne mieux que prévu! Petit bug (?): Lors de l'utilisation de advanced, le chemin et la version ne sont pas inclus dans le browser browserfig.xml. Je l'aime toujours, cependant. : D
mrjink
42

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/ . Cela crée des favicons nettes et je n'ai pas eu à les modifier après les avoir créées. Il générera des favicons en 16x16 et 32x32 et pour les citer: "Chaque putain de taille, monsieur!". Le site prend également en charge / préserve la transparence présente dans certains png. En outre, leur site a l'air cool et est facile à utiliser.

Par exemple, voici un logo stackoverflow: entrez la description de l'image ici

Voici quelques-unes des favicons générées:

entrez la description de l'image ici entrez la description de l'image ici entrez la description de l'image ici entrez la description de l'image ici entrez la description de l'image ici

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="&nbsp;"/>
<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 Google, et c'était de loin le meilleur.

Jared Ménard
la source
1
Comment puis-je améliorer cette réponse pour éviter d'autres votes négatifs?
Jared Menard
3
Je ne sais pas. Votre réponse en a fait un travail de cinq minutes pour moi. Merci.
andyb
1
certaines personnes aiment simplement voter sans raison. SO doit avoir une politique contre cela. Btw, avons-nous vraiment besoin de nombreuses tailles différentes ou nous avons juste assez de 16x16 et 32x32 lorsque le site Web génère
batmaci
Personnellement, je ne sais pas quelle est la meilleure pratique ici. Sur mon site, je pense que nous n'en utilisons qu'un. Celles-ci peuvent être utiles pour les applications Web progressives Chrome lorsqu'elles sont combinées avec un manifest.json.
Jared Menard
J'ai trouvé cette ressource sur favicomatic.com , elle s'appelle le "Favicon Cheat Sheet" github.com/audreyr/favicon-cheat-sheet
Jared Menard
20

GIMP est un bon programme pour cela. Enregistrez simplement l'image au format PNG, puis ajoutez

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

dans la <HEAD>section de votre page.

Stefano Borini
la source
7
Gimp offre également la possibilité de l'enregistrer en tant que favicon.ico, ce qui éviterait l'ajout du lien.
4
Dommage que les anciens MSIE (qui sont encore très populaires) n'acceptent pas le PNG à la place d'un "bon" fichier formaté ICO.
Már Örlygsson
Pour épingler des sites Web à la barre des tâches, Windows nécessite également une ico.
Necriis
8

Vous créez un fichier icône de 16x16 ou 32x32 ou 64x64. Nommez-le favicon.ico et placez-le à la racine du dossier public de votre site Web.

Il existe des sites Web qui convertiront pour vous d'autres formats graphiques en .ico. c'est à dire. http://tools.dynamicdrive.com/favicon/

Jim
la source
4
Aussi: vous pouvez enregistrer votre fichier favicon n'importe où si vous ajoutez un <link rel="shortcut icon" href="link/to/fav.ico" />au <head>bloc de vos pages.
Már Örlygsson
1
tools.dynamicdrive.com/favicon vous permettra également de fusionner plusieurs tailles en un seul favico, ce qui est génial
hdorio
3

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 image normaux, mais à l'origine, je pense que c'était juste 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 en un seul calque (à moins que vous ne souhaitiez plusieurs icônes dans le même fichier) et enregistrez-la au format .ico. Il le formatera correctement, puis utilisera Stefano <link rel="SHORTCUT ICON" HREF="/favicon.ico">pour l'utiliser dans votre page Web.

singes-fusées
la source
3

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 incorporées dans le fichier .ico.

Matthew Lock
la source
Hmm, paint.net.amihotornot.com.au en tant qu'hôte du plugin Icon? Est-ce légitime?
RonaldB
@RonaldB oui c'est la maison de ce plugin. Domaine étrange n'est-ce pas
Matthew Lock
2

Lors de la création d'un favicon, vous souhaitez prendre en compte les facteurs suivants:

  • Plateformes prises en charge Il y a dix ans, vous ne vouliez prendre en charge que les navigateurs de bureau et la solution était de générer l' favicon.icoimage classique . De nos jours, vous souhaitez prendre en charge iOS (et iOS Safari) et Android (et Android Chrome). Peut-être aussi Windows 10 (et Edge) et la nouvelle barre tactile Mac Book Pro (macOS Safari). Vous ne pouvez plus simplement 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 «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. J'ai peur d'avoir créé cette tendance tout seul: - / Le problème est que vous vous retrouvez avec 20 lignes 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, 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 s'occuper de tous les détails. Le seul qui fait cela est Real Favicon Generator . Divulgation complète: je suis l'auteur de ce site.

philippe_b
la source
1

Et si vous utilisez asp.net, essayez cette façon d'appliquer un 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/

Tarik
la source
1
A noter, doctype.com a fermé le 15 février 2013. En savoir plus à ce sujet .
Krease
1

Je crée mes favicons en 16 x 16 ou 32 x 32 avec Photoshop. Je l'enregistre alors sous forme de gif et j'utilise IrfanView pour convertir le gif en ico.

Max
la source