web-dev-qa-db-de.com

Favicon Dimensionen?

Ich habe ein Favicon mit den Maßen height = 26px/width = 20px mit dem Namen favicon.png

<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />

In meinem Browser ist meine Datei favicon.png jedoch verzerrt.

Frage: Soll meine favicon.png eine bestimmte Größe haben? Kann ich auch eine nicht standardmäßige Größe/Abmessung verwenden und wenn ja, wie?

302
b2000zinger

Kurze Antwort

Das Favicon soll ein Satz von 16x16-, 32x32- und 48x48-Bildern im ICO-Format sein . Das ICO-Format unterscheidet sich von PNG. Nicht quadratische Bilder werden nicht unterstützt.

Um das Favicon zu generieren, empfehle ich Ihnen aus vielen unten erläuterten Gründen, dieses Favicon-Generator zu verwenden. Vollständige Offenlegung: Ich bin der Autor dieser Website.

Lange, umfassende Antwort

Favicon muss quadratisch sein. Desktop-Browser und Apple iOS unterstützen keine nicht quadratischen Symbole.

Das Favicon wird von mehreren Dateien unterstützt:

  • Ein favicon.ico - Symbol.
  • Einige andere PNG-Symbole.

Um die besten Ergebnisse in allen Desktop-Browsern (Windows/IE, MacOS/Safari usw.) zu erzielen, müssen Sie beide Arten von Symbolen kombinieren.

favicon.ico

Obwohl alle Desktop-Browser mit diesem Symbol umgehen können, ist es in erster Linie für ältere Versionen von IE.

Das ICO-Format unterscheidet sich vom PNG-Format. Dieser Punkt ist schwierig, da einige Browser intelligent genug sind, um ein PNG-Bild korrekt zu verarbeiten, selbst wenn es fälschlicherweise mit einer ICO-Erweiterung umbenannt wurde.

Eine ICO-Datei kann mehrere Bilder enthalten und Microsoft empfiehlt, das Symbol in 16x16-, 32x32- und 48x48-Versionen in favicon.ico einzufügen. Beispiel: IE verwendet die 16x16-Version für die Adressleiste und die 32x32-Version für eine Verknüpfung in der Taskleiste.

Deklarieren Sie das Favicon mit:

<link rel="icon" href="/path/to/icons/favicon.ico">

Es wird jedoch empfohlen, platzieren Sie favicon.ico Im Stammverzeichnis der Website und deklarieren Sie es überhaupt nicht und lassen Sie die modernen Browser das PNG auswählen Symbole.

PNG-Symbole

Moderne Desktop-Browser (IE11, neuere Versionen von Chrome, Firefox ...) bevorzugen die Verwendung von PNG-Symbolen. Die üblichen erwarteten Größen sind 16x16, 32x32 und "so groß wie möglich" . Zum Beispiel verwendet MacOS/Safari das 196x196-Symbol, wenn es das größte ist, das es finden kann.

Was sind die empfohlenen Größen? Wählen Sie Ihre Lieblingsplattformen:

Die PNG-Symbole werden deklariert mit:

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...

Achtung: Firefox unterstützt das sizes -Attribut nicht und verwendet das letzte gefundene PNG-Symbol . Stellen Sie sicher, dass Sie das 32x32-Bild als letztes deklarieren: Es ist gut genug für Firefox und verhindert, dass es ein großes Bild herunterlädt, das es nicht benötigt.

Beachten Sie auch, dass Chrome das sizes -Attribut nicht unterstützt und dazu neigt, alle deklarierten Symbole zu laden . Es ist besser, nicht zu viele Symbole zu deklarieren.

Mobile Plattformen

Bei dieser Frage handelt es sich um ein Desktop-Favicon, sodass Sie sich nicht zu sehr mit diesem Thema befassen müssen.

Apple definiert das Touch-Symbol für die iOS-Plattform . iOS unterstützt keine nicht quadratischen Symbole. Nicht quadratische Bilder werden einfach neu skaliert, um sie quadratisch zu machen (siehe Kioskea-Beispiel) .

Android Chrome basiert auf dem Apple Touch-Symbol und definiert auch ein 192x192 PNG-Symbol .

Microsoft definiert das Kachelbild und die browserconfig.xml - Datei .

Fazit

Ein Favicon zu generieren, das überall funktioniert, ist ziemlich komplex. Ich rate Ihnen, diese Favicon-Generator zu verwenden. Vollständige Offenlegung: Ich bin der Autor dieser Website.

477
philippe_b

16 x 16 Pixel, * .ico-Format.

106
Mark Hurd

2019 Standards dank faviconit

Ich benutze faviconit.com für die bestmögliche Browser- und Geräteunterstützung. Sie laden ein Bild hoch und diese Site bietet Ihnen den Code, die konvertierten Bilder und eine browserkonfigurierte Datei.


Wir könnten einfach ein Favicon manuell auf unsere Website von 16x16 hochladen und es wird wahrscheinlich in fast jedem Browser angezeigt.

Wenn Sie es jedoch auf Ihrem Smartphone oder Tablet als einen Ihrer Favoriten markieren, benötigen wir größere Bilder (60 x 60 bis 144 x 144).

Nehmen wir an, einer unserer Benutzer erstellt eine Verknüpfung auf seinem Desktop. In diesem Fall sieht eine 196x196 besser aus!


Beispielcode für das, was faviconit Ihnen neben allen konvertierten Bildern geben würde:

<!-- place this in your <head></head> -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="Apple-touch-icon" href="/favicon-57.png">
<link rel="Apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="Apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="Apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="Apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="Apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="Apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="Apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="Apple-touch-icon" sizes="180x180" href="/favicon-180.png">

Seit Windows 8

Das ist aber noch nicht alles. Seit Windows 8 sind wir in der Lage, Verknüpfungen zu Websites mit Kacheln zu erstellen!

<!-- place this in your <head></head> -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">

Browserconfig.xml

Laden Sie eine Datei mit dem Namen browserconfig.xml hoch (um die Kacheln in Windows> 8 zu aktivieren).

<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/favicon-70.png"/>
            <square150x150logo src="/favicon-150.png"/>
            <square310x310logo src="/favicon-310.png"/>
            <TileColor>#FFFFFF</TileColor>
        </tile>
    </msapplication>
</browserconfig>
57

Wikipedia hat folgendes zu sagen:

Darüber hinaus können solche Symboldateien entweder 16 × 16 oder 32 × 32 Pixel groß sein und eine Farbtiefe von 8 Bit oder 24 Bit aufweisen (beachten Sie, dass GIF-Dateien nur über 256 Farbpaletteneinträge verfügen).

Ich denke, der beste Weg ist, ein 32x32-GIF zu verwenden und es mit verschiedenen Browsern zu testen.

31

Die einfachste Lösung ist die Verwendung eines (!) PNG-Bildes (2018).

Fügen Sie dies einfach dem Kopf Ihres Dokuments hinzu:

<link rel="shortcut icon" type="image/png" href="/img/icon-196x196.png">
<link rel="shortcut icon" sizes="196x196" href="/img/icon-196x196.png">
<link rel="Apple-touch-icon" href="/img/icon-196x196.png">

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 KEINE Kacheln in Windows 8/10 unterstützt. Es unterstützt Bilder in Verknüpfungen, Lesezeichen und Browser-Tabs.

12
JoostS

Nein, Sie können keine nicht standardmäßige Größe oder Abmessung verwenden, da dies in den Browsern der Benutzer überall dort, wo die Symbole angezeigt werden, zu Problemen führen würde. Sie könnten es auf 12 x 16 (mit vier weißen/transparenten Pixeln auf der 12-Pixel-Seite) einstellen, um Ihr Seitenverhältnis beizubehalten, aber Sie können nicht größer werden (Sie können, aber der Browser wird es verkleinern).

1
ceejayoz

favicon.ico ist 16x16

<link rel="shortcut icon" href="favicon.ico"/>

Und ich benutze diese, um auf Mobilgeräten und Tablets schön zu sein:

<link rel="Apple-touch-icon-precomposed" sizes="144x144" href="img/ico144.png">
<link rel="Apple-touch-icon-precomposed" sizes="114x114" href="img/ico114.png">
<link rel="Apple-touch-icon-precomposed" sizes="72x72" href="img/ico72.png">
<link rel="Apple-touch-icon-precomposed" href="img/ico57.png">

Es ist wichtig, den Namen "favicon.ico" im Stammverzeichnis zu verwenden, da viele Browser zuerst versuchen, ihn zu finden.

1
Felipe

Anscheinend sollte Ihre Datei vom Typ .ico Sein.

Überprüfen Sie diesen Beitrag über Favicons:

http://www.html-kit.com/support/favicon/image-size/

0
Pablo Fernandez

Das Format des Favicons muss quadratisch sein, sonst wird es vom Browser gedehnt. Leider unterstützt Internet Explorer <11 keine .gif- oder .png-Dateitypen, sondern nur das .ico-Format von Microsoft. Sie können eine "Favicon Generator" -App wie: http://favicon-generator.org/ verwenden

0
UbiQue

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. - So fügen Sie Ihrer Site ein Favicon hinzu - QA @ W3C

0
blade19899

Ein Favicon für eine Website muss normalerweise eine * .ico-Datei sein und kann 32x32 oder 16x16 sein. Die Verwendung einer nicht standardmäßigen Größe funktioniert nicht in allen Browsern und ist so verzerrt, wie Sie es selbst gesehen haben. Versuchen und konvertieren Sie das Bild mit dieser Website: http://www.favicon.cc/ und versuchen Sie es dann und verwenden Sie es?

0
user2675678