Der folgende Beitrag ist ein Gastbeitrag von Philippe Bernard. Philippe hat recherchiert, was nötig ist, um ein Favicon (und alle zugehörigen Grafiken und Markup) so zu erstellen, dass Sie überall die beste Qualität erzielen. Spoiler-Alarm: Es handelt sich um viele verschiedene Grafiken und Markup. Auch vollständige Offenlegung: Philippe hat ein Tool entwickelt, das dabei hilft und das er im Artikel vorstellt.
Favicons wurden 1999 von Internet Explorer 5 eingeführt ( Referenz ) und wenige Monate später vom W3C standardisiert. Sie sind eine kleine Grafik, die die Website repräsentiert.
Seitdem sind die meisten Desktop-Browser diesem Trend gefolgt und haben Favicons auf irgendeine Weise verwendet. Das ist doch ein einfacher Job, oder? Erstellen Sie einfach ein kleines Bild, das Sie jedem Webprojekt hinzufügen können, um es „fertig“ zu machen. Nichts Besonderes. Oder doch?
Machen wir ein Quiz!
Was ist die primäre Favicon-Datei?
Antwort: favicon.ico. Und nur zur Sicherheit: Dies ist keine PNG-Datei, die in favicon.ico umbenannt wurde. Obwohl einige Browser nachsichtig genug sind, diesen Fehler zu verzeihen, ist ICO ein anderes Format, das mehrere Versionen eines Bildes unterstützt.
Frage: Welche Abmessungen sollte favicon.ico haben?
- A: 16×16. Der Standard.
- B: 32×32. Wurde das Favicon nicht vor einiger Zeit aktualisiert?
- C: 64×64. Sie wissen schon, bei all diesen neuen hochauflösenden Bildschirmen.
- D: Nichts davon.
Antwort: D.
favicon.ico ist ein Format, das ursprünglich von Microsoft entwickelt wurde und dem sich auch andere Anbieter angeschlossen haben. Microsoft empfiehlt 16×16, 32×32 und 48×48. Ja, eine einzige ICO-Datei kann mehrere Grafiken enthalten.
Desktop-Browser verwenden das Favicon oft in einem Tab, und auf Displays mit Standardauflösung ist die 16×16-Version in Ordnung
Aber ein 16×16-Symbol ist für andere Orte zu klein: die Taskleiste und der Desktop.
Sobald das Symbol mehrere Bilder enthält, sind die Ergebnisse viel besser.
Frage: Was ist der Zweck von favicon.png?
Wenn man sich mit dem Thema beschäftigt, stößt man oft auf eine weitere Datei, favicon.png. Die Leute stellen sich ständig Fragen dazu. Was ist das genau?
- A: Ein Symbol für Browser, die
favicon.iconicht unterstützen. Zum Beispiel Firefox? - B: Ein hochauflösendes Symbol. Sie wissen schon, bei all diesen neuen hochauflösenden Displays.
- C: Ein Relikt aus der Vergangenheit. Jetzt gibt es moderne Symbole wie das Apple Touch-Icon.
- D: Antwort D. Es ist kompliziert.
Antwort: D. Seit der Einführung von HTML5 ist favicon.ico nicht mehr sehr nützlich. Das sizes-Attribut wurde eingeführt, um verschiedene Versionen desselben Symbols anzugeben, und diese können PNG-Dateien sein.
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">Was sollen wir also deklarieren?
Seien wir ehrlich: Obwohl alle Desktop-Browser favicon.ico unterstützen, ist diese Datei größtenteils veraltet. Ja, Sie können sich immer noch auf diese Datei verlassen und sie wird wie erwartet funktionieren. Aber ehrlich gesagt, es ist ein altes, veraltetes Format. Es wird nirgendwo anders in der Webtechnologie verwendet. PNG ist viel konsistenter.
favicon.ico ist für alte Versionen von IE. Für die anderen Browser und die neuesten Versionen von IE verwenden wir PNG-Symbole. Welche sizes deklarieren wir dann? Das werden wir bald behandeln.
Frage: Welches Format benötigen wir, um mobile Plattformen zu unterstützen?
Laut SmartInsights werden mehr als 26 % des Webverkehrs von Smartphones und Tablets generiert. Das ist die Zukunft. Was benötigen Sie, um diese Welt zu unterstützen?
- A:
favicon.ico. Es funktionierte vor 15 Jahren, es wird heute funktionieren. - B: PNG-Symbole. Sie sagten, Sie würden darüber sprechen.
- C: Apple Touch-Icon. Duh.
- D: Die richtige Antwort ist sowieso nie aufgeführt.
Antwort: D. Sie benötigen PNG-Symbole. Und Apple Touch-Symbole. Und Windows 8 Kachelgrafiken. Und eine Datei namens browserconfig.xml.
Mobile Plattformen sind viel heterogener als klassische Desktop-Browser. Bildschirmgrößen und Auflösungen variieren stark, und es gibt kein dominierendes Betriebssystem wie Windows, als das Internet zu verbreiten begann. Konsequenz: Erwarten Sie nicht, ein mobiles Favicon mit einer einzigen, universellen Grafik und einer einzigen, universellen Deklaration im HTML-Code zu entwerfen.
Frage: Welche Größen sollten die PNG-Symbole haben?
- A: 96×96 für Google TV
- B: 196×196 für Android Chrome
- C: 228×228 für Coast by Opera
- D: Alle oben genannten
Antwort: D, und mehr. Wie das 160×160 Bild für ältere Versionen von Opera Speed Dial (lange vorbei) oder das 128×128 Icon für den Chrome Web Store, hier kommt es wirklich auf die Plattformen an, die Sie unterstützen möchten.
Frage: Wie groß ist das Apple Touch-Icon?
Das Apple Touch-Icon wird von iOS-Geräten für Lesezeichen und Webseiten „zum Startbildschirm hinzugefügt“ verwendet. Wenn Ihnen die Antwort 57×57 einfällt, herzlichen Glückwunsch. Das ist richtig. Nun, es war richtig, vor 7 Jahren, als das erste iPhone herauskam.
Antwort: Bis zu 180×180.
Seit der Einführung des ersten iPhones gab es drei Hauptversionen
- Das iPad. Sein Bildschirm ist viel größer als das iPhone.
- Der Retina-Bildschirm. Er verdoppelt die Pixeldichte des ursprünglichen Bildschirms.
- iOS 7. Sein flacher Stil verleiht dem Aussehen des iPhone/iPad ein leicht anderes Aussehen.
Insgesamt gibt es neun Kombinationen
| Gerät | Screen | iOS-Version | Symbolgröße |
|---|---|---|---|
| iPhone | Klassisch | 6 und älter | 57×57 |
| 7 | 60×60 | ||
| Retina | 6 und älter | 114×114 | |
| 7 | 120×120 | ||
| 6 Plus | 8 und neuer | 180×180 | |
| iPad | Klassisch | 6 und älter | 72×72 |
| 7 | 76×76 | ||
| Retina | 6 und älter | 144×144 | |
| 7 | 152×152 |
Wenn Sie die richtige Antwort nicht hatten, geben Sie sich keine Schuld. Von den 5.000 Top-Websites, die ein apple-touch-icon.png anzeigen, erhalten nur 4 % das Richtige.
Manche mögen argumentieren, dass 9 Grafiken nicht wirklich notwendig sind. Aber zumindest sollte Ihr Master-Apple-Touch-Icon 152×152 sein. Ein Retina iPad mit iOS 7 findet, was es braucht, und kleinere Geräte können ein solches Bild nach Bedarf herunterskalieren.
Frage: Ist es notwendig, die Apple Touch-Icons im HTML zu deklarieren?
- A: Ich weiß es nicht. Komm schon, du musst etwas antworten!
- B: Ja. Wie sollte iOS sie sonst finden?
- C: Nein. Apple definiert Konventionen, damit iOS-Geräte sie trotzdem finden können.
- D: Nein, aber…
Antwort: D... aber da auch andere Plattformen das Apple Touch-Icon verwenden, ist es sicherer, es trotzdem zu deklarieren.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">So seltsam es auch klingen mag, iOS-Geräte sind nicht die einzigen, die nach dem Apple Touch-Icon suchen. Da diese Symbole beliebt und verbreiteter sind als hochauflösende PNG-Symbole, verwenden einige Browser wie Android Chrome sie. Daher ist die Deklaration sicherer, falls ein Besucher mit einem kompatiblen Gerät oder Browser eines davon verarbeiten kann.
Frage: Was ist erforderlich, um eine Kachel für Windows 8-Tablets zu definieren?
- A: Windows 8-Tablet? Was ist das?
- B:
favicon.ico. Steve Ballmer-Erbe. - C: Zwei Meta-Tags
msapplication-TileColorundmsapplication-TileImage. - D:
browserconfig.xml.
Antwort: C für Windows 8.0 und IE 10, D für Windows 8.1 und IE 11. Antwort A ist irgendwie auch korrekt.
Die Deklaration für Windows 8.0 sieht typischerweise so aus
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">Windows 8.1 und IE 11 setzen auf mehrere Kachelbilder, die in browserconfig.xml deklariert sind. Zum Beispiel
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<TileColor>#2b5797</TileColor>
</tile>
</msapplication>
</browserconfig>Die neue Metro-UI bringt eine neue Reihe von Richtlinien mit sich, wie die „weißen Silhouetten“, die von den meisten integrierten Apps verwendet werden.
Frage: Welche Größe hat das Kachelbild square150x150logo?
- A: 150×150. Können Sie nicht lesen?
- B: Etwas anderes.
Antwort: B, 270×270. Microsoft empfiehlt größere Größen, um hochauflösende Bildschirme zu unterstützen.
Herzlichen Glückwunsch, Sie haben das Quiz abgeschlossen! Wie haben Sie abgeschnitten?
Der Sinn dieser Fragen war es, darauf hinzuweisen, wie knifflig dieses Thema trotz seiner scheinbaren Einfachheit ist. Die Zeit, als ein Favicon eine einzige favicon.ico-Datei war, ist lange vorbei. Aber alte Gewohnheiten bleiben bestehen und führen zu absurden Situationen. Wir können Tage damit verbringen, ein super schickes responsives Design zu erstellen, und dann nur ein 57×57 Apple Touch-Icon verwenden, das nur für alte Geräte geeignet ist, die kaum noch genutzt werden.
Ein Favicon-Generator für das mobile Zeitalter
Im Jahr 2014 ist die Erstellung eines plattformübergreifenden Favicons komplex und schwierig richtig zu machen. Sicher, Sie können mit favicon.ico, einem 32×32 PNG-Bild und einem 152×152 apple-touch-icon.png im Stammverzeichnis Ihrer Website ein anständiges Ergebnis erzielen. Aber es kann mehr als ein Dutzend Bilder erfordern, um die Aufgabe zu erledigen. Es sei denn, wir arbeiten an einem riesigen Projekt mit entsprechendem Budget, normalerweise haben wir nicht so viel Zeit, um diese kleine Aufgabe zu erledigen.
Als Autor von RealFaviconGenerator gebe ich Ihnen einen weisen Rat: Nutzen Sie RealFaviconGenerator. Im Gegensatz zu den üblichen Favicon-Generatoren erfüllt er zwei Bedürfnisse.
Verschiedene Plattformen beinhalten unterschiedliche Benutzeroberflächen. Obwohl es sicherlich keine Online-Version von Photoshop ist, bietet RealFaviconGenerator einige Einstellungen, um anständige Symbole für verschiedene Plattformen zu entwerfen. Wie ein opaker Hintergrund für iOS (Apple verhindert transparente Symbole) oder eine weiße Silhouette für Windows 8.
Generieren Sie alle Bilder und HTML-Codes, die Sie benötigen, um die wichtigsten Plattformen abzudecken: PC/Mac, iOS, Android, Windows 8 usw. Die generierten Bilder und Codes wurden ausgiebig getestet, um sicherzustellen, dass der Dienst sein Versprechen hält.
Zum Beispiel konnte ich durch Einreichen eines hochauflösenden Symbols diese Reihe von Symbolen mit wenigen Klicks generieren.
Jetzt ist es so einfach wie vor 10 Jahren: Machen Sie eine Grafik und 5 Minuten später haben Sie Ihr aktuelles Favicon am Werk.
Ich bin mir ziemlich sicher, dass Firefox .ico-Dateien unterstützt; ich verwende sie seit Jahren auf meiner Website und konnte das Favicon immer sehen, wenn ich FF (meinen Hauptbrowser) verwende.
Ich bestätige, dass dies der Fall ist. Wenn Sie FF ein favicon.ico-Symbol und verschiedene PNG-Symbole anbieten, bevorzugt es das 32×32 PNG-Bild. Aber favicon.ico ist immer noch eine ausgezeichnete Fallback-Lösung.
Der ganze Favicon-Schlamassel ist lächerlich. Es sollte nur einen einzigen Weg geben, auf das Symbol zuzugreifen – die Browser würden sich um den Rest kümmern.
Ich stimme zu, und seien wir uns klar, dass es hier um mehr als nur Favicons geht, wenn man etwas Gleiches oder Ähnliches für Apple Touch erstellen muss. Ich verbringe viel zu viel Zeit damit, da auf dem Laufenden zu bleiben. Meine persönliche Tabelle, die ich zur Dokumentation dieser Dinge verwende, ist in ständigem Wandel. Ich füge Informationen wie aus diesem Artikel hinzu, wenn sie verfügbar werden, aber ich kann nicht sicher sein, wenn ich morgen darauf verweise, dass sie noch aktuell sind. Und wenn Sie Symbole oder Bilder für die verschiedenen sozialen Medien hinzufügen, wird es zum Albtraum.
Dem stimme ich zu.
Das ist wirklich lächerlich, wenn man darüber nachdenkt.
Antrag genehmigt.
Es war andersherum. IE führte Favicons als proprietäres Feature ein, und da andere Browser diesem Beispiel folgen wollten, wurde es später im selben Jahr standardisiert.
Verdammt! Ich bin bei meinem eigenen Quiz durchgefallen! :(
Perfekt, genau das, was ich gesucht habe! Danke, Chris!
Guter Artikel. Ich war gerade dabei, mich darüber zu informieren. Sie, mein Herr, haben mir viel Zeit gespart!!!
Schönes Tool, das Sie gebaut haben!
Vielen Dank!!!
Danke! :)
Ich habe heute viel gelernt! Danke für den Gastbeitrag und ich kann mir vorstellen, den Generator bald zu benutzen.
Hmm, immer noch etwas skeptisch bezüglich der benötigten Anzahl an Formaten.
Ich sehe nicht ein, warum so viele PNGs benötigt werden, wenn, soweit ich weiß, alle Browser ICO als Format akzeptieren und die bevorzugte Größe innerhalb dieses ICO auswählen.
Auch, soweit ich weiß, werden alle Geräte das apple-touch-icon verwenden und es dann für andere Geräte skalieren.
Selbstverständlich können Sie mich gerne korrigieren, es gibt immer widersprüchliche Beiträge, wenn es um Favicons usw. geht.
Trotzdem ein großartiger Beitrag :)
Es sei denn, Sie wollen Ihre Symbole wirklich perfekt und in jeder Größe haben (und verwenden daher nicht einfach einen automatischen Generator, was den Zweck verfehlt), brauchen Sie nur zwei.
favicon.ico: 32×32 PNG-Datei mit der Erweiterung .ico, die bei 16×16 gut aussieht. Sie müssen sie nicht einmal im HTML referenzieren, Browser suchen automatisch danach im Stammverzeichnis, also: http://www.example.com/favicon.ico
eine 152×152 PNG-Datei, referenziert als
<link rel="apple-touch-icon" href="/icon.png">Es ist nicht nötig, jede einzelne Anfrage mit so viel Code zu überladen.
Nun, Sie können immer mehrere Bilder (sonst unterschiedliche Bilder) in die ICO-Datei einfügen. Alle einzelnen PNG-Anfragen sind somit nutzlos. (Ich bin mir ziemlich sicher, dass alle Browser die ICO-Datei verwenden).
Ich verstehe, dass einige Browser (nicht sicher, ob alle) im Stammverzeichnis nach dem Favicon suchen. Dennoch denke ich, es ist genauso gut, den Link dazu einzufügen.
Danke!
Ja, das ist viel Code und viele Bilder. Die Kombination aus favicon.ico + apple-touch-icon.png leistet gute Arbeit. Dann ist es eine Frage, wie viele Plattformen wir unterstützen wollen und wie „gut“ wir sie unterstützen wollen. Zum Beispiel hat mir jemand einmal gesagt, er wolle den Nearest-Neighbor-Algorithmus verwenden, um sein Symbol zu verkleinern (es war Pixel-Art; der durch normale Skalierungsalgorithmen wie Mitchell entstehende Unschärfe-Effekt passt nicht). Wenn er nur ein 152×152-Symbol für ein iPhone bereitgestellt hätte, wäre das Ergebnis wahrscheinlich anders ausgefallen als erwartet. Hier ist es sinnvoll, das Symbol zur Entwurfszeit zu skalieren und alle Versionen für die verschiedenen Geräte bereitzustellen. Ja, das ist ein kniffliger Anwendungsfall!
Wenn ich sehe, wie kompliziert es heutzutage ist, Symbole richtig hinzubekommen… Ich kann nicht anders, als zu denken: „Das ist verdammt viel Mist“.
Ist das nicht einer der Fälle, in denen SVG uns viel Ärger ersparen würde?
Ernsthaft, das ist viel komplizierter, als es sein müsste.
Dies sollte alles abdecken (tut es aber nicht)
<link rel="icon" type="image/svg" sizes="any" href="favicon.svg"/>Bis bald in 5 Jahren :)
Sie bringen immer Artikel heraus, gerade wenn ich sie brauche! Toller Beitrag!
Ich habe auch eine erstaunliche Grunt-Aufgabe gefunden, um diesen Durcheinander zu automatisieren: https://github.com/gleero/grunt-favicons
Das Leben ist jetzt viel einfacher…
Ich habe Ihr Tool schon früher benutzt. Schön zu wissen, dass es tatsächlich ein gutes ist!
H5BP hat aufgehört, sich mit so vielen Symbolen zu befassen… das ergibt für mich Sinn. Lohnt es sich wirklich, so viele Dateien zu verwenden? Das überfüllt Ihr Stammverzeichnis.
Danke!
Ja, ich gebe zu, ich bin nicht zu 100 % zufrieden, wenn ich den generierten Code in mein eigenes HTML kopiere. So viele ähnliche Zeilen. Meine innere Stimme sagt mir, es muss einen besseren Weg geben.
Ich werde versuchen, die Menge an Code und Bildern zu reduzieren. Aber das wird viel Testen erfordern, um sicherzustellen, dass Kompatibilität und Qualität nicht beeinträchtigt werden. Das wird also nicht so bald fertig sein…
Fantastischer Beitrag – fantastisches Tool!
Danke!!
rel=icon href=gnome.svg sizes=any type="image/svg+xml"gilt für jede Größe.Spezifikation http://www.w3.org/TR/html5/links.html#attr-link-sizes-any
Status
* Chrome https://code.google.com/p/chromium/issues/detail?id=294179
* Webkit https://bugs.webkit.org/show_bug.cgi?id=136059
* Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=366324
* IE https://connect.microsoft.com/IE/feedback/details/782416/svg-favicon-support (Geschlossen als „Wird nicht behoben“)
Favicons werden heute am meisten unterschätzt. Wenn Sie dem psychologytoday-Blog folgen, erfahren Sie, dass Favicons auch Einfluss auf die Absprungrate und Konversion haben.
Ja, Favicon wird eindeutig unterschätzt. Als Entwickler bin ich mehr besorgt über die technologische Unterschätzung (Web-Entwickler/Designer übersehen es) als über die psychologische. Aber ich zweifle nicht daran, dass ein schickes Apple Touch-Icon einen Unterschied bei der Rate der „Zum Startbildschirm hinzufügen“ einer Website machen kann.
Ich habe mich nie wirklich um Favicons gekümmert – ich habe ein wenig Arbeit geleistet und wenn ich es auf all meinen Geräten sehen konnte, habe ich es dabei belassen. Die Angelegenheit scheint viel komplexer zu sein, und ich werde versuchen, Ihren Rat in Zukunft zu befolgen.
Guter Beitrag! :)
Danke!
Ich schätze, das ist eine nutzlose Funktion von Browsern. Könnte Chris nicht mehr zustimmen
Soweit ich weiß, benötigen Sie nicht unbedingt die browserconfig.xml für Windows 8-Kacheln – laut buildmypinnedsite.com können Sie diese Informationen einfach als normale Meta-Tags hinzufügen.
Ich denke, Sie brauchen es nur, wenn Sie möchten, dass es eine Live-Kachel ist, die Daten aus einem RSS-Feed zieht. Übrigens, diese Kacheln funktionieren jetzt auch mit IE11 unter Windows Phone 8.1
Das stimmt, Kacheldeklarationen können direkt im HTML-Code stehen. Ich denke jedoch, dass es eine gute Praxis ist, sie in die Datei browserconfig.xml zu legen. Da die meisten Besucher kein Windows 8 RT verwenden, hilft das Platzieren der Kacheln in einer externen Datei, einige Bytes im HTML zu sparen. Und es macht es etwas lesbarer.
Sie sollten alle SVG unterstützen und damit fertig sein.
Es wäre keine Webentwicklung, wenn sie nicht auf jeder Plattform anders aussehen würde.
STOPPT DIESEN WAHNSINN!
SVG-Icons für alle, bitte!!!
Ich bin mehr Programmierer als Designer, aber ich finde diesen Beitrag wirklich interessant. Mir war nicht bewusst, dass das so ein kompliziertes Thema ist. Danke.
Die beste OS X-App, die ich zum Erstellen von Icons gefunden habe, ist zweifellos Icon Slate. Sie erstellt ICO-Dateien aus einem Stück mit jeder Favicon-Größe bis zu 256×256, und wenn Sie Ihre handgezeichneten 16×16 Favicons behalten möchten, ziehen Sie sie einfach auf das Kachel für 16×16. Für Webclip-Icons fügt sie auf Wunsch sogar abgerundete Ecken für iOS 6 oder iOS 7 hinzu! Und all diese verschiedenen Webclip-Größen sind unnötig. Als die Retina-Displays zum ersten Mal aufkamen, habe ich experimentiert und meine Icons 512×512 gemacht, und sie wurden automatisch für Bildschirme mit geringerer Auflösung skaliert, sogar auf Android. 1024×1024 funktioniert auch, aber das ist übertrieben... bisher.
Ich habe mich vor nicht allzu langer Zeit mit Favicons beschäftigt und bin auf den folgenden Code für meine Websites gestoßen, und er scheint meiner Erfahrung nach gut zu funktionieren.
Ich habe eine Antwort auf StackOverflow zu diesem Thema mit zusätzlichen Details geschrieben.
Ich habe jedoch noch eine Frage. Muss ich für Windows 8.1 und IE 11+ eine XML-Datei für die Kacheln verwenden, oder wird der "ältere" Code verwendet?
Zu Windows 8.1: Sie können immer noch die "alten" 144×144 Kachelbilder verwenden, die im HTML-Code deklariert sind. Es gibt zwei (kleine) Nachteile
Ihre Besucher können nur eine mittelgroße quadratische Kachel auswählen. Aber keine kleine quadratische Kachel, keine große quadratische Kachel und keine rechteckige Kachel.
Da Microsoft größere Bilder empfiehlt (z. B. 558×558 für square310x310logo), um hochauflösende Bildschirme zu unterstützen, können Sie erwarten, dass das "alte" 144×144-Bild für bestimmte Bildschirme zu klein ist. Gibt es solche Geräte bereits? Das weiß ich wirklich nicht.
Beachten Sie auch, dass die Kacheldeklarationen von browserconfig.xml direkt im HTML-Code stehen können. Sie müssen also keine weitere Datei generieren, obwohl ich es empfehlen würde.
Hallo Chris, vielen Dank für diesen großartigen Beitrag. Er hat mir gefallen, jetzt weiß ich, wie ich mit allen Arten von Favicons umgehen kann....
Sehr hilfreiche Ressource. Vielen Dank für Ihren ausführlichen Beitrag.
Danke!
Ich frage mich, ob Browser (zumindest die meisten, insbesondere mobile Geräte) angewiesen sind, die "richtige" Datei zu laden, oder ob all diese Dinge schmerzhafte Anfragen verursachen...
Ja, mobile Browser sind schlau genug, nur das beste Icon auszuwählen.
Warum können sie nicht einfach SVG unterstützen, so etwas wie
favicon.svgund das ist für alle Auflösungen, Dichten, fast alles erledigt. Aber nein... nein... das können sie nicht. Das macht mich zu einem traurigen Panda.SVG ist eindeutig die technische Lösung für den Favicon-Aufwand. Doch ein Problem bleibt: die unterschiedlichen Designrichtlinien. Zum Beispiel verwenden klassische Favicons oft Transparenz, während iOS Transparenz im Touch-Icon verbietet. Nichts kann jemals einfach sein, NIEMALS!! :)
Dummes Kommentarsystem, ich kann nicht auf Ihre Antwort antworten. Dennoch sind das dumme Designregeln, die von einer proprietären Geldmaschine erfunden wurden, die so viele totale Idioten aus keinem ersichtlichen Grund weiter anbeten. Das Einzige, was zählt, ist, was die freie Web-Welt hier zu sagen hat, und das ist einfach: Transparenz zulassen! Geben Sie den Entwicklern und Designern ihre Freiheit, zu tun, was sie wollen.
Ich kümmere mich im Allgemeinen sicherlich nicht um die Designregeln anderer. Natürlich könnte jeder Entwickler oder Designer diese Randfälle leicht bewältigen, indem er einfach keine Transparenz verwendet, weil er die Hipster-Hardware unterstützen möchte, na dann mal los. :)
http://realfavicongenerator.net/ funktioniert nicht mehr, habe es mehrmals versucht und bin gescheitert.
Oh :-/ Im Moment funktioniert es. Haben Sie noch ein Problem, ist es bei Ihnen auch in Ordnung?
Super Überblick über Favicons. Danke dafür.
Grüße aus Berlin
Windows 8.1 erlaubt tatsächlich 4 verschiedene Kachelgrößen, schade, dass der Favicon-Generator das nicht hat.
http://www.buildmypinnedsite.com/
Das stimmt! Der Generator generiert sie, aber er lässt Sie nur die klassische "mittelgroße quadratische" Kachel gestalten und leitet die anderen davon ab.
Es gibt ein Ticket dafür (https://github.com/RealFaviconGenerator/realfavicongenerator/issues/16), aber ich gebe zu, ich habe noch viele Dinge zu tun, bevor das...
Danke für den Link! Ich kannte dieses Tool von Microsoft, konnte es aber nicht wiederfinden.
Toller Artikel :)
Danke
Danke!
Vielen Dank dafür, das ist sehr hilfreich für etwas, das zu einem Minenfeld wurde. Ich denke, wir müssen akzeptieren, dass Browser sich nie einigen werden, und so verlassen wir uns auf Tools wie dieses. Danke, dass Sie sich die Zeit genommen haben, diesen Artikel zu schreiben, informativ und unterhaltsam!
Danke!!
Jemand sollte eine Grunt/Gulp-Aufgabe zum Erstellen all dieser Icons machen.
Ich plane, das in den nächsten Monaten zu tun. Zuerst muss die API (http://realfavicongenerator.net/api) aktualisiert werden, da sie für interaktive Szenarien konzipiert ist.
Ich freue mich zu wissen, dass einige Leute tatsächlich an einem Grunt-Plugin interessiert sind! :)
A: Windows 8-Tablet? Was ist das?
Eigentlich ist das wahrer, als Sie beabsichtigt haben (bezüglich Ihrer schnippischen Bemerkung später), da browserconfig nicht nur von Tablets, sondern von jedem Windows 8/8.1-System verwendet wird, auf dem IE der Standardbrowser ist (und ja, das schreit nach Trollen...). Das können Tablets, Hybride wie das Yoga oder auch Desktops sein, auf denen Leute ein Lesezeichen auf ihrem Startbildschirm anheften könnten (was übrigens schön ist, wenn es für Ihr eigenes Unternehmen verwendet wird).
Auch wenn die meisten Entwickler IE nicht mehr als Standardbrowser verwenden werden, tun es viele Leute, daher ist die Unterstützung für Icons für all diese schön.
Ich stimme Tracey Rickard zu: "Vielen Dank dafür, das ist sehr hilfreich für etwas, das zu einem Minenfeld wurde. Ich denke, wir müssen akzeptieren, dass Browser sich nie einigen werden, und so verlassen wir uns auf Tools wie dieses. Danke, dass Sie sich die Zeit genommen haben, diesen Artikel zu schreiben, informativ und unterhaltsam!"
Jetzt brauche ich mehr Zeit, um das Logo meiner Website zu gestalten, um all das zu erstellen, was Sie in Ihrem Artikel gesagt haben.
Toller Artikel & Danke :)
Danke!
Probieren Sie den Generator aus, Sie werden sicher Zeit sparen :)
Schauen Sie sich diesen Artikel für eine abgespeckte Lösung an: http://www.jonathantneal.com/blog/understand-the-favicon/
Diese Menge an Markup ist verrückt für etwas so Triviales.
seufz Wenn es doch nur ein Bildformat gäbe, das verschiedene Größen unterstützt, dann müssten wir nur eine Deklaration einfügen... oh warte, gibt es ja, favicon.ico! Oh, aber das ist veraltet. Verdammt Sarkasmus
Ich wünschte wirklich, das PNG-Format (und JPEG übrigens auch) würde erweitert, um mehrere Bilder in einer Datei zu enthalten, genau wie das proprietäre PNG-Format von Adobe Fireworks. Es wäre großartig, nur eine Datei mit allen Auflösungen zu erstellen, und wenn dann ein neues Gerät käme, das eine weitere Größe benötigt, könnte es einfach die nächstgelegene auswählen. Wir können nur hoffen.
Immerhin bringen die mehreren PNG-Bilder einen Vorteil: Ein Browser kann nur das auswählen, was er braucht. Zum Beispiel lädt Win8/FF das 32×32 PNG-Icon (meines ist nur 632 Bytes) und nicht das 196×196 (4KB in meinem Fall). Kein großes Geschäft, aber Favicons sind kein Bereich, in dem die Leute bereit sind, unnötige Bandbreite zu verbrauchen.
Verschwendung von mobiler Bandbreite dabei... aber ja, es wäre viel einfacher.
Wow, sehr cooler Beitrag. Ich habe einige dieser Dinge selbst herausgefunden, aber vorher nicht an alle gedacht.
Danke! :)
Sobald Sie diesen Dschungel durchschritten haben, fügen Sie die Grafiken für Facebook, Twitter und Pinterest hinzu. Vergessen Sie nicht Google+ und stellen Sie sicher, dass Sie mit browserconfig.xml zukunftskompatibel sind. Nebenbei: Fügen Sie eine cache.manifest hinzu, damit sie auch dann schnell geladen werden, wenn Ihr Benutzer mit einer schlechten mobilen Verbindung erneut besucht, zumindest die eingebetteten Web-Schriften, die Sie verwenden, im Cache speichern. Oh, habe ich erwähnt, dass die Seite in weniger als 200 ms geladen werden muss?
Ich bin raus...
Ja, das ist ein langer Weg... :-/
Wow, es ist so schwer, eine klare Antwort zu diesem Thema zu bekommen. Dieser Artikel ist ein brillanter, klarer und gut dargestellter Überblick über das Ganze. Eine großartige Ressource. Tolle Arbeit und vielen Dank. :-)
Danke!
Bitte löschen Sie meinen vorherigen Kommentar (Code wird nicht angezeigt)
Hier ist meine abgespeckte Lösung.
Ein 4-8 KB Icon ist für einen Browser zum Herunterladen (und gegebenenfalls zur Größenänderung) völlig in Ordnung.
Es gibt wirklich keinen Bedarf für so viele Dateien und Variationen
<link rel=”icon” type=”image/png” href=”favicon.png” />
<!–[if IE]><link rel=”shortcut icon” type=”image/x-icon” href=”favicon.ico”><![endif]–>
<link rel=”apple-touch-icon” href=”apple-touch-icon.png” />
<meta name=”msapplication-TileColor” content=”#111111″ />
<meta name=”msapplication-TileImage” content=”mstile.png” />
favicon.png ist 96×96
favicon.ico wurde mit RealFaviconGenerator erstellt (ich gehe davon aus, dass es 3 verschiedene Größen enthält)
apple-touch-icon.png ist 152×152
mstile.png ist 144×144
http://jsfiddle.net/nqf7hhjj/1/
Viel Spaß
Toller Artikel, er hebt das Problem hervor, mit so vielen zu berücksichtigenden Basen, sozusagen. Die Auswirkungen so vieler zusätzlicher Anfragen könnten schädlicher sein als die Vorteile für die Benutzer.
Danke!
Die Auswirkungen auf die Leistung sind begrenzt. Grundsätzlich laden Browser das, was sie brauchen. Siehe zum Beispiel http://stackoverflow.com/questions/24931632/are-apple-touch-icons-always-loaded-by-the-browser/24953671 . Und auch wenn Chrome und FF bekannte Probleme bei der Favicon-Auswahl haben, wurde dies anscheinend in neueren Versionen behoben (oder zumindest verbessert).
8 (ACHT!) Favicons im Header zu deklarieren ist wirklich hässlich! Und das nur für Apple Touch?!
Ich mag die browserconfig.xml-Methode, viel eleganter. Wenn doch nur mehr Browser das verwenden würden!
Aber wenn Sie das Favicon in browserconfig.xml deklarieren, warum nicht CSS, warum nicht JS, warum nicht OpenGraph-Daten, oder warum hat OpenGraph kein OpenGraph.xml... sage ich nur :-/ Verfluchter Albtraum!
Ich denke, zum Beispiel können Sie einfach die iOS8-Größen für iPhone und iPad verwenden und den Rest ignorieren, da sie ohnehin in ein oder zwei Jahren veraltet sein werden.
Herzlichen Glückwunsch! Sie haben gerade das nächste Buch von A Book Apart über Favicons geschrieben.
EH eh, danke! ;)
Vielen Dank. Ich habe Ihre gründliche Analyse der aktuellen Favicon-Situation sehr genossen. Puh! Ihr Werkzeug ist großartig und ich werde es als zukünftige Referenz für Websites verwenden. Vielen Dank!
Danke C :)
Ich bin bei den Quizfragen durchgefallen. Ich schätze, ich bin so 2009!
Das war ein wirklich erhellender Artikel, Philipe. Vielen Dank!
Ich stimme allen anderen zu, dass dies eine lächerliche Menge an Code für etwas so Einfaches ist. Ein neuer Standard muss wirklich aus diesem Chaos entstehen.
In der Zwischenzeit danke, dass Sie mich auf das aufmerksam gemacht haben, was in dieser Multiplattform-, Multi-Browser-, Multi-Screen-Größen-Welt von 2014 benötigt wird.
Vielen Dank für Ihr Feedback! Gern geschehen!
Ich kann nicht glauben, dass ich 17 Zeilen plus ungefähr 20 Dateien brauchte, um ein korrektes Favicon auf meiner Website zu haben...
Das musst du nicht.
Mowgly hat Recht. Die "vielen Zeilen, viele Dateien" sind in Ordnung, wenn sie automatisch für Sie generiert werden. Aber wenn Sie sie manuell erstellen, können Sie diese Zahlen dramatisch reduzieren. Zum Beispiel können Sie einfach ein 152×152 Apple Touch Icon definieren und die verschiedenen Geräte die Grafik selbst verkleinern lassen.
Guter Artikel. Ich benutze Real Favicon Generator ständig. Es ist ein großartiger Service. Lob an den Ersteller :-)
Danke :-)
Bitte löschen Sie meinen vorherigen Kommentar (Code wird nicht angezeigt)
Genialer Beitrag, vielen Dank!
Ich habe einige interessante Beobachtungen zur Reihenfolge der Favicon-Links im Code.
Der Punkt ist, dass unser Logo bei jeder Konvertierung sehr schlecht aussieht, daher haben wir ein separates Favicon für 16×16. Aber als ich Favicons generierte und das 16×16 Favicon durch meines ersetzte, habe ich einen Bug gefangen.
In FF und IE wird das Favicon mit den Größen 16×16 angezeigt, aber es scheint, dass der Browser ein anderes großes Favicon nimmt und versucht, es in 16×16 umzuwandeln. Solche Bugs gibt es in Chrome nicht.
Der ursprüngliche Code war also der folgende
Ich habe einige kleine Änderungen ausprobiert und der Bug wurde durch diesen Code behoben
Das Favicon 16×16 sollte das letzte sein. Nur in diesem Fall nimmt FF und IE genau favicon-16×16.png anstelle des Versuchs, favicon-32×32.png in 16×16 zu konvertieren.
Haben Sie Informationen dazu und warum in Ihrem Generator das Favicon 16×16 nicht das letzte ist und das letzte 32×32 ist? Was ist der Sinn dahinter?
Entschuldigung, ich kann keine Kommentare löschen :-/
Normalerweise ist die automatische Skalierung von Icons durch Browser kein Problem. Gibt es etwas Besonderes mit Ihrem Bild? Ist es Pixel-Art oder so etwas (die Art von Design, die scharfe Kanten benötigt, nicht die verschwommenen Merkmale, die die meisten Resizing-Algorithmen produzieren)?
Anscheinend nimmt IE 11 das größere PNG-Icon, das er finden kann. Mit RFG das 192×192 Icon für Android Chrome. Das ist nicht wirklich eine gute Strategie, besonders wenn andere kleinere Icons, die keine Neuskalierung benötigen, verfügbar sind. Ich fürchte, es gibt keine gute Lösung (außer alle Icons zu löschen und nur das 16×16 Icon anzubieten).
Firefox unterstützt das "sizes"-Attribut nicht (https://bugzilla.mozilla.org/show_bug.cgi?id=751712), daher
Es lädt alle Icons. Großartig.
Es nimmt das letzte.
Die 32×32 sind zuletzt deklariert, um sicherzustellen, dass FF ein ausreichend großes Icon für hochauflösende Bildschirme hat (denken Sie an iMac). Zwei mögliche Workarounds
Wie Sie vorschlagen, können Sie die Zeilen tauschen, um das 16×16 Icon zuletzt zu deklarieren. Sie sollten ein hochauflösendes Max OS-Gerät erhalten, um sicherzustellen, dass das Ergebnis auf einer solchen Plattform in Ordnung ist.
Sie können sicherstellen, dass die 32×32 "perfekt" ist (entweder zeichnen Sie sie von Hand, wie Sie es mit dem 16×16 Icon getan haben, oder Sie spielen mit den Skalierungsalgorithmen, die RFG anbietet) und stellen Sie sicher, dass FF sie nicht zu sehr beschädigt, wenn es sie skaliert.
Ich hoffe, das hilft.