Illustrator: So erstellen Sie ein transparentes Favicon aus einem nicht quadratischen Logo

Auch wenn die anderen Antworten technisch korrekt sind, würde ich wirklich davon abraten, ein sehr breites oder sehr hohes Logo einfach auf einen 16x16-Pixel-Raum zu verkleinern, um ein Favicon zu erstellen. Es besteht eine gute Chance, dass am Logo nichts mehr erkennbar ist, was zu einem etwas zufälligen Durcheinander von Pixeln führt.

Ein gutes Logo sollte eine vereinfachte Alternative haben, die mit einer winzigen Größe funktioniert und ungefähr 1x1 misst. Verwenden Sie das, um Ihr Favicon darauf aufzubauen. Fügen Sie keinen Text hinzu oder reduzieren Sie ihn auf ein oder zwei Zeichen.

Selbst wenn das nicht funktioniert, möchten Sie vielleicht ein Element des Logos nehmen (vorausgesetzt, Sie haben es selbst entworfen) und es als Favicon verwenden.

Einer meiner Kunden hat beispielsweise ein ziemlich komplexes Logo, darunter Sanddünen und einen Kompass hinter seinem Markennamen. Als Favicon habe ich nur die Kompassnadel verwendet:

Beginnen Sie ein neues Dokument in der gewünschten Größe (16 x 16 Pixel).

Wählen Sie Ihre Logogruppe aus und ziehen Sie sie in eine neue Datei.

Größe ändern durch:

Klicken Sie auf eine der Ecken und halten Sie die Umschalttaste gedrückt (dadurch bleiben die Abmessungen des Maßstabs erhalten, wenn Sie die Größe ändern).

oder

Klicken Sie auf das Kettenglied zwischen den Bemaßungen (um Breite und Höhe zu verknüpfen), bevor Sie eine Bemaßung ändern.

Die erste Ebene im neuen 16x16-Dokument kann verwendet werden, um die Hintergrundfarbe zu ändern oder transparent zu lassen.

Um die neuen Standards für mobile Geräte und Desktops zu erfüllen, benötigen Sie jedoch mehrere Favicon-Größen, die von 16 x 16 bis 512 x 512 reichen, gerätespezifisch, einige mit transparenter und einige mit Volltonfarbe.

Ihr Logo muss auch in einer Farbe/transparent sichtbar / verwendbar sein, was schwierig sein kann, wenn das Logo kein reiner Vektor ist.

Sie können Ihre Standardeinstellungen nach Bedarf in voreingestellten AI-Dateien festlegen, in die Sie Ihre Designs einfügen können, oder es gibt viele Online-Dienste, die den gesamten Prozess automatisieren. z.B. https://realfavicongenerator.net/ oder https://www.favicon-generator.org/

Sie können eine 800x800.png-Datei (größer als 512 Pixel) hochladen, die die gesamte Extraktionsarbeit für Sie erledigt.

Generieren Sie ein größeres PNG-Favicon wie 256 x 256 Pixel, und dies kann in Illustrator leicht erreicht werden, indem Sie Ihr nicht quadratisches Logo in der Mitte einer quadratischen Zeichenfläche platzieren und für das Web speichern, wobei das Kontrollkästchen „Auf Zeichenfläche schneiden“ aktiviert ist. Verknüpfen Sie dieses PNG dann als Favicon.

<link rel="icon" type="image/png" href="/path/favicon.png" />

Wenn es ein ICO sein muss, exportiert Illustrator (CS6) nicht nach ICO, also müssen Sie trotzdem zuerst ein 16x16-PNG erstellen (siehe oben) und es dann in Photoshop ablegen oder einen Online- Konverter verwenden .