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?

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.


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 .


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 .


@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.


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.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.