Favicon-Werkstatt
Logo rein, kompletter Icon-Satz raus — mit ICO, Manifest und Live-Vorschau. Oder Icons fremder Seiten auslesen.
So sieht es aus
iOS zeigt Transparenz als Schwarz — deshalb bekommt das Apple-Icon eine feste Farbe.
Schützt vor dem Beschnitt durch Android.
In den jeder Seite einfügen.
Als site.webmanifest ins Wurzelverzeichnis legen.
Findet alle Icons, die eine Seite für Browser, iOS und Android hinterlegt hat — auch die aus dem Web-App-Manifest.
Anders als beim Erstellen läuft das nicht rein lokal: Dein Browser darf fremde Seiten nicht abrufen, deshalb übernimmt das unser Server. Die Domainliste wird also übertragen — die Icons selbst landen direkt bei dir.
Bis zu 25 Domains. Für jede holen wir das beste verfügbare Icon.
Alles läuft in deinem Browser. Deine Daten verlassen dieses Gerät nicht.
So funktioniert es
- Logo hochladen — quadratisch und mindestens 512 × 512 Pixel.
- Hintergrundfarbe für iOS wählen, da dort Transparenz schwarz erscheint.
- In den Vorschauen prüfen, ob das Logo auch klein noch erkennbar ist.
- Alles als ZIP herunterladen und den HTML-Schnipsel in den Head einfügen.
Ein Logo rein, ein kompletter Icon-Satz raus — inklusive ICO-Datei, Manifest und dem HTML für den Head. Und wenn du wissen willst, welche Icons eine andere Seite verwendet, holt der zweite Reiter sie dir.
Warum ein einzelnes PNG nicht reicht
Browser, iOS und Android verlangen unterschiedliche Formate und Größen. Fehlt das apple-touch-icon, zeigt iOS beim Speichern auf dem Startbildschirm einen Screenshot statt deines Logos. Fehlt das maskierbare Icon, beschneidet Android das Bild und schneidet dabei oft Teile des Logos ab.
Der Rand beim maskierbaren Icon
Android schneidet Icons je nach Gerät in einen Kreis, ein Quadrat oder eine Kleeblattform. Garantiert sichtbar bleibt nur der innere Bereich von rund 80 Prozent. Deshalb bekommt die maskierbare Variante zusätzlichen Rand — die Vorschau zeigt mit einem Kreis, was übrig bleibt.
Nichts wird hochgeladen
Skalierung, ICO-Datei und ZIP-Archiv entstehen vollständig im Browser. Beide Dateiformate sind hier von Hand implementiert, damit keine fremde Bibliothek nötig ist.
Häufige Fragen
Welche Größe sollte mein Ausgangsbild haben?
Mindestens 512 × 512 Pixel und quadratisch. Größer schadet nicht, kleiner führt zu unscharfen Kacheln auf Android und iOS. Am besten funktioniert ein SVG oder ein PNG mit transparentem Hintergrund.
Warum braucht iOS eine Hintergrundfarbe?
Weil iOS bei Icons keine Transparenz unterstützt und transparente Bereiche schwarz füllt. Ein Logo, das auf hellem Grund entworfen wurde, wird dadurch unlesbar. Deshalb bekommt das apple-touch-icon eine feste Farbe — Weiß passt in den meisten Fällen.
Was ist ein maskierbares Icon?
Android schneidet App-Icons je nach Hersteller in verschiedene Formen — Kreis, abgerundetes Quadrat oder Kleeblatt. Garantiert sichtbar ist nur der innere Bereich von etwa 80 Prozent. Das maskierbare Icon bekommt deshalb zusätzlichen Rand, damit vom Logo nichts abgeschnitten wird.
Brauche ich die favicon.ico überhaupt noch?
Ja, sie ist weiterhin sinnvoll. Ältere Browser und einige Dienste fragen /favicon.ico direkt ab, ohne den HTML-Quelltext zu lesen. Die hier erzeugte Datei enthält 16, 32 und 48 Pixel in einer einzigen Datei.
Wird mein Logo hochgeladen?
Nein. Skalierung, ICO-Erzeugung und ZIP-Archiv laufen vollständig im Browser — dein Logo verlässt das Gerät nie. Die beiden anderen Reiter arbeiten anders: Dort schickst du Adressen fremder Seiten an unseren Server, weil ein Browser fremde Domains aus Sicherheitsgründen nicht selbst abrufen darf. Übertragen wird dabei nur die Adresse, nicht deine eigenen Dateien.
Passende Tools
Alle ToolsWeblabs übernimmt Entwicklung, SEO und Shop-Optimierung — für alles, was über ein Werkzeug hinausgeht.