Est-il possible d'utiliser un Font Awesome comme icône de favicon ? Vous savez, la petite icône qui apparaît à côté du titre d'un site Web dans l'onglet du navigateur ?
Réponses
Trop de publicités?
Paul Ferrett
Points
191
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 !
eclipse
Points
1017
J'ai aussi créé un site web Générateur de Favicon Font Awesome qui possède des fonctionnalités supplémentaires qui manquaient dans la solution de Paul Ferrett.
- aperçu de la favicon en direct dans le navigateur
- le dimensionnement de l'icône
- icône et fond transparents
- taille d'image énorme (l'icône peut être aussi détaillée que vous le souhaitez)
- Le jeu d'icônes peut être mis à jour via une demande de retrait sur github.
- mise à jour 06/2017 mise à jour vers Font Awesome 4.7
- actualisation 06/2017 recherche floue et recherche par mots-clés
- 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 11/2021 mise à jour vers Font Awesome 5.15.4
Si vous souhaitez des fonctionnalités supplémentaires, n'hésitez pas à soumettre un problème ou une demande de modification. aquí .
Méthode 1
- Il suffit de visiter galerie fontawasome .
- Maintenant, recherchez et ouvrez l'icône de votre choix, à savoir icône d'édition .
- Cliquez sur télécharger svg comme indiqué dans l'image donnée.
- Vous pouvez maintenant utiliser ce fichier svg dans votre site web comme favicon voir Comment définir la favicon .
Méthode 2
Prenez une capture d'écran de quelque chose avec le caractère désiré, coupez la partie que vous voulez et enregistrez-la comme image (.ico).
Plus sérieusement, vous pouvez vérifier les formats pris en charge par chaque navigateur : http://en.wikipedia.org/wiki/Favicon#File_format_support
Si vos caractères sont des images ou des fichiers vectoriels, vous pouvez utiliser la plupart des navigateurs, sauf IE. (parce que MS te déteste) . Sinon, il faudra d'abord les enregistrer en tant qu'images.
Dem Pilafian
Points
511
Font Awesome est hébergé sur un certain nombre de CDN populaires, ce qui vous permet d'établir un lien direct avec les fichiers SVG individuels. Il suffit de définir le href URL de la <link> à l'élément SVG souhaité dans l'hôte Font Awesome bibliothèque.
Exemple HTML pour une icône de signet "fusée" hébergée sur jsDelivr :
<head>
<link rel=icon href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/svgs/solid/rocket.svg>
</head>Ce à quoi cela ressemble en Chrome :
Une limitation de cette approche est que la plupart des navigateurs ne permettent pas de changer la couleur ou de modifier les propriétés de style.
Safari prend en charge les couleurs personnalisées si vous utilisez l'option mask-icon et color attribut. L'icône de marque-page en couleur s'affiche sur les onglets épinglés de Safari ainsi que sur les onglets normaux si l'utilisateur a sélectionné l'attribut "Afficher les icônes des sites web dans les onglets" option.
Exemple HTML pour une icône de marque-page en couleur :
<head>
<link rel=mask-icon color=teal
href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15/svgs/solid/rocket.svg>
</head>Ce à quoi cela ressemble en Safari :
Faites un tour dans la fusée :
https://centerkey.com/files/rocket.html
otherDewi
Points
561
Toute image peut être téléchargée sur un site de génération de favicon tel que
ou
suivez les instructions en ligne sur le site que vous avez choisi. Il s'agit généralement d'un processus en trois étapes. Enregistrez la favicon dans le niveau supérieur de votre site.
Pour des raisons de compatibilité entre les navigateurs, je recommande de toujours utiliser des images pour les favicons. Même si certains sites que vous créez ne sont destinés qu'aux navigateurs modernes, convertissez toujours le graphisme de votre favicon en image. En utilisant toujours le même processus, vous n'aurez plus à vous soucier de quoi que ce soit.
- Réponses précédentes
- Plus de réponses
