Wie man Favicons (die kleinen Icons in den Reitern der Browser) erstellt und in die Website einbindet, wurde ja bereits im Blogbeitrag „Favicons erstellen und einbinden“ erklärt. Neben einem herkömmlichen Favicon gibt es aber auch die Möglichkeit, transparente Favicons zu erstellen, welche um das Bild herum jeweils die Hintergrundfarbe des Reiters annehmen. Das ganze könnte dann etwa folgendermassen aussehen:

Links ist die transparente Version zu sehen, und rechts ist die herkömmliche Variante mit weissem, quadratischen Hintergrund.

Favicon für Transparenz vorbereiten

Um ein Favicon mit Transparenz zu erstellen, wird ein entsprechendes Bildbearbeitungsprogramm benötigt. Darin wird der Hintergrund gelöscht, was zur gewünschten Transparenz führt.

Das Favicon muss jetzt in einem Format abgespeichert werden, welches Transparenz auch unterstützt – das jpg-Format fällt also schon einmal weg. Mögliche Formate sind hier gif oder png.

Das Umwandeln in eine .ico Datei

Für das Umwandeln der Ausgangsdatei in ein Favicon-Format wird wieder eine spezielle Software oder ein Online-Tool benötigt. Das bereits erwähnte Online-Tool FavIcon from Pics unterstützt dabei leider keine Transparenz. Deshalb muss für diese Art von Favicons ein anderes Tool verwendet werden. Ein anderer praktischer Favicon Generator, welcher diese gewünschte Funktion unterstützt ist der FavIcon Generator von DynamicDrive. Von der Vorgehensweise ist das Tool ebenso einfach zu bedienen. Man wählt das vorbereitete File aus, klickt „Create Icon“, und kann das erstellte File auf den Computer herunterladen.

Das Einbinden der Favicondatei in die Website funktioniert dann wieder wie im Artikel „Favicons erstellen und einbinden“ beschrieben.