favicon.png vs favicon.ico - warum sollte ich PNG anstelle von ICO verwenden?

442

Gibt es außer der Tatsache, dass PNG ein häufigeres Bildformat ist, einen technischen Grund, favicon.png gegenüber favicon.ico zu bevorzugen?

Ich unterstütze moderne Browser, die alle PNG-Lieblingssymbole unterstützen.

png favicon ico Jon Galloway
quelle

Antworten:

233

Antwort ersetzt (und Community-Wiki gedreht) aufgrund zahlreicher Updates und Notizen von verschiedenen anderen in diesem Thread:

  • ICOs und PNGs ermöglichen vollständige Transparenz auf Alpha-Kanal-Basis
  • ICO ermöglicht die Abwärtskompatibilität mit älteren Browsern (z. B. IE6).
  • PNG bietet wahrscheinlich eine breitere Tooling-Unterstützung für Transparenz, aber Sie können auch Tools zum Erstellen von Alpha-Channel-ICOs finden, z. B. das von @mercator erwähnte Dynamic Drive-Tool und das Photoshop-Plugin .

Fühlen Sie sich frei, die anderen Antworten hier für weitere Details zu konsultieren.

Bernstein
quelle
78
ICO erlaubt auch Alpha-Kanal
Álvaro González
58
-1 ICO unterstützt mehrere Auflösungen, einschließlich des vollständigen Alpha-Kanals. 1-Bit-Alpha wird übrigens als "Transparenz" bezeichnet. Die einzige wirkliche Grenze, die ICO hatte, waren Symbole, die größer oder gleich 256 (in jede Richtung) waren, obwohl sie mehrmals überwunden wurden.
Christian
26
-1 .ico erlaubt auch mehrere Auflösungen in einer Datei (z. B. 16x16 und 32x32). Das Symbol bleibt also schön, wenn Sie eine Verknüpfung auf einem Desktop erstellen.
Gagarine
4
Die meisten Browser bevorzugen die Datei favicon.ico im Stammverzeichnis gegenüber der verknüpften. Mit Ihrer Lösung würden die meisten Browser das nicht transparente .ico anstelle des verknüpften PNG auswählen .
Lode
@lode warum sollte es besonders ein nicht transparentes ico anstelle eines transparenten ico wählen?
Rob Grant
367

Alle modernen Browser (getestet mit Chrome 4, Firefox 3.5, IE8, Opera 10 und Safari 4) fordern immer eine an, es favicon.icosei denn, Sie haben ein Verknüpfungssymbol über angegeben <link>. Wenn Sie also keine explizit angeben, ist es am besten, immer eine favicon.icoDatei zu haben, um eine 404 zu vermeiden. Yahoo! schlägt vor, dass Sie es klein und zwischenspeicherbar machen.

Und Sie müssen sich auch nicht nur für die Alpha-Transparenz für ein PNG entscheiden. ICO-Dateien unterstützen Alpha-Transparenz einwandfrei (dh 32-Bit-Farbe), obwohl Sie sie mit kaum einem Tool erstellen können. Ich verwende regelmäßig den FavIcon Generator von Dynamic Drive , um favicon.icoDateien mit Alpha-Transparenz zu erstellen . Es ist das einzige Online-Tool, von dem ich weiß, dass es das kann.

Es gibt auch ein kostenloses Photoshop-Plug-In , mit dem sie erstellt werden können.

Mercator
quelle
6
Toller Hinweis auf dieses Dynamic Drive Tool! Sofort mit einem Lesezeichen versehen. Vielen Dank!
Marcos Buarque
3
In Bezug auf Werkzeuge ist es weitgehend falsch; Es gibt verschiedene Tools zum Entwerfen von Symbolen. Ich habe in der Vergangenheit selbst ein einfaches geschrieben.
Christian
4
Für diejenigen, die nicht $ 650 Dollar für Photoshop haben, können Sie pixlr.com (kostenlos) verwenden, um .png-Dateien mit voller Ebene und Transparenz zu erstellen, zu bearbeiten und zu speichern :)
Scott B
3
@ Pacerier Es ist unglaublich schwierig, .icoin PS zu bearbeiten. Und selbst wenn Sie dies tun, ist das Endergebnis so schlecht, dass Sie denken, es wäre .bmpein besseres Format (es fügt eine Menge Metadaten hinzu, was das erneute Bearbeiten zu einem großen Problem macht).
Christian
4
@mikevoermans: Es wird immer noch als PNG gelesen; Die meisten modernen Browser interessieren sich nicht so sehr für Dateierweiterungen. Übrigens ist dies die beste Antwort und sollte die akzeptierte sein.
Rvighne
48

.png Dateien sind nett, aber ICO - Dateien bieten Alpha-Kanal - Transparenz, auch und sie geben Ihnen die Abwärtskompatibilität.

Schauen Sie sich zum Beispiel an, welchen Typ StackOverflow verwendet (beachten Sie, dass er transparent ist):

<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"> 
<link rel="apple-touch-icon" href="http://sstatic.net/so/apple-touch-icon.png">

Das Apple-Itouch-Ding ist für iPhone-Benutzer, die eine Verknüpfung zu einer Website erstellen.

Wouter van Nifterick
quelle
16
PNG kann auch Alpha-Kanal bereitstellen
Álvaro González
10
Ja, mein Punkt war, dass ico's alles kann, was png's kann (Alpha-Transparenz) als Favicon, und außerdem werden sie seit dem 0. Jahr von allen Browsern unterstützt.
Wouter van Nifterick
Laut Wikipedia unterstützt der Internet Explorer eine Zeile wie diese nicht: <link rel = "icon" type = "image / vnd.microsoft.icon" href = " example.com/image.ico " />
frankster
2
Möglicherweise unterstützt die Website seit dem Jahr 0 keine Browser mehr. Warum also die Mühe machen? Versuchen Sie, eine moderne Website in IE6 zu laden und sehen Sie, was passiert;)
Dominic
26

Der theoretische Vorteil von * .ico-Dateien besteht darin, dass sie Container sind, die mehr als ein Symbol enthalten können. Sie können beispielsweise ein Bild mit Alphakanal und einer 16-Farben-Version für Legacy-Systeme speichern oder 32 x 32- und 48 x 48-Symbole hinzufügen (die angezeigt werden, wenn Sie beispielsweise einen Link zum Windows Explorer ziehen).

Diese gute Idee kollidiert jedoch häufig mit Browser-Implementierungen.

Álvaro González
quelle
Dies hängt damit zusammen, dass IE9 diese großen Symbole auch verwendet, um sie an die Win7-Taskleiste anzuheften. Siehe: stackoverflow.com/questions/3723715/…
GazB
Ähm, theoretisch? Das gleiche mit Windows 7 gelieferte Symbol kann unter Windows 95 im 8-Bit-Farbmodus verwendet werden. Ich denke das ist ziemlich praktisch, nein?
Christian
Bitte beachten Sie, dass diese Antwort im Jahr 2009 geschrieben wurde. Die Browserszene war zu dieser Zeit völlig anders als jetzt.
Álvaro González
15

PNG hat zwei Vorteile: Es ist kleiner und wird häufiger verwendet und unterstützt (außer bei Favicons). Wie bereits erwähnt, kann ICO Symbole mit mehreren Größen haben, was für Desktopanwendungen nützlich ist, für Websites jedoch nicht zu viel. Ich würde Ihnen empfehlen, eine favicon.ico in das Stammverzeichnis Ihrer Anwendung einzufügen. Wenn Sie Zugriff auf den Kopf Ihrer Webseiten haben, verwenden Sie das Tag, um auf eine PNG-Datei zu verweisen. Ein älterer Browser zeigt also die Datei favicon.ico und neuere die PNG an.

Um Png- und Icon-Dateien zu erstellen, würde ich The Gimp empfehlen .

pmoleri
quelle
3
Nicht so sehr für Websites? Warten Sie, bis alle mit der Verwendung von Retina-ähnlichen Displays beginnen. plötzlich wird es einen sehr guten Grund geben, warum man eine 32x32 oder größere Größe in sein Favicon aufnehmen könnte ...
Roman Starkov
1
Wir sprechen über Favicons, daher ist das Thema Unterstützung tatsächlich das Gegenteil von dem, was Sie sagen
David Heffernan,
1
+1 Beantwortet die ursprüngliche Frage und bleibt nicht in der Transparenz hängen. Erwähnt auch eine App, die das .ico-Format unterstützt.
Kovacsbv
12

Einige soziale Tools wie Google+ verwenden eine einfache Methode, um ein Favicon für externe Links abzurufen und http://your.domainname.com/favicon.ico abzurufen

Da der HTML-Inhalt nicht vorab <link>abgerufen wird, funktioniert das Tag nicht. In diesem Fall möchten Sie möglicherweise eine mod_rewrite-Regel verwenden oder die Datei einfach am Standardspeicherort ablegen.

jdavid.net
quelle
1
Ich weiß nicht, ob es wahr oder falsch ist, aber es war das entscheidende Argument für mich, zusätzlich zu png, das ich habe, favicon.ico in root zu erstellen.
Alexei Tenitski
2
Ich weiß das von der Arbeit bei telly.com , über Paul Lindner, der im Google Plus-Team ist. plus.google.com/117259934788907243749/about
jdavid.net
Das Favicon in der Wurzel zu platzieren ist der De-facto- Standard, daher würde ich mich aus Gründen wie den in dieser Antwort genannten daran halten.
Stijn de Witt
8

Ein ico kann sein ein png.

Genauer gesagt können Sie ein oder mehrere PNGs in diesem minimalen Containerformat speichern, anstatt der üblichen Bitmap + Alpha, die jeder stark mit ico verbindet.

Die Unterstützung ist alt, erscheint in Windows Vista (2007) und wird von Browsern gut unterstützt, jedoch nicht unbedingt von Symbolbearbeitungssoftware.

Jedem gültigen PNG (ganz einschließlich Header) können ein 6-Byte-ICO-Header und ein 16-Byte-Image-Verzeichnis vorangestellt werden .
GIMP bietet native Unterstützung. Einfach als ico exportieren und "Compressed (PNG)" ankreuzen.

Adria
quelle
3

Vermeiden Sie PNG auf jeden Fall, wenn Sie eine zuverlässige IE6-Kompatibilität wünschen.

aehlke
quelle
19
Es gibt keinen Grund, warum Sie nicht beide verwenden können - ein ico im Verzeichnisbaum für IE6 und ein PNG, das über a <link>im Seitencode für moderne Browser angegeben ist.
Amber
10
Warum würden Sie beide verwenden? Wenn Sie sich die Mühe machen, ein ico zu machen, welchen Nutzen hätte die Verwendung eines PNG auch? Sicher ist es nur zusätzliche Arbeit und zusätzlicher Code.
Mr_Chimp
@ Mr_Chimp, weil PNG ein offener Standard und zukunftsweisender ist? Es ist eine zusätzliche Zeile Markup.
Wyatt8740
9
Hi @Orcra - Ich denke, Sie würden es nicht so lustig finden, wenn Sie dies vor ~ 8 Jahren gelesen hätten, als ich diese Antwort schrieb, und Dinge wie IE6 berücksichtigen mussten :) StackOverflow ermöglicht das Bearbeiten von Antworten. Sie können es also gerne selbst aktualisieren etwas relevantes heute
aehlke
3
@aehike du hast einen fairen Punkt, mein schlechtes, weil ich den Zeitstempel nicht überprüft habe.
Orcra
0

Für das, was es wert ist, mache ich Folgendes:

    <!-- Favicon - Generic -->
    <link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
    <link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
    <link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
    <link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
    <link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
    <link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
    <link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
    <!-- Favicon - Android -->
    <link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
    <!-- Favicon - iOS -->
    <link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">

Und ich immer noch halten die favicon.ico in root.

s3c
quelle