Verwenden Sie Font Awesome Icon als Favicon

109

Ist es möglich, ein Font Awesome- Symbol als Favicon-Symbol zu verwenden? Wissen Sie, das kleine Symbol, das neben einem Website-Titel auf der Registerkarte "Browser" angezeigt wird?

favicon font-awesome Connor Black
quelle

Antworten:

38

Ja, so ist es. Machen Sie einfach einen Screenshot von etwas mit dem gewünschten Charakter, schneiden Sie das gewünschte Teil aus und speichern Sie es als Bild (.ico).

Im Ernst, jetzt möchten Sie vielleicht die von jedem Browser unterstützten Formate überprüfen: http://en.wikipedia.org/wiki/Favicon#File_format_support

Wenn Ihre Zeichen Bild- oder Vektordateien sind, sind Sie mit den meisten Browsern außer IE in Ordnung (weil MS Sie hasst) . Andernfalls müssen Sie sie zuerst wirklich als Bilder speichern.

Renan
quelle
3
Erlaubt die Lizenz dies jedoch?
Art-Solopov
3
@ art-solopov Ja, das tut es - Sie können es auf ihrer Lizenzseite überprüfen: fortawesome.github.io/Font-Awesome/license
Renan
Ich habe die OFL gelesen und nichts gefunden, was mit dem Ändern des Schriftformats oder dem Erstellen eines Bildes aus Glyphen zusammenhängt. Entschuldigung, wenn mir etwas fehlt, können Sie mich bitte auf den jeweiligen Abschnitt verweisen? Danke dir.
Art-Solopov
Für den Vorschlag eines Screenshots abgelehnt. Es gibt viele verlustfreie Wege, um dies zu erreichen.
MetaColin
2
@marcogmonteiro Wenn Sie fontawesome.com/download besuchen, können Sie die Symbole als .svg-Dateien herunterladen. Die meisten Browser akzeptieren ein .svg-Asset als Favicon. Wenn Sie alte IE-Versionen unterstützen müssen, können Sie ein schönes, sauberes Raster-Asset (z. B. eine PNG-Datei) erhalten, indem Sie die .svg-Datei mit Photoshop oder Illustrator konvertieren.
metaColin
289

EDIT: Ich schlage vor, Sie verwenden http://gauger.io/fonticon

Ich habe einen Online Font Awesome Favicon Generator erstellt, um genau das zu tun!

Siehe Font Awesome Favicon Generator .

Paul Ferrett
quelle
7
Schön, schnell und effektiv. +1!
U rsus
2
Müssen uns erlauben, die Farbe zu definieren!
6
@Freddy eigentlich ist der Generator schon dazu in der Lage, ich habe nur nicht die Benutzeroberfläche dafür gebaut. Übergeben Sie die Parameter bg und fg für den Hintergrund bzw. den Vordergrund unter Verwendung der RGB HEX-Farbwerte. Zum Beispiel paulferrett.com/fontawesome-favicon/…
Paul Ferrett
7
@ Paul-Ferrett: Gibt es eine Möglichkeit, die Größe des generierten Symbols zu ändern?
Vgoklani
4
Schöne Umsetzung. Leider reicht heutzutage nur das 16x16 Favicon nicht mehr aus. Wäre schön, einen Reißverschluss herunterzuladen, der alle notwendigen Favoriten in allen notwendigen Größen enthält.
Coorasse
85

Ich habe auch einen Online- Font-Awesome-Favicon-Generator erstellt, der zusätzliche Funktionen enthält, die in Paul Ferretts Lösung fehlten.

Favicon

  • Vorschau von Favicon live im Browser
  • Größe des Symbols
  • transparentes Symbol und Hintergrund
  • große Bildgröße (Symbol kann so detailliert sein, wie Sie möchten)
  • Das Iconset kann über eine Github-Pull-Anfrage aktualisiert werden
  • Update 06/2017 Update auf Font Awesome 4.7
  • Update 06/2017 Fuzzy-Suche und Stichwortsuche
  • Update 09/2017 gestapelte Symbole
  • Update 06/2018 Update auf Font Awesome 5.0.13
  • Update 11/2018 Update auf Font Awesome 5.5.0
  • Update 04/2019 Update auf Font Awesome 5.8.1
  • Update 04/2019 Unterstützung für Font Awesome Pro hinzugefügt !

Wenn Sie weitere Funktionen nutzen möchten wenden Sie sich bitte ein Problem oder eine Pull - Anforderung einzureichen hier .

Finsternis
quelle
@vgoklani Wenn Sie Vorschläge haben, lassen Sie es mich bitte wissen :)
Eclipse
@eclipse: Vielen Dank! Das hat mir so viel Schmerz erspart.
Sam
Vielen Dank für diese große Anstrengung, mit einigen Hinweisen zuerst: Wenn ich ein Bild herunterlade, ist es immer 1024 für Breite und Höhe, es sollte auf die tatsächliche Größe angepasst werden. Zweitens : Die Größe des Schiebereglers sollte geschrieben werden oder besser in einem Nummernfeld eingestellt werden
Saif
1
Ich habe es mit Unterstützung für gestapelte Symbole erweitert. PR steht noch aus.
Trung
2
Ich liebe die Live-Tab-Vorschau!
Tot Zam
11

Jedes Bild kann auf eine Favicon-Generator-Site wie hochgeladen werden

http://favicon-generator.org/

oder

http://www.favicon.cc/

Folgen Sie den Online-Anweisungen auf der von Ihnen ausgewählten Website. Es ist normalerweise nur ein dreistufiger Prozess. Speichern Sie das Favicon in der obersten Ebene Ihrer Site.

Aus Gründen der Browserkompatibilität empfehle ich, immer Bilder für Favoriten zu verwenden. Auch wenn einige von Ihnen erstellte Websites nur für moderne Browser bestimmt sind, konvertieren Sie Ihre Favicon-Grafiken dennoch in ein Bild. Wenn Sie denselben Prozess konsequent anwenden, müssen Sie sich weniger Sorgen machen.

otherDewi
quelle
2
"Beachten Sie, dass ein Favicon in Chrome nicht angezeigt wird, wenn Ihre Website lokal ist, sondern nur, wenn Sie die Website auf Ihren Webhost hochladen." das ist nicht richtig
U rsus
Wenn Sie Probleme haben, Ihr Lieblingssymbol lokal zu sehen, sehen Sie. stackoverflow.com/questions/16375592/…
otherDewi
7

Es ist nicht möglich, dass Sie direktes fantastisches Schriftzeichen als Favicon verwenden können, ohne es in ein Bild umzuwandeln. Sie müssen Zeichen in Bild konvertieren.

Shakeel Ahmed
quelle