Utilisez l'icône Font Awesome comme Favicon

109

Est-il possible d'utiliser une icône Font Awesome comme icône de favicon? Vous savez, la petite icône qui apparaît à côté d'un titre de site Web dans l'onglet du navigateur?

favicon font-awesome Connor Noir
la source

Réponses:

38

Oui, ça l'est. Prenez simplement une capture d'écran de quelque chose avec le caractère souhaité, coupez la partie souhaitée et enregistrez-la en tant qu'image (.ico).

Sérieusement maintenant, vous voudrez peut-être vérifier les formats pris en charge par chaque navigateur: http://en.wikipedia.org/wiki/Favicon#File_format_support

Si vos personnages sont des images ou des fichiers vectoriels, vous serez d'accord avec la plupart des navigateurs, mais IE (car MS vous déteste) . Sinon, vous devrez d'abord les enregistrer en tant qu'images.

Renan
la source
3
La licence le permet-elle cependant?
art-solopov
3
@ art-solopov Oui, vous pouvez le vérifier sur leur page de licence: fortawesome.github.io/Font-Awesome/license
Renan le
J'ai lu l'OFL et je n'ai rien trouvé concernant la modification du format de la police ou la composition d'une image à partir de glyphes. Désolé si je manque quelque chose, pouvez-vous s'il vous plaît me diriger vers la section spécifique? Je vous remercie.
art-solopov
Évalué pour avoir suggéré une capture d'écran. Il existe de nombreuses façons d'y parvenir sans perte.
metaColin
2
@marcogmonteiro Si vous visitez fontawesome.com/download, vous pouvez télécharger les icônes sous forme de fichiers .svg. La plupart des navigateurs acceptent un élément .svg comme favicon. Si vous avez besoin de prendre en charge d'anciennes versions d'IE, vous pouvez obtenir un élément raster propre (tel qu'un .png) en convertissant le .svg à l'aide de Photoshop ou Illustrator.
metaColin le
290

EDIT: Je vous suggère d'utiliser http://gauger.io/fonticon

J'ai créé un générateur de favicon Font Awesome en ligne pour faire exactement cela!

Voir Font Awesome Favicon Generator .

Paul Ferrett
la source
7
Joli, rapide et efficace. +1!
U rsus le
2
Besoin de nous permettre de définir la couleur!
6
@Freddy en fait, le générateur en est déjà capable, je n'ai tout simplement pas construit l'interface utilisateur pour cela. Transmettez les paramètres bg et fg pour l'arrière-plan et le premier plan, respectivement, en utilisant les valeurs de couleur RVB HEX. par exemple, paulferrett.com/fontawesome-favicon/…
Paul Ferrett
7
@ paul-ferrett: y a-t-il un moyen de changer la taille de l'icône générée?
vgoklani
4
Belle mise en œuvre. Malheureusement, de nos jours, le favicon 16x16 ne suffit pas. Ce serait bien de télécharger un zip contenant toutes les favicons nécessaires dans toutes les tailles nécessaires.
coorasse
86

J'ai également créé un générateur Font Awesome Favicon en ligne qui a des fonctionnalités supplémentaires qui manquaient à la solution de Paul Ferrett.

favicon

  • aperçu du favicon en direct dans le navigateur
  • dimensionnement de l'icône
  • icône transparente et arrière-plan
  • taille d'image énorme (l'icône peut être aussi détaillée que vous le souhaitez)
  • iconset peut être mis à jour via une requête d'extraction github
  • mise à jour 06/2017 mise à jour vers Font Awesome 4.7
  • mise à jour 06/2017 recherche floue et recherche par mot-clé
  • mise à jour 09/2017 icônes empilées
  • mise à jour 06/2018 mise à jour vers Font Awesome 5.0.13
  • mise à jour 11/2018 mise à jour vers Font Awesome 5.5.0
  • mise à jour 04/2019 mise à jour vers Font Awesome 5.8.1
  • mise à jour 04/2019 ajout du support pour Font Awesome Pro !

Si vous souhaitez des fonctionnalités supplémentaires, n'hésitez pas à soumettre un problème ou une demande d'extraction ici .

éclipse
la source
@vgoklani Si vous avez des suggestions, faites-le moi savoir :)
éclipse le
@eclipse: Merci beaucoup! Cela m'a sauvé tellement de douleur.
sam
Merci pour ce grand effort, avec quelques remarques en premier: lorsque je télécharge une image, elle est toujours de 1024 pour la largeur et la hauteur, elle doit être redimensionnée à sa taille réelle. deuxième: la taille de la valeur du curseur doit être écrite ou mieux peut être définie dans une boîte à nombres
Saif
1
Je l'ai amélioré avec le support des icônes empilées. PR est en attente d'examen.
trung le
2
J'adore la fonctionnalité d'aperçu des onglets en direct!
Tot Zam du
11

Toute image peut être téléchargée sur un site de générateur de favicon tel que

http://favicon-generator.org/

ou

http://www.favicon.cc/

suivez les instructions en ligne sur le site de votre choix. C'est généralement juste un processus en trois étapes. Enregistrez le favicon dans le niveau supérieur de votre site.

Pour la compatibilité entre les navigateurs, je recommande de toujours utiliser des images pour les favicons. Même si certains sites que vous créez sont réservés aux navigateurs modernes, vous pouvez toujours convertir votre illustration de favicon en image. L'utilisation constante du même processus vous donne une chose de moins à craindre.

autreDewi
la source
2
"Notez qu'un favicon n'apparaîtra pas dans Chrome si votre site est local, uniquement lorsque vous téléchargez le site sur votre hébergeur". ce n'est pas correct.
U rsus le
si vous rencontrez des problèmes pour voir votre icône fav localement, consultez. stackoverflow.com/questions/16375592/…
otherDewi
7

Il n'est pas possible que vous puissiez utiliser un caractère de police génial direct comme favicon sans convertir en image. Vous devez convertir le caractère en image.

Shakeel Ahmed
la source