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 verlinkt sein? Oder muss ich ein separates 16x16- oder 32x32-Image verwenden?
Für IE Microsoft empfiehlt 16x16, 32x32 und 48x48, die in der Datei favicon.ico enthalten sind .
Für iOS Apple empfiehlt bestimmte Dateinamen und Auflösungen , für die neuesten Geräte mit iOS 8 höchstens 180 x 180.
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 browserconfig.xml deklariert sind .
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, wie das 96 x 96 Bild für Google TV oder das 228 x 228 Bild für Opera Coast .
Schauen Sie sich diese an Favicon-Bilderliste für eine vollständige Referenz.
TLDR: Mit diesem Favicon-Generator können alle diese Dateien gleichzeitig generiert werden. Der Generator kann auch als a WordPress Plugin . Vollständige Offenlegung: Ich bin der Autor dieser Website.
Ich sehe hier keine aktuellen Informationen, also hier:
Um diese Frage jetzt zu beantworten, tun es 2 Favoriten nicht, 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 - Größe der angehefteten IE9-Site für die Benutzeroberfläche
32 x 32 - IE neuer Seitenreiter, Windows 7+ Taskleistenschaltfläche, Safari-Leselisten-Seitenleiste
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 - Gewinne 8.1 Metro-Kärtchen
72 x 72 - iPad Touch bis iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - iPhone Retina Touch bis zu iOS6
120 x 120 - iPhone Retina Touch iOS7
128 x 128 - Chrome Web Store-App für Android
144 x 144 - IE10-Metro-Kachel für angeheftete Websites, iPad-Retina bis iOS6
150 x 150 - Gewinne 8.1 Metro-Kärtchen
152 x 152 - iPad Retina Touch iOS7
196 x 196 - Android Chrome
310 x 150 - Gewinnen Sie ein 8,1-faches Metro-Plättchen
310 x 310 - Gewinne 8.1 Metro-Kärtchen
Ich bin nicht sicher, ob und wie Browser große Symbole skalieren, aber das W3C schlägt Folgendes vor1:
Das Format für das ausgewählte Bild muss 16 x 16 Pixel oder 32 x 32 Pixel betragen und entweder 8-Bit- oder 24-Bit-Farben verwenden. Das Bildformat muss PNG (ein W3C-Standard), GIF oder ICO sein.
1 w3c.org: So fügen Sie Ihrer Site ein Favicon hinzu (Entwurf in Entwicklung) .
Tatsächlich müssen Sie mehr als 10 Dateien in den richtigen Größen und Formaten hinzufügen, damit Ihr Favicon in allen Browsern ordnungsgemäß funktioniert.
Mein Freund und ich haben dafür eine App erstellt! Sie finden es in faviconit.com
Wir haben das getan, damit die Leute nicht all diese Bilder und die richtigen Tags von Hand erstellen müssen, sondern all diese, die mich sehr geärgert haben!
Hoffe es hilft dir!
Sie können haben mehrere Größen von Symbolen in derselben Datei. Ich erstelle routinemäßig Favoriten (.ico -Datei) mit 48, 32 und 16 Pixeln. Sie können ein Bild in beliebiger Größe hinzufügen. Die Frage ist, ob das iPhone eine ico -Datei verwendet.
ico unterstützt auch Transparenz, aber ich bin mir nicht sicher, ob es sich um einen Alphakanal wie PNG handelt. wahrscheinlich eher wie GIF, wo es an oder aus ist.
Laut Wikipedia-Artikel auf Favicon unterstützt der Internet Explorer nur das ICO-Format für Favicons.
Ich würde bei zwei verschiedenen Icons bleiben.
Sie werden für jede Auflösung separate Dateien benötigen, fürchte ich. Es gibt einen wirklich guten Artikel über Kampagnenmonitor, in dem beschrieben wird, wie sie ihre Symbole für jedes iOS-Gerät erstellt und implementiert haben:
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
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 dass sie offensichtlich nicht zu groß oder zu klein sind. Wählen Sie eine angemessene Größe.