@ Gothdo Dies ist kein Duplikat! Der, auf den Sie zeigen, IST! Dieser ging dem anderthalb Jahre voraus!
Dov Miller
5
Ich stimme dafür, diese Frage als nicht zum Thema gehörend zu schließen, da es nicht um Programmierung, sondern um Webdesign geht.
Kyll
@DovMiller Die bessere Frage mit den besseren Antworten ist die, die offen bleiben sollte.
mbomb007
Antworten:
100
Bei der Suche nach Favoriten stellte ich fest, dass ich mehr als 10 Arten von Dateien benötigte, um in allen Browsern und Geräten zu funktionieren :(
Ich war sauer und habe meinen eigenen Favicon-Generator erstellt, der alle diese Dateien und den richtigen HTML-Header für jede von ihnen erstellt: faviconit.com
Ausgezeichnete App. Dies ist eine der besten Favicon-Generator-Sites, die ich je gesehen habe.
Chris Livdahl
1
Danke, Chris! Ich bin froh, dass ich helfen kann!
Eduardo Russo
3
@EduardoRusso das ist einfach genial - danke!
Davnicwil
4
Gut gemacht. Funktioniert wie erwartet.
Dilshan
1
Funktioniert besser als erwartet! Kleiner Fehler (?): Bei Verwendung von Advanced sind Pfad und Version nicht in der browserconfig.xml enthalten. Ich liebe es trotzdem. : D
Mrjink
42
Wenn Sie bereits ein Logo-Bild haben, das Sie in ein Favicon umwandeln möchten, können Sie es mithilfe von http://www.favicomatic.com/ konvertieren . Es werden gestochen scharfe Favoriten erstellt, und ich musste sie nach dem Erstellen nicht mehr bearbeiten. Es werden Favoriten bei 16x16 und 32x32 generiert und um sie zu zitieren: "Jede verdammte Größe, Sir!". Die Site unterstützt / bewahrt auch die in einigen PNGs vorhandene Transparenz. Außerdem sieht ihre Seite cool aus und ist einfach zu bedienen.
Wie kann ich diese Antwort verbessern, um weitere Abstimmungen zu vermeiden?
Jared Menard
3
Ich weiß es nicht. Ihre Antwort machte dies zu einem fünfminütigen Job für mich. Vielen Dank.
Andyb
1
Manche Leute stimmen einfach ohne Grund ab. SO muss eine Politik dagegen haben. Übrigens, brauchen wir wirklich viele verschiedene Größen oder wir 16x16 und 32x32 sind gerade genug, wenn die Website generiert
Batmaci
Ich persönlich weiß nicht, was hier die beste Vorgehensweise ist. Ich denke, wir verwenden auf meiner Website nur eine. Diese können in Kombination mit einer manifest.json für progressive Chrome-Webanwendungen hilfreich sein.
Gimp bietet auch die Möglichkeit, es als favicon.ico zu speichern, was das Hinzufügen des Links erspart.
4
Schade, dass die alten MSIEs (die immer noch sehr beliebt sind) das PNG nicht anstelle einer "richtigen" ICO-formatierten Datei akzeptieren.
Már Örlygsson
Um Websites an die Taskleiste anzuheften, benötigt Windows auch ein ico.
Necriis
8
Sie erstellen eine Symboldatei, die 16 x 16 oder 32 x 32 oder 64 x 64 ist. Nennen Sie es favicon.ico und platzieren Sie es im Stammverzeichnis des öffentlichen Ordners Ihrer Website.
Außerdem: Sie können Ihre Favicon-Datei überall speichern, wenn Sie <link rel="shortcut icon" href="link/to/fav.ico" />dem <head>Block Ihrer Seiten ein hinzufügen .
Már Örlygsson
1
tools.dynamicdrive.com/favicon ermöglicht es Ihnen auch, mehrere Größen in einem Favico zusammenzuführen, was großartig ist
hdorio
5
Eines der besten Online-Favicon-Tools ist FaviconGenerator.com . Schnelles, modernes Design, keine Flusen.
Wenn Sie .ico-Dateien erstellen möchten, können Sie mit GIMP auch Favoriten erstellen. Moderne Browser können normale Bilddateien verwenden, aber ursprünglich waren es meiner Meinung nach nur .ico-Dateien. Es ist ein Open Source-Bildeditor, der Photoshop ähnelt. Erstellen und bearbeiten Sie ein Bild mit der richtigen Größe (z. B. 32 x 32), reduzieren Sie es auf eine Ebene (es sei denn, Sie möchten mehrere Symbole in derselben Datei haben) und speichern Sie es als .ico. Es wird korrekt formatiert und dann mit Stefano <link rel="SHORTCUT ICON" HREF="/favicon.ico">auf Ihrer Webseite verwendet.
Hmm, paint.net.amihotornot.com.au als Host für das Icon Plugin? Ist das echt?
RonaldB
@ RonaldB Ja, es ist die Heimat dieses Plugins. Weird - Domain ist es nicht
Matthew Sperre
2
Beim Erstellen eines Favicons möchten Sie folgende Faktoren berücksichtigen:
Unterstützte Plattformen Vor zehn Jahren wollten Sie nur Desktop-Browser unterstützen, und die Lösung bestand darin, das klassische favicon.icoBild zu generieren . Heutzutage möchten Sie iOS (und iOS Safari) und Android (und Android Chrome) unterstützen. Möglicherweise auch Windows 10 (und Edge) und die neue Mac Book Pro Touch Bar (macOS Safari). Sie können nicht mehr nur ein einzelnes Bild "Einheitsgröße" verwenden.
Design Sobald Sie mehrere Plattformen unterstützen, sehen Sie sich mehreren Designrichtlinien gegenüber. Beispielsweise verwendet Google transparente Symbole für seine eigenen nativen Apps unter Android, während iOS-Symbole überhaupt nicht transparent sein können. Sie können nicht einfach einen "Single Design Fits All" -Ansatz verwenden.
Generierte Symbole und HTML-Code Seit zwei oder drei Jahren besteht die Referenz darin, so viele Symbole wie möglich zu generieren, um alle Fälle abzudecken. Ich fürchte, ich habe diesen Trend ganz alleine kreiert: - / Das Problem ist, dass Sie am Ende 20 Zeilen oder HTML haben, was viel zu viel ist. Um eine zufriedenstellende technische Lösung zu erhalten, müssen Sie die Anzahl der generierten Symbole / HTML und der unterstützten Plattformen ausgleichen.
Wie üblich können Sie alle diese Assets manuell erstellen. Dies ist definitiv nicht der richtige Weg, es sei denn, Sie haben sehr, sehr spezifische Bedürfnisse und ein Budget.
Der richtige Weg für die meisten Menschen ist die Verwendung eines Favicon-Generators, mit dem Sie das Aussehen aller Symbole bestimmen und sich um alle Details kümmern können. Der einzige, der dies tut, ist Real Favicon Generator . Vollständige Offenlegung: Ich bin der Autor dieser Website.
Ich mache meine Favoriten entweder 16 x 16 oder 32 x 32 mit Photoshop. Ich speichere es dann als GIF und verwende IrfanView , um das GIF in ein ico zu konvertieren.
Antworten:
Bei der Suche nach Favoriten stellte ich fest, dass ich mehr als 10 Arten von Dateien benötigte, um in allen Browsern und Geräten zu funktionieren :(
Ich war sauer und habe meinen eigenen Favicon-Generator erstellt, der alle diese Dateien und den richtigen HTML-Header für jede von ihnen erstellt: faviconit.com
Hoffe es gefällt euch.
quelle
Wenn Sie bereits ein Logo-Bild haben, das Sie in ein Favicon umwandeln möchten, können Sie es mithilfe von http://www.favicomatic.com/ konvertieren . Es werden gestochen scharfe Favoriten erstellt, und ich musste sie nach dem Erstellen nicht mehr bearbeiten. Es werden Favoriten bei 16x16 und 32x32 generiert und um sie zu zitieren: "Jede verdammte Größe, Sir!". Die Site unterstützt / bewahrt auch die in einigen PNGs vorhandene Transparenz. Außerdem sieht ihre Seite cool aus und ist einfach zu bedienen.
Hier ist zum Beispiel ein Stackoverflow-Logo:
Hier sind einige der generierten Favoriten:
Sie generieren auch das benötigte HTML:
Ich habe mir die ersten 20 Google-Ergebnisse angesehen, und dies war bei weitem das Beste.
quelle
GIMP ist dafür ein gutes Programm. Speichern Sie das Bild einfach als PNG und fügen Sie es hinzu
auf dem
<HEAD>Abschnitt Ihrer Seite.quelle
Sie erstellen eine Symboldatei, die 16 x 16 oder 32 x 32 oder 64 x 64 ist. Nennen Sie es favicon.ico und platzieren Sie es im Stammverzeichnis des öffentlichen Ordners Ihrer Website.
Es gibt Websites, die andere Grafikformate für Sie in .ico konvertieren. dh. http://tools.dynamicdrive.com/favicon/
quelle
<link rel="shortcut icon" href="link/to/fav.ico" />dem<head>Block Ihrer Seiten ein hinzufügen .Eines der besten Online-Favicon-Tools ist FaviconGenerator.com . Schnelles, modernes Design, keine Flusen.
quelle
Wenn Sie .ico-Dateien erstellen möchten, können Sie mit GIMP auch Favoriten erstellen. Moderne Browser können normale Bilddateien verwenden, aber ursprünglich waren es meiner Meinung nach nur .ico-Dateien. Es ist ein Open Source-Bildeditor, der Photoshop ähnelt. Erstellen und bearbeiten Sie ein Bild mit der richtigen Größe (z. B. 32 x 32), reduzieren Sie es auf eine Ebene (es sei denn, Sie möchten mehrere Symbole in derselben Datei haben) und speichern Sie es als .ico. Es wird korrekt formatiert und dann mit Stefano
<link rel="SHORTCUT ICON" HREF="/favicon.ico">auf Ihrer Webseite verwendet.quelle
Ich benutze das Open Source Paint.net Programm zusammen mit dem Icon Plugin .
Anschließend können Sie ein Bild im .ico-Format erstellen und speichern, wobei alle verschiedenen Größen in die .ico-Datei eingebettet sind.
quelle
Beim Erstellen eines Favicons möchten Sie folgende Faktoren berücksichtigen:
favicon.icoBild zu generieren . Heutzutage möchten Sie iOS (und iOS Safari) und Android (und Android Chrome) unterstützen. Möglicherweise auch Windows 10 (und Edge) und die neue Mac Book Pro Touch Bar (macOS Safari). Sie können nicht mehr nur ein einzelnes Bild "Einheitsgröße" verwenden.Wie üblich können Sie alle diese Assets manuell erstellen. Dies ist definitiv nicht der richtige Weg, es sei denn, Sie haben sehr, sehr spezifische Bedürfnisse und ein Budget.
Der richtige Weg für die meisten Menschen ist die Verwendung eines Favicon-Generators, mit dem Sie das Aussehen aller Symbole bestimmen und sich um alle Details kümmern können. Der einzige, der dies tut, ist Real Favicon Generator . Vollständige Offenlegung: Ich bin der Autor dieser Website.
quelle
Und wenn Sie asp.net verwenden, versuchen Sie auf diese Weise, Favicon auf Ihre Seite anzuwenden:
Weitere Informationen finden Sie hier: http://doctype.com/
quelle
Ich mache meine Favoriten entweder 16 x 16 oder 32 x 32 mit Photoshop. Ich speichere es dann als GIF und verwende IrfanView , um das GIF in ein ico zu konvertieren.
quelle