Ein Favicon auf seiner Webseite ist heute Standard. Aber wie erstellt man diese Dinger? Hier ein Tutorial für die Erstellung einer Grafik zum Gebrauch als Favicon. Wie du aus dieser Grafik dann ein Favicon machst und auf deiner Webseite einbaust, habe ich in diesem Artikel beschrieben.

Nun aber zur Grafik. Natürlich kommt das kostenlose Programm Gimp zum Einsatz.

Ein Favicon ist quadratisch und so erstellen wir auch ein neues Bild. Wählt etwa 64×64 oder 128×128 Pixel und achtet darauf, dass unter Erweiterte Einstellungen die Füllung auf ‚Transparenz‘ eingestellt ist.

Erste Entscheidung für euch: farbiger Hintergrund oder soll dieser transparent sein und beispielsweise nur ein Logo enthalten? Gehen wir mal davon aus, dass ihr einen farbigen Hintergrund wählt, geht’s wie folgt weiter.

Wählt im Menü Auswahl den Menüpunkt Alles auswählen oder drückt die Tastenkombination ‚STRG‘ und gleichzeitig ‚A‘ um die Vorlage vollständig zu markieren. Jetzt müsst ihr euch entscheiden, ob ihr ein Favicon mit Ecken im 90 Grad-Winkel oder lieber mit abgerundeten Ecken erstellen möchtet.

Oder wie wär’s hiermit?

Nehmen wir an, dass ihr euch für abgerundete Ecken entscheidet, wählt im Menü Auswahl den Menüpunkt Abgerundetes Rechteck …. Im folgenden Dialog wählt ihr dann einen Radius. Hier empfehle ich 25 oder 30 Prozent zu wählen.

Nachdem das Bild nun markiert ist, entweder mit runden Ecken oder 90 Grad Ecken, können wir den Hintergrund einfärben.

Nehmt dazu eine Volltonfarbe oder einen Farbverlauf, ein Muster, einen Pinsel oder was euch auch immer einfällt. Gefällt euch die Farbe? Für unser Beispiel nehme ich die Volltonfarbe #d55959.

Und nun? Ja jetzt könnt ihr eurer Kreativität freien Lauf lassen. Soll euer Favicon Buchstaben, beispielsweise eure Initialen, enthalten? Oder etwa ein Logo? Was ihr auch immer wählt, denkt daran, dass das Favicon im Browser lediglich eine Größe von 16×16 Pixeln einnimmt. Der Inhalt sollte also möglichst groß dargestellt werden.

Wie ihr an meinem Favicon seht, stehen dort meine Initialen auf schwarzem Hintergrund mit abgerundeten Ecken.

Und so soll unser Beispiel hier auch weitergehen. Wählt euch nun eine Schriftart und eine entsprechende Schriftgröße und schreibt nun eure Initialen in das Bild und zentriert diese. Wie gesagt, achtet darauf, den Text entsprechend groß einzustellen, ansonsten wird man später nicht viel davon erkennen.

Das war es eigentlich auch schon. Wollt ihr die Initialen auch transparent durchscheinen lassen? Dann klickt ihr im Ebenen-Menü die Text-Ebene mit rechts an und wählt Auswahl aus Alphakanal.

Wie ihr seht, ist der Text nun markiert. Wechselt nun im Ebenen-Menü auf die Ebene Hintergrund und drückt dort die ‚Entfernen‘-Taste. Anschließend löscht ihr aus dem Ebenen-Menü die Text-Ebene, hier im Beispiel die Ebene OG. Im Ebenen-Menü erscheint nun lediglich noch die Ebene Hintergrund. Euer fertiges Bild sollte nun wie folgt aussehen:

Speichert das Bild nun als PNG ab, damit die Hintergrundtransparenz auch genutzt werden kann.

Wer ein wenig Inspiration benötigt, hier gibt es eine umfangreiche Favicon Galerie.

Und weiter geht’s dann in diesem Artikel.