Gebruik Font Awesome-pictogram als favicon

Is het mogelijk om een ​​Font Awesome-pictogram als favicon-pictogram te gebruiken? Je weet wel, het kleine pictogram dat naast de titel van een website op het browsertabblad verschijnt?


Antwoord 1, autoriteit 100%

EDIT: ik raad je aan om http://gauger.io/fonticon

te gebruiken


Daarvoor heb ik een online Font Awesome Favicon Generator gemaakt!

Zie Font Awesome Favicon Generator.


Antwoord 2, autoriteit 29%

Ik heb ook een online Font Awesome Favicon Generatorgemaakt met extra functies die ontbraken in die van Paul Ferrett oplossing.

favicon

  • preview van favicon live in browser
  • grootte van het pictogram
  • transparant pictogram en achtergrond
  • grote afbeeldingsgrootte (pictogram kan zo gedetailleerd zijn als u wilt)
  • iconset kan worden bijgewerkt via github pull-verzoek
  • update 06/2017update naar Font Awesome 4.7
  • update 06/2017vaag zoeken en zoeken op trefwoord
  • update 09/2017gestapelde pictogrammen
  • update 06/2018update naar Font Awesome 5.0.13
  • update 11/2018update naar Font Awesome 5.5.0
  • update 04/2019update naar Font Awesome 5.8.1
  • update 11/2021update naar Font Awesome 5.15.4

Als je extra functies wilt, kun je hiereen probleem of een pull-verzoek indienen.


Antwoord 3, autoriteit 14%

Methode 1

  1. Bezoek gewoon fontawasome-galerij.
  2. Zoek en open nu het gewenste pictogram, dwz pictogram bewerken.
  3. Klik op download svg zoals getoond in de gegeven afbeelding.

voer hier de afbeeldingsbeschrijving in

  1. Je kunt dit svg-bestand nu als favicon op je website gebruiken, zie Hoe je favicon instelt.

Methode 2

Maak een screenshot van iets met het gewenste teken, knip het gewenste gedeelte uit en sla het op als afbeelding (.ico).

Serieus, nu wil je misschien de indelingen controleren die door elke browser worden ondersteund: http:// nl.wikipedia.org/wiki/Favicon#File_format_support

Als je karakters afbeeldings- of vectorbestanden zijn, zul je met de meeste browsers ok zijn, behalve IE (omdat MS je haat). Anders moet je ze echt eerst als afbeeldingen opslaan.


Antwoord 4, autoriteit 4%

Font Awesomewordt gehost op een aantal populaire CDN’s, zodat u rechtstreeks naar de afzonderlijke SVG-bestanden kunt linken. Stel gewoon de href-URL van het <link>-element in op de gewenste SVG in de gehoste Font Awesome-bibliotheek.

Voorbeeld-HTML voor een “raket”-bladwijzerpictogram gehost op jsDelivr:

<head>
   <link rel=icon href=https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/svgs/solid/rocket.svg>
</head>

Hoe het eruit ziet in Chrome:
screenshot

Een beperking van deze aanpak is dat de meeste browsers geen ondersteuning bieden voor het wijzigen van de kleur of het wijzigen van stijleigenschappen.

Safariondersteunt aangepaste kleuren als u de relatie mask-iconen het kenmerk colorgebruikt. Het gekleurde bladwijzerpictogram wordt weergegeven op de vastgezette tabbladen van Safari en ook op gewone tabbladen als de gebruiker de optie “Websitepictogrammen in tabbladen weergeven”heeft geselecteerd.

Voorbeeld-HTML voor een kleurenbladwijzerpictogram:

<head>
   <link rel=mask-icon color=teal
      href=https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/svgs/solid/rocket.svg>
</head>

Hoe het eruit ziet in Safari:
screenshot

Maak een ritje met de raket:
https://centerkey.com/files/rocket.html


Antwoord 5, autoriteit 3%

Elke afbeelding kan worden geüpload naar een favicon-generatorsite zoals

http://favicon-generator.org/

of

http://www.favicon.cc/

volg de online instructies op de site die u kiest. Het is meestal slechts een proces in drie stappen. Sla de favicon op het hoogste niveau van uw site op.

Voor compatibiliteit tussen browsers raad ik aan om altijd afbeeldingen voor favicons te gebruiken. Zelfs als sommige sites die u maakt alleen voor moderne browsers zijn, converteert u uw favicon-illustraties nog steeds naar een afbeelding. Door consequent hetzelfde proces te gebruiken, hoeft u zich geen zorgen meer te maken.


Antwoord 6, autoriteit 2%

Het is niet mogelijk dat u een direct geweldig lettertype-teken als favicon kunt gebruiken zonder het naar een afbeelding te converteren. Je moet karakter omzetten in afbeelding ..

Other episodes