Muss ein Favicon 32x32 oder 16x16 sein?

Ich möchte ein einzelnes Bild sowohl als normales Favicon als auch als iPhone / iPad-freundliches Favicon verwenden.

Ist das möglich? Würde eine iPad-freundliche 72x72 PNG-Skala als normales Browser-Favicon verwendet werden? Oder muss ich ein separates 16x16- oder 32x32-Bild verwenden?

Für IE empfiehlt Microsoft 16x16, 32x32 und 48x48, die in der Datei favicon.ico enthalten sind .

Für iOS empfiehlt Apple bestimmte Dateinamen und Auflösungen , höchstens 180 x 180 für die neuesten Geräte mit iOS 8.

Android Chrome verwendet hauptsächlich ein Manifest und stützt sich auch auf das Apple Touch-Symbol.

IE 10 unter Windows 8.0 erfordert PNG-Bilder und eine Hintergrundfarbe, und IE 11 unter Windows 8.1 und 10 akzeptiert mehrere PNG-Bilder, die in einer dedizierten XML-Datei namens deklariert sindbrowserconfig.xml .

Safari für Mac OS X El Capitan führt ein SVG-Symbol für angeheftete Registerkarten ein .

Einige andere Plattformen suchen nach PNG-Dateien mit verschiedenen Auflösungen, z. B. das 96x96-Bild für Google TV oder das 228x228-Bild für Opera Coast .

Schauen Sie sich diese Favicon-Bilderliste an, um eine vollständige Referenz zu erhalten.

TLDR: Dieser Favicon-Generator kann alle diese Dateien gleichzeitig generieren. Der Generator kann auch als WordPress-Plugin implementiert werden . Vollständige Offenlegung: Ich bin der Autor dieser Website.

Ich sehe hier keine aktuellen Informationen, also hier:

Um diese Frage jetzt zu beantworten, werden 2 Favoriten dies nicht tun, wenn Sie möchten, dass Ihr Symbol überall gut aussieht. Siehe die Größen unten:

16 x 16 - Standardgröße für Browser
24 x 24 - IE9 angeheftete Site-Größe für Benutzeroberfläche
32 x 32 - Registerkarte "Neue Seite" des IE, Windows 7+ Taskleistenschaltfläche, Seitenleiste der Safari-Leseliste
48 x 48 - Windows-Site
57 x 57 - iPod touch , iPhone bis 3G
60 x 60 - iPhone Touch bis iOS7
64 x 64 - Windows-Site, Seitenleiste Safari Reader List in HiDPI / Retina
70 x 70 - Win 8.1 Metro-Kachel
72 x 72 - iPad Touch bis iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - iPhone Retina Touch bis iOS6
120 x 120 - iPhone Retina Touch iOS7
128 x 128 - Chrome Web Store App, Android
144 x 144 - IE10 Metro-Kachel für angeheftete Website, iPad Retina bis iOS6
150 x 150 - Gewinne das 8.1 Metro-Plättchen
152 x 152 - iPad Retina Touch iOS7
196 x 196 - Android Chrome
310 x 150 - Win 8.1 breite Metro-Kachel
310 x 310 - Win 8.1 Metro-Kachel

Ich bin nicht sicher , ob / wie Browser große Symbole skalieren, aber das W3C schlägt vor , die folgenden ¹ :

Das Format für das von Ihnen ausgewählte Bild muss 16 x 16 Pixel oder 32 x 32 Pixel betragen und entweder 8-Bit- oder 24-Bit-Farben verwenden. Das Format des Bildes muss PNG (ein W3C-Standard), GIF oder ICO sein.

¹ w3c.org: So fügen Sie Ihrer Site ein Favicon hinzu (Entwurf in Entwicklung) .

Damit Ihr Favicon in allen Browsern ordnungsgemäß funktioniert, müssen Sie mehr als 10 Dateien in den richtigen Größen und Formaten hinzufügen.

Mein Freund und ich haben eine App dafür erstellt! Sie finden es auf faviconit.com

Wir haben das gemacht, damit die Leute nicht alle diese Bilder und die richtigen Tags von Hand erstellen müssen. Erstellen Sie alle, die mich sehr nerven!

Sie können mehrere Größen von Symbolen in derselben Datei haben. Ich erstelle routinemäßig Favoriten ( .icoDateien) mit 48, 32 und 16 Pixeln. Sie können Bilder in beliebiger Größe hinzufügen. Die Frage ist, wird das iPhone eine icoDatei verwenden?

icounterstützt auch Transparenz, bin mir aber nicht sicher, ob es sich um einen Alphakanal wie PNG handelt; wahrscheinlich eher wie GIF, wo es ein- oder ausgeschaltet ist.

Laut dem Wikipedia-Artikel über Favicon unterstützt Internet Explorer nur das ICO-Format für Favicons.

Ich würde mich an zwei verschiedene Symbole halten.

Das Favicon muss nicht 16x16 oder 32x32 sein. Sie können ein Favicon mit einer Größe von 80 x 80 oder 100 x 100 erstellen. Stellen Sie jedoch sicher, dass beide Werte dieselbe Größe haben, und machen Sie es offensichtlich nicht zu groß oder zu klein. Wählen Sie eine angemessene Größe.

Ich fürchte, Sie benötigen für jede Auflösung separate Dateien. Auf dem Kampagnenmonitor gibt es einen wirklich guten Artikel, in dem beschrieben wird, wie sie ihre Symbole auch für jedes iOS-Gerät erstellt und implementiert haben:

http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/

Wie ich gelernt habe, ist keine dieser verschiedenen Lösungen perfekt. Die Verwendung eines Favicon-Generators ist in der Tat eine gute Lösung, aber ihre Anzahl ist überwältigend und es ist schwer zu wählen. Ich möchte hinzufügen, dass Sie, wenn Ihre Website PWA-fähig sein soll, auch ein 512 x 512-Symbol bereitstellen müssen, wie von Google Devs angegeben :

Symbole, einschließlich einer 192px- und einer 512px-Version

Ich habe nicht viele Favicon-Generatoren getroffen, die diese Kriterien durchgesetzt haben ( Firebase tut es , aber es gibt viele Dinge, die es nicht tut). Die Lösung muss also eine Mischung aus vielen anderen Lösungen sein.

Ich weiß heute zu Beginn des Jahres 2020 nicht, ob die Bereitstellung eines 16x16, 32x32 noch relevant ist. Ich denke, es ist in bestimmten Zusammenhängen immer noch wichtig, z. B. wenn Ihre Benutzer aus irgendeinem Grund immer noch den Internet Explorer verwenden (dies geschieht immer noch in einigen privaten Unternehmen, die aus bestimmten Gründen nicht auf einen neueren Browser migrieren).