[{"data":1,"prerenderedAt":11},["ShallowReactive",2],{"guide:de:blog\u002Ffavicon-sizes-which-ones-you-need":-1,"article-de-favicon-sizes-which-ones-you-need":3},{"slug":4,"title":5,"description":6,"date":7,"keyword":8,"tool":9,"html":10},"favicon-sizes-which-ones-you-need","Favicon-Größen: Welche Sie 2025 wirklich brauchen","Ein verständlicher Leitfaden zu Favicon-Größen: 16x16, 32x32, 180x180, 192 und 512, welche moderne Browser verwenden, und das HTML zum Einfügen.","2026-10-12","favicon size","favicon-generator","\u003Cp>Wenn Sie nach "favicon size" suchen, bekommen Sie eine Fülle widersprüchlicher Zahlen: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. Die meisten dieser Listen wurden vor einem Jahrzehnt geschrieben und nie aktualisiert. In der Praxis benötigt eine moderne Website etwa vier Dateien, und Sie können alle in einem Durchgang mit dem \u003Ca href=\"\u002Fde\u002Ffavicon-generator\">Favicon-Generator\u003C\u002Fa> erstellen – er läuft vollständig in Ihrem Browser, daher verlässt Ihr Logo Ihre Maschine nie.\u003C\u002Fp>\n\u003Cp>Hier ist, wofür jede Größe eigentlich ist und was Sie getrost überspringen können.\u003C\u002Fp>\n\u003Ch2>Die Größen, die noch wichtig sind\u003C\u002Fh2>\n\u003Ch3>16x16 und 32x32 – Browser-Tabs und Lesezeichen\u003C\u002Fh3>\n\u003Cp>Das ist das klassische Favicon. 16x16 ist das, was Sie in einem vollen Tab-Streifen sehen; 32x32 wird auf hochauflösenden Bildschirmen, der Lesezeichen-Leiste und einigen Adressleisten-UIs verwendet. Beide werden traditionell in einer einzigen \u003Ccode>favicon.ico\u003C\u002Fcode>-Datei gebündelt, die mehrere Auflösungen gleichzeitig enthalten kann. Windows zieht auch 48x48 aus derselben \u003Ccode>.ico\u003C\u002Fcode> für Desktop-Verknüpfungen, daher kostet das Einbeziehen fast nichts.\u003C\u002Fp>\n\u003Ch3>180x180 – Apple Touch Icon\u003C\u002Fh3>\n\u003Cp>Wenn jemand auf einem iPhone oder iPad auf "Zum Home-Bildschirm hinzufügen" tippt, sucht Safari nach \u003Ccode>apple-touch-icon.png\u003C\u002Fcode> in 180x180. Wenn es nicht vorhanden ist, erstellt iOS einen Screenshot Ihrer Seite und verwendet diesen stattdessen, was schrecklich aussieht. Dieses eine PNG deckt alle aktuellen iOS-Geräte ab, da das System bei Bedarf herunterskaliert.\u003C\u002Fp>\n\u003Ch3>192x192 und 512x512 – Android und PWAs\u003C\u002Fh3>\n\u003Cp>Android Chrome und installierbare Web-Apps lesen Icons aus Ihrer \u003Ccode>site.webmanifest\u003C\u002Fcode>. 192 ist das Home-Screen-Icon; 512 wird für den Splash-Screen und App-Listen verwendet. Wenn Sie möchten, dass Ihre Website installierbar ist, benötigen Sie beide.\u003C\u002Fp>\n\u003Ch3>SVG – optional, aber schön\u003C\u002Fh3>\n\u003Cp>Firefox und Chrome unterstützen beide ein SVG-Favicon, das bei jeder Größe scharf bleibt und mit einer Media Query in der Datei auf den dunklen Modus reagieren kann. Es ist ein Bonus, kein Ersatz – Safari und ältere Browser benötigen weiterhin die Raster-Versionen.\u003C\u002Fp>\n\u003Ch2>Was Sie überspringen können\u003C\u002Fh2>\n\u003Cp>64x64, 96x96, 128x128, die gesamte Reihe von Windows-Kachel-Bildern und die Dutzende von alten \u003Ccode>apple-touch-icon-76x76\u003C\u002Fcode>-Dateien. Sie wurden für Geräte benötigt, die größtenteils verschwunden sind. Das Versenden von zwanzig Icon-Dateien bläht Ihr Repository auf und bringt Ihnen keinen messbaren Gewinn.\u003C\u002Fp>\n\u003Ch2>Das HTML\u003C\u002Fh2>\n\u003Cp>Legen Sie die Dateien in Ihr Site-Root-Verzeichnis und fügen Sie dies zu \u003Ccode><head>\u003C\u002Fcode> hinzu:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><link rel="icon" href="\u002Ffavicon.ico" sizes="any">\n<link rel="icon" href="\u002Ficon.svg" type="image\u002Fsvg+xml">\n<link rel="apple-touch-icon" href="\u002Fapple-touch-icon.png">\n<link rel="manifest" href="\u002Fsite.webmanifest">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Und in das Manifest:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">"icons": [\n  { "src": "\u002Ficon-192.png", "type": "image\u002Fpng", "sizes": "192x192" },\n  { "src": "\u002Ficon-512.png", "type": "image\u002Fpng", "sizes": "512x512" }\n]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Design für 16 Pixel\u003C\u002Fh2>\n\u003Cp>Der schwierige Teil ist nicht der Export, sondern dass ein vollständiges Logo bei 16x16 zu Matsch wird. Ein paar Dinge, die helfen:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Verwenden Sie ein Fragment, nicht das ganze Logo.\u003C\u002Fstrong> Ein Buchstabe, ein Glyphe, eine Form. Wort-Marken sind in der Tab-Größe unleserlich.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Beginnen Sie quadratisch.\u003C\u002Fstrong> Wenn Ihre Quelle ein breites Logo ist, \u003Ca href=\"\u002Fde\u002Fcrop-image\">schneiden Sie es zunächst zu einem Quadrat zu\u003C\u002Fa>, damit der Generator es nicht mit leerem Raum letterboxed.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Halten Sie den Kontrast hoch.\u003C\u002Fstrong> Dünne Umrisse verschwinden. Feste Formen überstehen.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Entscheiden Sie sich für den Hintergrund.\u003C\u002Fstrong> Ein transparentes PNG passt sich an helle und dunkle Browser-Chrome an; wenn Ihre Marke dunkel ist, geben Sie ihr stattdessen eine feste Farbfläche. Sie können \u003Ca href=\"\u002Fde\u002Fremove-background\">den Hintergrund\u003C\u002Fa> aus einem Logo-Screenshot in Sekunden entfernen, wenn Sie nur ein flaches JPG haben.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Beachten Sie den sicheren Bereich.\u003C\u002Fstrong> Android maskiert Icons in Kreise und Squircles, also lassen Sie ungefähr 10% Polsterung um den Rand Ihrer 512er-Grafik.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Wenn Sie den Hintergrund des Favicons an die Markenfarbe Ihrer Website anpassen, zieht der \u003Ca href=\"\u002Fde\u002Fcolor-picker\">Bild-Farbwähler\u003C\u002Fa> das exakte Hex aus einem vorhandenen Screenshot – praktisch auch für den \u003Ccode>theme-color\u003C\u002Fcode>-Meta-Tag.\u003C\u002Fp>\n\u003Ch2>Generieren Sie den gesamten Satz auf einmal\u003C\u002Fh2>\n\u003Cp>Laden Sie nichts hoch: Legen Sie ein quadratisches PNG oder SVG in den \u003Ca href=\"\u002Fde\u002Ffavicon-generator\">kostenlosen Browser-basierten Favicon-Generator\u003C\u002Fa> ab und er produziert die \u003Ccode>.ico\u003C\u002Fcode>, das Apple Touch Icon und die 192\u002F512 PNGs lokal, in Ihrem eigenen Tab. Nichts wird an einen Server gesendet, es gibt keine Anmeldung, und es wird keine Kopie Ihres unveröffentlichten Logos in jemand anderem's Speicherbucket abgelegt.\u003C\u002Fp>\n\u003Cp>Zoomen Sie dann Ihren Browser heraus, schauen Sie sich den Tab an und stellen Sie die einzige Frage, die wichtig ist: Können Sie erkennen, was es ist?\u003C\u002Fp>\n",1791831528630]