So erstellst du ein Favicon aus deinem Logo

1. Kläre, wo das Icon erscheint

Ein Favicon hilft Menschen, eine Website etwa in Browser-Tabs und Lesezeichen zu erkennen. Frage vor dem Export, wer es installiert und welche Browser, Website-Builder und weiteren Einsatzorte das Projekt unterstützen muss.

Ein Browser-Tab, ein Apple-Home-Bildschirm-Kurzbefehl und eine installierte Web-App können dieselbe Markengrafik verwenden, unterscheiden sich aber in Einrichtung und Bildanforderungen. Auch eine native mobile App benötigt ein eigenes Plattformbriefing. Benenne diese Lieferleistungen separat, damit „Favicon enthalten“ eine klare Bedeutung hat.

• Website: Benenne das Browser-Icon und erforderliche Alternativdateien.
• Home-Bildschirm oder installierte Web-App: Kläre Touch-Icon- oder Manifest-Anforderungen mit dem Entwickler.
• Markenfreigabe: Vereinbare, welches Symbol, Monogramm oder welche kompakte Variante das Unternehmen repräsentieren darf.

Weiterführende Artikel: MDN: Was ein Favicon macht · MDN: Icon-Deklarationen für Web-Apps

2. Wähle ein Zeichen, das kleine Größen übersteht

Beginne mit einer bestehenden freigegebenen Bildmarke oder einem Monogramm. Hat die Identität nur eine breite Wortmarke, schlage eine kompakte Variante vor und hole die Freigabe ein, bevor du sie als Markenelement behandelst. Verzerre die vollständige Wortmarke nicht zu einem Quadrat und entferne nicht stillschweigend wichtige Details.

Verwende 16 × 16 und 32 × 32 Pixel als praktische Prüfgrößen. Achte auf eine erkennbare Silhouette, offene Punzen, deutliche Lücken und sichtbare Linien. Dies sind Produktionsprüfungen, keine universelle Mindestgrößenregel für das gesamte Logosystem.

Die folgende Rechnung zeigt, warum selbst ein perfekt exportiertes breites Logo schwer erkennbar bleiben kann. Das Beispiel nimmt eine 4:1-Wortmarke und ein quadratisches Zeichen an, beide mit proportionalem Innenabstand in dasselbe Quadrat eingepasst. Es veranschaulicht nur Geometrie; es ist kein Kundentest und keine vorgeschriebene Abstandsregel.

Weiterführende Artikel: MDN: Gängige Favicon-Größe · MDN: SVG-Proportionen erhalten

3. Bereite eine saubere quadratische Quelle vor

Bewahre die bearbeitbare Masterdatei auf und erstelle dann eine Übergabekopie mit der freigegebenen kompakten Grafik. Verwende eine quadratische Zeichenfläche oder einen Frame und skaliere das Zeichen proportional. Wähle den Innenabstand bewusst: Zu viel lässt das Zeichen klein wirken, zu wenig bedrängt die Kanten. Passe bei Bedarf die optische Zentrierung nach Augenmaß an.

Prüfe bei SVG, ob die exportierte viewBox den vorgesehenen quadratischen Bereich beschreibt. Die viewBox steuert das Koordinatenrechteck, das in den Bildanzeigebereich abgebildet wird; sie entfernt keinen bereits in der Grafik enthaltenen ungenutzten Raum. Öffne die exportierte Datei und prüfe die tatsächlichen Grenzen.

Wenn das Icon Schrift enthält, wandle den korrekten, freigegebenen Text in der Übergabekopie oder beim Export in Pfade um. Behalte bearbeitbaren Text in der Masterdatei. Unser SVG-Schriftleitfaden erklärt die Prüfungen vor der Pfadumwandlung.

Prüfe das Zeichen auf hellen und dunklen Hintergründen. Transparenz schafft nicht automatisch Kontrast: Ein dunkles Zeichen kann auf einem dunklen Tab verschwinden. Eine Hintergrundkachel oder eine separat freigegebene Darstellung kann helfen; prüfe aber das installierte Ergebnis, statt dich auf eine große Vorschau zu verlassen.

Weiter mit: Schriftänderungen in SVG-Logos verhindern

Weiterführende Artikel: MDN: SVG viewBox

4. Wähle Dateien für die tatsächliche Website

Wähle anhand der Entwickleranforderungen ein kleines, gezieltes Set. HTML unterstützt mehrere Icon-Kandidaten, darunter skalierbare SVGs und Rasterdateien. Browser wählen anhand der Deklarationen und ihrer unterstützten Formate; eine bestimmte Dateireihenfolge oder Endung garantiert nicht überall dieselbe Auswahl.

SVG ist für Vektorgrafiken nützlich, PNG bietet feste Pixelmaße und ICO kann mehrere Rasterbilder in einer Datei enthalten. Prüfe bei ICO-Lieferungen die eingebetteten Größen, statt dem Dateinamen zu vertrauen. Ein in .ico umbenanntes PNG ist keine Konvertierung.

Das Folgende ist ein praktisches Beispiel für eine Website-Übergabe. Es ist kein Pflichtset für jede Website.

Weiterführende Artikel: WHATWG: Auswahl von Website-Icons · MDN: Der ICO-Container · WebKit: SVG-Icons in Safari 26

5. Exportiere und prüfe die echten Dateien

Du kannst Quelle und Rasterexporte in deinem Design-Editor vorbereiten. Wähle in Figma den quadratischen Frame, füge einen PNG-Export hinzu und verwende eine feste Breite wie 16w, 32w oder 96w im Feld Scale. Ein quadratischer Frame sollte die passende Höhe ergeben; prüfe die heruntergeladenen Maße. Exportiere SVG separat mit 1×.

Wenn du ICO benötigst, verwende ein Tool, das dieses Format tatsächlich schreibt, und prüfe die eingebetteten Bilder. Bewahre manuelle Kleinformatkorrekturen in der Übergabequelle auf, damit ein späterer Export sie nicht versehentlich ersetzt.

Öffne die Dateien, die der Kunde erhält. Vergleiche Form und Abstände mit der freigegebenen Referenz und prüfe dann die winzigen Versionen in ihrer vorgesehenen Größe. Ist ein PNG unerwartet weich, untersuche Quelle und Exportmaße, bevor du weitere Größen erzeugst.

Weiter mit: Ein Kundenlogo aus Figma exportieren · Ein unscharfes Logo-PNG untersuchen

Weiterführende Artikel: Figma: Exportmaße und Formate

6. Prüfe Google-Search-Anforderungen separat

Google verlangt ein quadratisches Icon mit mindestens 8 × 8 px und empfiehlt mehr als 48 × 48. Die Liste unterstützter Formate enthält PNG und ICO, aber kein SVG. Ein 96-px-PNG ist eine praktische Option. Deklariere es auf einer crawlbaren Startseite, erlaube das Crawlen der Datei und halte ihre URL stabil. Die Verarbeitung kann Wochen dauern; eine Anzeige wird nicht garantiert. Google erlaubt ein Favicon pro Hostname, kein anderes Icon pro Unterverzeichnis.

Weiterführende Artikel: Google Search Central: Favicon-Richtlinien

7. Gestalte die Entwicklerübergabe ausdrücklich

Liefere die freigegebene Grafik, ein kurzes Dateiverzeichnis und den Einsatzzweck jedes Assets. Der Entwickler muss die Bilder so ablegen, dass die Website sie ausliefern kann, und die Icon-Links oder Website-Builder-Einstellungen konfigurieren. Der Download einer ZIP-Datei installiert das Favicon nicht.

Bitte um Prüfung der bereitgestellten Website in den vereinbarten Browsern, auch in heller und dunkler Darstellung. Wird das falsche Icon angezeigt, prüfe zuerst die auf der Seite deklarierte Datei-URL und deren Rückgabe. Halte die freigegebene Version und die installierten Pfade fest.

Ein Apple-Touch-Icon verwendet eine eigene Deklaration. Installierte Web-Apps können ein Manifest mit Icon-Größen und -Zwecken verwenden; ein maskierbares Icon benötigt ein Design, dessen Sicherheitszone geprüft wurde. Ein großes quadratisches PNG allein belegt nicht, dass diese Anforderungen erfüllt sind.

Freigegebene Grafik: kompakte Bildmarke, Version 03.
Browser-Assets: favicon.svg, favicon.ico, favicon-96.png.
ICO-Bilder: 16, 32 und 48 px.
Prüfung: installiertes Tab-Icon auf hellen und dunklen Hintergründen.
Weitere Home-Bildschirm- oder App-Assets: anhand des vereinbarten Plattformbriefings bestätigen.

Weiter mit: Dateirollen zum Logo-Leitfaden hinzufügen

Weiterführende Artikel: Apple: Touch-Icon-Einrichtung, archivierte Referenz · MDN: Maskierbare Icons vorbereiten

8. Stelle das freigegebene Icon mit logopack.app zusammen

Wenn du logopack.app für die umfassendere Logoübergabe verwendest, wähle ein freigegebenes kompaktes SVG für das optionale Favicon-Paket und prüfe Innenabstand und Hintergrund. Der Verpackungsschritt exportiert die gewählte Grafik; er entscheidet nicht, welches Redesign der Kunde freigegeben hat.

Das Paket enthält die folgenden Dateien. Das 1024-px-Bild ist ein hochauflösender Ausgangspunkt für weitere Vorbereitung. Zusätzliche PWA-, Android-Maskable- oder Native-App-Anforderungen benötigen weiterhin eigene Assets und Prüfungen.

Mit einem kostenlosen Konto kannst du dein eigenes SVG in der Vorschau ansehen und Einstellungen anpassen. Die integrierte Demo-Grafik lässt sich kostenlos exportieren; eigene Grafiken erfordern Pro. Prüfe die aktuellen Tarife und den endgültigen Download vor der Übergabe.

• favicon.svg: skalierbare Icon-Grafik
• favicon.ico: eingebettete Bilder mit 16, 32 und 48 px
• favicon-96.png: PNG mit 96 × 96 px
• apple-touch-icon.png: PNG mit 180 × 180 px und deckendem Hintergrund
• icon-1024.png: Bild mit 1024 × 1024 px zur weiteren Vorbereitung
• setup.html: Website-Einrichtungsanleitung

Weiterführende Artikel: Ein Paket mit logopack.app vorbereiten · Aktuelle Tarife ansehen

Abschließende Checkliste zur Favicon-Übergabe

Bewahre die geprüfte Favicon-Quelle neben der freigegebenen Logo-Masterdatei auf. So wird das nächste Website-Update eine wiederholbare Übergabe statt einer erneuten Suche nach dem richtigen Icon.

• ✓Das kompakte Zeichen ist für diesen Einsatz freigegeben.
• ✓Die Grafik bleibt innerhalb einer quadratischen Fläche proportional.
• ✓Die Versionen mit 16 und 32 px wurden in ihrer vorgesehenen Größe geprüft.
• ✓Innenabstände, Punzen und feine Linien bleiben im kleinen Export erhalten.
• ✓Die tatsächlichen Dateien entsprechen den angegebenen Maßen und ICO-Inhalten.
• ✓Prüfungen auf hellen und dunklen Hintergründen verwenden die freigegebene Darstellung.
• ✓Wenn Search zum Umfang gehört, ist ein von Google unterstützter Kandidat verfügbar.
• ✓Der Entwickler hat Dateirollen, Installationsanweisungen und eine freigegebene Referenz.
• ✓Touch-Icon-, PWA- oder Native-App-Arbeiten sind separat definiert.