Ich versuche, mich mit all diesen verschiedenen Größen und Formaten vertraut zu machen, die für Favicons, Touch-Symbole und jetzt auch für Kachelsymbole benötigt werden.
Ich habe diesen Beitrag gelesen: http://www.jonathantneal.com/blog/understand-the-favicon, aber ich bin immer noch ein bisschen unklar, was genau zu verwenden ist, das auf allen Geräten und Browsern einigermaßen gut aussieht> = IE8 .
Ich denke, ich sollte Folgendes erstellen:
ICO
favicon.ico (32 x 32)
PNG
favicon.png (96 x 96)
Tile Icon
tileicon.png (144x144)
Apple Touch
-Symbol apple-touch-icon-precomposed.png (152 x 152)
basierend auf diesem https://github.com/h5bp/html5-boilerplate/issues/1367
... und dann diesen Code verwenden, um sie zu bedienen?
<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">
Vermisse ich etwas
Ich bin nicht klar, ob dies IE 10 abdecken wird?
Antworten:
Favicon ist viel komplexer als es sich anhört. Vor 10 Jahren
favicon.ico
war der einzige benötigte Artikel. Dann gab es das Touch-Symbol, dann mehrere Touch-Symbole für die verschiedenen Bildschirmauflösungen von iOS-Geräten, dann gab es das Kachelsymbol für Windows ...Einige Antworten hier sind sehr umfassend - und überwältigend (all dies nur für ein Favicon?). Sie können jedoch nicht angeben, dass das Kachelsymbol 310 x 310 für Windows 558 x 558 empfohlen wird . Und da sie vor einigen Monaten geschrieben wurden, erwähnen sie weder das aktuelle Manifest für Android Chrome M39 noch das SVG-Symbol für Safari unter OS X El Capitan .
Das Design pro Plattform ist ein weiteres schwieriges, aber vernachlässigtes Thema. Zum Beispiel sind Favicon oft transparent. IOS unterstützt jedoch keine Transparenz (vergleichen Sie beispielsweise das SO-Touch-Symbol mit dem, was Sie erhalten, wenn Sie SO zum Startbildschirm Ihres iPhones hinzufügen).
Aus diesen Gründen halte ich es für eine bewährte Methode für Favicon, es nicht manuell zu erstellen. Verwenden Sie stattdessen ein Tool, um den gesamten Prozess zu automatisieren und Plattformrichtlinien durchzusetzen.
Ich rate Ihnen, RealFaviconGenerator zu verwenden . Es generiert alle Bilder und HTML-Code, die Sie benötigen, um die Arbeit zu erledigen:
favicon.ico
und PNG-Symbole für Desktop-BrowserBeispielsweise werden nicht nur das
msapplication-TileImage
Bild und das Markup generiert, sondern auch die neuerebrowserconfig.xml
Datei, die von IE11 unterstützt wird. Es wurde auch vor einigen Monaten aktualisiert, um das Android Chrome-Manifest und Safari OS X El Capitan zu unterstützen.Vollständige Offenlegung: Ich bin der Autor dieser Website.
quelle
<meta name="msapplication-config" content="../path/to/browserconfig.xml">
browserconfig.xml
muss nicht deklariert werden, solange es sich im Stammverzeichnis der Site befindet. IE sucht automatisch danach. In den anderen Fällen (wenn Sie in den Optionen einen bestimmten Pfad eingeben) wird die Deklaration generiert.Hier ist das vollständige (wie ich weiß) Beispiel für Favicon für Handys und Tablets:
Für IE11 gibt es hier eine FAQ
quelle
Es gibt verschiedene Symbole und sogar Begrüßungsbildschirme, die Sie für verschiedene Geräte einstellen können. Diese Antwort erklärt, wie man sie alle unterstützt.
Hier sind einige Ausschnitte, die ich mit relevanten Links zu dem Ort verwendet habe, an dem ich die Informationen gesammelt habe. In meinem Blog finden Sie weitere Informationen und Informationen zur ASP.NET MVC Boilerplate- Projektvorlage, die alle sofort integriert ist (einschließlich Beispielbilddateien).
Fügen Sie Ihrem HTML-Kopf das folgende Markup hinzu. Die auskommentierten Abschnitte sind völlig optional. Die unkommentierten Abschnitte werden empfohlen, um alle Symbolverwendungen abzudecken. Hab keine Angst, meistens, wenn es Kommentare sind, die dir helfen.
Meine browserconfig.xml-Datei. Vollständige Erklärung oben.
Meine manifest.json-Datei. Vollständige Erklärung oben.
Eine Liste der Dateien im Projekt (Beachten Sie, dass die Namen dieser Dateien wichtig sind, wenn Sie einige davon im Stammverzeichnis Ihres Projekts ablegen möchten, um die Verwendung der oben genannten Meta-Tags zu vermeiden):
Gesamtkosten
Wenn Sie die Kommentare herausnehmen, die 3 KB zusätzlichen HTML-Code enthalten, wenn Sie keine Begrüßungsbildschirme mit 1,5 KB unterstützen. Wenn Sie die GZIP-Komprimierung für Ihre HTML-Inhalte verwenden, was heutzutage jeder tun sollte, verbleiben pro Anforderung etwa 634 Byte Overhead für die Unterstützung aller Plattformen oder 446 Bytes ohne Begrüßungsbildschirme. Ich persönlich denke, es lohnt sich, IOS-, Android- und Windows-Geräte zu unterstützen, aber Sie haben die Wahl, ich gebe nur die Optionen!
Randnotiz zum aktuellen Web-Symbol / Begrüßungsbildschirm / Einstellungen
Diese Situation mit herstellerspezifischen Symbolen, Begrüßungsbildschirmen und speziellen Tags zur Steuerung des Webbrowsers oder angehefteten Symbolen ist lächerlich. In einer perfekten Welt würden wir alle eine favicon.svg-Datei verwenden, die in jeder Größe gut aussehen und am Stamm der Seite platziert werden könnte. Zum Zeitpunkt des Schreibens unterstützt dies nur FireFox (siehe CanIUse.com ).
Symbole sind heutzutage jedoch nicht die einzigen Einstellungen. Es gibt mehrere andere herstellerspezifische Einstellungen (siehe oben), aber eine Datei favicon.svg würde die meisten Anwendungsfälle abdecken.
Aktualisieren
Aktualisiert, um die neue Android / Chrome-Version M39 + Favicon / Theming-Optionen aufzunehmen. Interessanterweise haben sie einen ähnlichen Ansatz wie Microsoft gewählt, verwenden jedoch eine JSON-Datei anstelle von XML.
quelle
favicon-
... ... vorangestellt wird, wenn ich die Namen im Manifest und in<link>
Tags im HTML-Dokument aktualisierehead
?Die einfachste Lösung ist die Verwendung eines (!) PNG-Bildes (im Jahr 2020).
Fügen Sie dies einfach dem Kopf Ihres Dokuments hinzu:
Der letzte Link ist für Apple (Startbildschirm), der zweite für Android (Startbildschirm) und der erste für den Rest.
Beachten Sie, dass diese Lösung in Windows 8/10 KEINE "Kacheln" unterstützt. Es unterstützt Bilder in Verknüpfungen, Lesezeichen und Browser-Registerkarten.
Die Größe entspricht genau der Größe, die der Android-Startbildschirm verwendet. Die Symbolgröße des Apple-Startbildschirms beträgt 60px (3x), also 180px und wird verkleinert. Andere Plattformen verwenden das Standard-Verknüpfungssymbol, das ebenfalls verkleinert wird.
quelle
Ich habe mir tatsächlich die gleiche Frage gestellt und versucht, nach einfachen Projekten zu suchen, die in einen Build-Schritt integriert werden können oder einfach die Erstellung der erforderlichen Assets und Markups vereinfachen.
Ich habe nichts gefunden, was meinen Anforderungen entsprach, also habe ich faviconbuild erstellt und es unter der MIT-Lizenz veröffentlicht .
Der Zweck dieses Projekts besteht darin, ein zentrales, wartbares und lokal ausführbares plattformübergreifendes Dienstprogramm zum Erstellen von Favoriten und zum Unterstützen von Markups zu erstellen. Es nutzt die Leistungsfähigkeit von Imagemagick, sodass Sie diese für Ihre Plattform herunterladen oder die in meinen Releases bereitgestellten verwenden müssen . Sie können dies gerne in kommerziellen oder persönlichen Projekten verwenden, Beiträge leisten, Funktionsanfragen einreichen oder einfach als Inspirationsquelle für Ihre eigenen Dienstprogramme verwenden.
Das Projekt besteht aus einer Batchdatei für Windows und einem Bash-Skript für Unix / Mac (oder Windows über Cygwin). Eine vollständige Liste der unterstützten Optionen erhalten Sie über die interne Hilfeoption -h oder --help.
Ex:
Beide Skripte analysieren eine einfache Textdatei , die Sie auch mit der Option -p oder --parsed überschreiben können. Die Datei ist im Grunde nur eine Vorlage für auszuführende Befehle, sodass Sie die Ausgabe bei Bedarf einfacher anpassen können.
Ich habe auch einen Blog-Beitrag über die Entwicklung und als Mini-Tutorial über Bash / Batch-Scripting veröffentlicht.
quelle