Favicon-Pixeleditor
Zeichne ein gestochen scharfes Favicon Pixel für Pixel – von 16×16 bis 64×64 – oder optimiere ein importiertes Bild und erstelle daraus mit einem Klick ein komplettes Favicon-Paket.
Tastenkürzel & Tipps
- BStift
- ERadiergummi
- GFarbeimer
- IPipette
- LLinie
- RRechteck
- OEllipse
- MBild verschieben (läuft am Rand um)
- XPrimär- und Sekundärfarbe tauschen
- #/Raster ein-/ausblenden
- Ctrl+ZRückgängig
- Ctrl+YCtrl+Shift+ZWiederholen
- +-0Vergrößern, verkleinern, anpassen
- ShiftGerade Linien, perfekte Quadrate und Kreise
- ←→Bild verschieben (Verschieben-Werkzeug)
- EscAktuelle Form abbrechen
Rechtsklick zeichnet mit der Sekundärfarbe. Auf Touchscreens bricht ein zweiter Finger den aktuellen Strich ab.
So zeichnest du ein gutes 16×16-Favicon
Ein Favicon wird meist nur in 16 oder 32 Pixeln angezeigt, daher zählt jedes einzelne Pixel. Wenn du es von Hand auf einem Pixelraster zeichnest, erhältst du scharfe Kanten und volle Kontrolle – das erreicht ein automatisch verkleinertes Logo nur selten.
Beginne mit der 16×16-Zeichenfläche und halte das Design einfach: ein fetter Buchstabe, ein schlichtes Symbol oder der wiedererkennbarste Teil deines Logos. Nutze starke Kontraste, damit das Icon sowohl auf hellen als auch auf dunklen Browser-Tabs lesbar bleibt, und prüfe beim Zeichnen die Live-Vorschauen.
Wenn du mit dem Ergebnis zufrieden bist, klicke auf „Favicons daraus erzeugen“. Der Generator hält die Pixel scharf und erstellt aus deiner Zeichnung favicon.ico, PNG-Icons, Apple-Touch-Icons und Android-Icons.
Tipps für gestochen scharfe Pixel-Art-Favicons
- Verwende zwei bis vier Farben – zu viele Abstufungen werden bei kleinen Größen zu Bildrauschen.
- Lass einen Rand von 1 Pixel frei oder fülle das ganze Quadrat; vermeide Formen, die nur einige Kanten berühren.
- Bevorzuge horizontale und vertikale Linien; diagonale Linien sehen bei 45 Grad am besten aus.
- Nutze den Spiegelmodus für symmetrische Icons und die transparente Farbe für durchsichtige Bereiche.
- Zeichne in 32×32 oder 48×48, wenn dein Icon detailreich ist – größere Formate werden auf hochauflösenden Bildschirmen verwendet.