Warum mit einem Vektorlogo anfangen?

Jede Datei, die eine Marke ausliefert, vom Browser-Tab-Icon mit 16 px bis zum App-Store-Bild mit 1.024 px, sollte aus einer einzigen Quelle stammen. Ist diese Quelle ein PNG, ist jeder Export nur eine Größenänderung von Pixeln: Kleine Größen verschwimmen, große bleiben weich. Ist sie ein SVG aus Pfaden, wird jede Größe neu gezeichnet. Die Schritte unten halten ein SVG im Mittelpunkt und erstellen alles andere daraus.

Das Eulen-Logo „Study“ als SVG, dann dieselbe Eule als iOS-App-Icon mit abgerundeten Ecken, als adaptives Android-Icon im Kreis und als Favicon mit 32 px, vergrößert, damit man die Pixel sieht

Eines unserer Beispiel-Logos, dann das iOS-Icon, das adaptive Android-Icon und das Favicon, die unsere Export-Tools aus seinem SVG erstellt haben. Das Favicon ist vergrößert dargestellt; bei 32 px zählt jedes Pixel.

Schritt 1: Logo beschreiben und eine Idee wählen

Öffne den KI-Logo-Generator und schreib, was das Logo zeigen soll: „eine Eule aus Kreisen und Dreiecken, für eine Lern-App, Indigo und Bernstein“. Füg den Markennamen hinzu, wenn das Logo ihn enthalten soll. Wähl einen Stil-Chip, wenn du weißt, welche Art Logo du willst; die Anleitung zu Logo-Stilen erklärt jeden. Jedes Absenden ergibt vier Ideen, und der Preis steht vorher auf dem Button.

Schritt 2: eine Idee mit Worten verfeinern

Nimm die Idee, die deiner Vorstellung am nächsten kommt, und sag, was sich ändern soll: „das R kräftiger“, „weniger Federn“, „die Sonne über den Gipfel“. Eine Verfeinerung lässt den Rest des Logos, wie er ist. Lieber ein oder zwei präzise Änderungen pro Verfeinerung als eine Liste mit zehn.

Schritt 3: vektorisieren

Wähl beim gewählten Logo Vektorisieren. Es wird in ein SVG nachgezeichnet, in dem jede Farbe eigene Pfade hat, und du kannst es vor der Verwendung neben dem Original prüfen. Öffne es im SVG-Editor, um einen Teil umzufärben, eine verirrte Form zu löschen oder den Abstand im Namen zu ändern.

Prüf drei Dinge, bevor du weitermachst. Ist das Zeichen in kleiner Größe noch erkennbar? Berühren sich Formen oder Buchstaben, die sich nicht berühren sollten? Und sind die Farben genau die, die du willst? Was du jetzt im SVG korrigierst, ist in jeder daraus erstellten Datei korrigiert.

Schritt 4: App-Icons erstellen

Der App-Icon-Generator erstellt aus dem SVG:

  • Android: PNGs für alle Bildschirmdichten von 48 bis 192 px, ein Play-Store-Bild mit 512 px und XML für ein adaptives Icon mit einem Vordergrund innerhalb des sicheren Bereichs und einer monochromen Ebene für Themen-Icons;
  • iOS: ein AppIcon.appiconset mit einem deckenden Bild mit 1.024 px für Xcode.

Wähl eine Hintergrundfarbe und den Innenabstand um das Zeichen. Ein Zeichen mit transparentem Raum drumherum gibt dem monochromen Android-Icon seine echte Form. App-Icons für Android und iOS aus einem Bild erklärt die Importschritte und was du auf einem Gerät prüfen solltest.

Schritt 5: Favicon und PWA-Icons erstellen

Der Favicon-Generator erstellt favicon.ico (16, 32 und 48 px in einer Datei), ein favicon.svg, wenn die Grafik aus sauberen Vektorpfaden besteht, PNGs mit 16 und 32 px, ein Apple Touch Icon mit 180 px, Icons mit 192 und 512 px samt maskierbaren Versionen, ein site.webmanifest und das HTML zum Einfügen in den <head> deiner Seite. Welche davon Browser nutzen und warum ein Favicon trotzdem eine ICO-Datei braucht, steht in Favicons: SVG, PNG oder ICO; den sicheren Bereich für maskierbare Icons erklärt Maskierbare PWA-Icons.

Oder alles auf einmal: das Brand-Kit

Das Brand-Kit lässt dieselben Exporter mit einem Satz Markeneinstellungen (Markenname, Kurzname, Designfarbe, Hintergrundfarbe und Innenabstand) über dasselbe SVG laufen und packt die Ergebnisse in eine ZIP:

Ordner Inhalt
favicon/ das Favicon- und PWA-Paket
app-icons/ die App-Icon-Sets für Android und iOS
ios/ ein Xcode-Imageset, um das Logo in der App zu verwenden
android/ ein VectorDrawable, um das Logo in der App zu verwenden
png/ transparente PNGs, längste Seite 256, 512, 1.024 und 2.048 px
svg/ das optimierte SVG und das Original in voller Genauigkeit

Jeder Ordner enthält genau das, was das einzelne Tool aus derselben Vorlage erstellt. Du kannst also mit dem Kit anfangen und später einen Teil einzeln neu erstellen. Der Preis des Kits wird angezeigt, bevor du es herunterlädst.

Vor dem Start

Durchsuche das Markenregister jedes Landes, in dem du verkaufst, nach deinem Namen und nach ähnlichen Zeichen. Ein generiertes Logo ist neu, aber niemand gleicht es mit eingetragenen Marken ab. Behalte das SVG als Masterdatei und erstelle neue Größen immer daraus, nie aus einem PNG.