Ich bin auf einer WordPress-Site beschäftigt und bin auf die Bühne gekommen, um den letzten Schliff als Favicon hinzuzufügen. Ich bin in erster Linie ein Entwickler, daher sind Grafiken und Symbole nicht meine Stärken.
Was sind die Best Practices beim Erstellen eines Favicons (in Bezug auf Größen usw. habe ich bereits das Design)? Ich möchte für jedes mögliche Gerät Platz haben, sei es für Handys, Tablets, Retina-Displays usw. Außerdem möchte ich nicht, dass es unscharf wird, also muss ich wissen, welche Pixeldichte ich verwenden soll und alles.
Wenn es einige Mac-Apps oder Online-Tools gibt, die dies für Sie tun (und es auch richtig machen), wäre das auch großartig. Ansonsten kann ich mich in Illustrator und Photoshop zurechtfinden.
website-design
best-practice
favicon
Tiwaz89
quelle
quelle
Antworten:
Die Grundlagen von Favicons - Best Practice für 2013 :
Und ein "schmerzhaft obsessiver" Spickzettel für Favicon-Größen / -Typen auf GitHub.
Immer eine Lektüre wert: http://www.jonathantneal.com/blog/understand-the-favicon/
quelle
Was soll enthalten sein?
Das Minimum
Für die Besessenen
favicon.ico
favicon.ico ist das älteste der Favicons, es hat funktioniert, seitdem viele Leute, die dies lesen, geboren wurden und heute noch perfekt funktionieren.
Microsoft empfiehlt, Bilder in den Größen 16 x 16, 32 x 32 und 48 x 48 einzuschließen.
Die Standardmethode zur Definition Ihres Favicons:
Browser durchsuchen das Stammverzeichnis Ihrer Website nach,
favicon.ico
sodass Sie den Link weglassen können. Einige ältere Browser verwenden standardmäßig die deklariertefavicon.ico
Größe , auch wenn eine PNG-Datei mit geeigneter Größe deklariert ist. Daher ist es möglicherweise eine gute Idee, den ICO im Stammverzeichnis nicht deklariert zu lassen und PNGs mit unterschiedlicher Größe zu deklarieren.favicon.png
HTML5 hat das
sizes
Attribut eingeführt , mit dessen Hilfe Symbole mit mehreren Größen deklariert werden können. Durch die Verwendung bestimmter PNGs können Sie die verwendeten Größen besser steuern und es wird nur das richtige Bild geladen.Die von Ihnen angegebenen Größen hängen von den Geräten ab, die Sie unterstützen möchten. Einige gebräuchliche und nicht so gebräuchliche Größen:
Apple Touch Icon
iOS-Webclipsymbole gibt es in verschiedenen Größen für verschiedene Geräte und Auflösungen. Sie können ein oder mehrere Symbole in der Größe angeben. Wenn kein Symbol in der entsprechenden Größe gefunden wird, wird das allgemeine Symbol ohne deklarierte Größe verwendet.
Wenn mit einem Link-Element keine Symbole angegeben werden, durchsucht iOS das Stammverzeichnis nach Symbolen mit dem
apple-touch-icon
Präfix. iOS-Geräte sind (seltsamerweise) nicht die einzigen Geräte, die diese Symbole verwenden (z. B. Android Chrome). Daher ist es sicherer, sie zu deklarieren.Richtlinien für die Benutzeroberfläche von iOS - Symbolgrößen
iOS Developer Library - Angeben eines Webseiten-Symbols für den Webclip
Windows-Kacheln
Kacheln werden verwendet, wenn Sie eine Website auf dem Startbildschirm von Windows oder Windows Phone anheften und in verschiedenen Größen erhalten.
Die empfohlenen Bildgrößen sind größer als die Namen dieser Bilder vermuten lassen. Dies sind die empfohlenen Größen von microsoft.com
Fliesenfarbe und Titel
Das Standardverhalten von Kacheln besteht darin, den Titel der Kachel aus dem
<title>
Tag zu übernehmen und Transparenz in den Kachelbildern zu respektieren, wobei die Hintergrundfarbe angezeigt wird. Sie können die Farbe und den Titel mithilfe dieser Meta-Tags anpassen:browserconfig.xml
Alle
msapplication
Meta-Tags können entfernt und durch eine XML-Datei im Stammverzeichnis ersetzt werdenbrowserconfig.xml
. Die XML-Datei sollte folgendermaßen aussehen:Weiterführende Literatur & Ressourcen
Favicon Spickzettel
Favicons, Touch Icons, Tile Icons, etc. Was brauchen Sie? - Als Quiz geschrieben, enthält aber viele nützliche Informationen (und Sie können es einfach als Artikel lesen, vergessen Sie, dass es ein Quiz ist)
Das Icon-Handbuch
ImageMagick - Nützliches Befehlszeilentool zum Konvertieren von Bildern.
RealFaviconGenerator.net - Umfassender Favicon-Generator.
FAVIC-O-MATIC - Umfassender Favicon-Generator mit einfach anpassbaren Ausgabeformaten.
quelle
Dieses Tool spart viel Zeit. Versuch es! Es kümmert sich um alles für Sie.
Laden Sie Ihr Bild mit einer Auflösung von 800 x 800 Pixel hoch, damit es schön und klar ist.
http://realfavicongenerator.net/
Fügen Sie auch dieses Meta-Tag hinzu, damit Sie Ihr Symbol benennen können, wenn einige auf dem iOS-Gerät gespeichert werden.
<meta name="apple-mobile-web-app-title" content="Website Name">
Hoffentlich hilft das!
quelle
Verwenden Sie diese GRUNT-Aufgabe, um alle möglichen Varianten zu generieren:
https://github.com/gleero/grunt-favicons
Erzeugt alle bekannten Symbole für Typen und Größen aus PNG-Bildern. Verwendet ImageMagick.
Eingabe: Quadratisches Logo in png. Sie können auch in der Nähe der Quelldateien mit dem Auflösungspräfix "source.16x16.png" bleiben.
Ausgabe:
Fügt der HTML-Datei Änderungen hinzu.
quelle
http://faviconit.com
erstellt aus einem hochauflösenden PNG ungefähr 15 verschiedene Symbolgrößen für alle Geräte.
quelle
Auch ich war auf der Suche nach einer Favicon-Lösung und wollte mich nicht auf Webservices von Drittanbietern verlassen. Ich konnte keine generischen Lösungen finden, die als einfacher Erstellungsschritt funktionieren würden, daher habe ich faviconbuild erstellt . Es basiert auf ImageMagick, sodass Sie die neueste Version für Ihr System herunterladen oder einige verwenden können, die ich in meinen Releases bereitgestellt habe .
Ich habe es unter der MIT-Lizenz veröffentlicht, damit jeder es für den kommerziellen oder persönlichen Gebrauch verwenden oder sich einfach davon inspirieren lassen kann. Wenn Sie Fehler finden oder erweitern möchten, können Sie sich gerne daran beteiligen .
Ich werde die Projektseite mit detaillierteren Informationen aktualisieren , aber sie verfügt bereits über ein sehr praktisches und standardmäßiges Hilfemenü und funktioniert unter Unix, Mac und Windows.
Sie führen einfach entweder das BAT- oder das SH-Skript in Ihrem Terminal aus.
ex für Windows:
oder für Unix / Mac (oder Windows, wenn Cygwin verwendet wird):
Dadurch erhalten Sie die Versionsinformationen zusammen mit den verfügbaren Optionen. Das Skript erstellt ein Eingabebild und gibt alle erforderlichen Bilder sowie das erforderliche HTML-Markup aus, das auf Ihrer Website enthalten sein soll.
Dies ist ein Beispiel, wie ich es derzeit in einem meiner Projekte verwende:
Ich habe den Ordner faviconbuild einfach in einen projektspezifischen Ordner gelegt, damit ich nicht die eigentlichen Projektdateien und die Seite berühren musste, auf der ich meine Datei source.png platziert habe. Das Standardverhalten des Skripts besteht darin, alles in einen verschachtelten Erstellungsordner zu verschieben, der gitignored ist, damit er nicht mit dem Projekt in Konflikt gerät, wenn Sie git verwenden.
Wenn ich etwas vermisse, reichen Sie bitte eine Funktionsanfrage ein.
Ich habe auch einen Blogeintrag mit weiteren Informationen.
Ich hoffe, Sie finden das nützlich.
quelle
Hier finden Sie viele nützliche Informationen zu Favicon-Größen und Generatoren.
Ich kann die Diskussion ergänzen, indem ich die Designbedürfnisse der verschiedenen Größen erkläre.
Ja, die Favicon-, Symbol-, Symbol- und Logo-Größen können auf derselben Grafik basieren, aber jede muss speziell auf diese Größe gerendert werden, um die genaueste Darstellung zu erzielen (ich sage, dass die Auto-Generatoren das Aliasing und die Farbverläufe auf der nicht gut verarbeiten Die 16-Pixel-Größe und das automatisch generierte Bild werden nicht für die 128-Pixel-Größe optimiert, wenn Sie kleiner anfangen.
Zeichnen Sie Ihre Kunst mit 128 Pixeln oder einem beliebigen quadratischen Format und verwenden Sie dabei alle gewünschten 3D-Tricks. Exportieren Sie die verschiedenen Größensymbole nacheinander, überprüfen Sie das Ergebnis und stellen Sie den Master so ein, dass er bei dieser Größe am besten funktioniert.
Für das 16 x 16-Format erstelle ich ein 16 x 16-Raster aus Quadraten und male sie einzeln aus, um die Ausgabe optimal zu steuern.
quelle