Favicons

Favicons sind die kleinen Bilder, die in vielen Webbrowsern bei Lesezeichen, in der Adresszeile oder auch auf den Tabulatoren dargestellt werden. Sollen die Motive freigestellt sein, so erhält man perfekt aussehende Favicons durch Nutzung von Teiltransparenz. Favicons können nämlich pro Pixel nicht nur durchsichtig oder undurchsichtig sondern in 256 Stufen teiltransparent sein. Das ist wichtig, um glatte Kanten darzustellen.

Hier werden die Favicons im Firefox eingeblendet.

Freigestellte Favicons müssen auf jedem Hintergrund funktionieren, zB. weiss (Adressleiste), grau (Lesezeichen und Tabs) sowie gelb (SSL-Seiten in Firefox in der Adressleiste). Mit Teiltransparenz klappt dies perfekt, auch wenn das Favicon als CD-Icon auf einem Computer eingeblendet wird, dessen Benutzeroberfläche durch persönliche Einstellungen von der Norm abweicht.

Die Erzeugen solcher Favicons ist mit dem CMS seit den Versionen vom 2015.06.22 möglich. Sie können Bilder im Format JPG, PNG oder GIF verwenden, die auf 16x16 Pixel skaliert weerden. Sie können auch bestimmte TGA-Dateien verwenden. Das Verfahren wird unten beschrieben.

Favicons im CMS generieren

Unter Webseiteneditor / Dateien / Favicons können Sie Favicon-Generierungen definieren. Jede Generierung benötigt eine Quelle und ein Ziel. Die Quelle kann eine Bilddatei der Typen JPG, PNG oder GIF sein (beliebige Größe), es kann bereits eine ICO-Datei sein (wird dann direkt übernommen) oder eine TGA in einem bestimmten Format (siehe unten). Das Ziel ist eine Datei im Verzeichnis c oder leer. Im letzten Fall wird das Favicon im Basisverzeichnis generiert. Dieses Favicon wird auch dann vom Server angefordert, selbst wenn keine Webseite explizit darauf verweist.

Sobald die Quelle und ggf. das Ziel angegeben ist, können sie das Favicon generieren.

Favicons aus TGAs

Bestimmte TGA-Dateien können ebenfalls als Quelle für die Generierung von Favicons verwendet werden.

• Das CMS erwartet als Bildformat ein TGA mit 4 Kanälen und 32 bit Farbtiefe (RGB+Alpha zu je 8 bit) in 16 x 16 Pixeln. Zur Kontrolle: Eine solche Datei hat immer eine Grösse von 1068 Byte.
• Ein neuer Farbkanal kann im Photoshop so erzeugt werden:
  • In Ebenenübersicht auf den Tabulator 'Kanäle' klicken.
  • Wie beim Hinzufügen einer Ebene vorgehen, das Resultat ist nun aber ein neuer Kanal (Alpha).
• Das Bild muss auf schwarz gelegt werden.
  Da wo der Alphakanal 0 (erscheint schwarz) ist, ist dies egal. Aber bei allen anderen Pixeln (vor allem bei halbtransparenten!) ist es entscheidend, dass mit der Abnahme der Deckfähigkeit auch die Farbe Richtung Schwarz geht.

RGB-Bild in 192 x 192 Pixeln
Alpha-Kanal in 192 x 192 Pixeln
TGA-Datei für das CMS 4 Kanäle (32 Bit Farbtiefe), 16 x 16 Pixel		Datei favicon.tga herunterladen. (1.07 kB)
Daraus erzeugtes Favicon		Datei favicon.ico herunterladen. (2.55 kB)

Wenn Sie mit der Erzeugung der Teiltransparenz Probleme haben sollten, so hilft vielleicht folgender Trick:

• Definieren Sie das Bild in doppelter Grösse (allgemein: n-fach).
• Selektieren Sie den Hintergrund scharf (d.h. ganze Pixel ohne weiche Auswahlkante).
• Färben Sie den Hintergrund schwarz.
• Erzeugen Sie einen neuen Kanal (s.o.), färben Sie auch hier die Selektion schwarz.
• Drehen Sie die Selektion um und färben Sie nun die Vordergrundselektion im Alphakanal weiss.
• Verkleinern Sie das Bild auf die Ausgabegrösse von 16 x 16 Pixeln. Es entstehen im Alphakanal nun die teiltransparenten Übergänge.
• Speichern Sie das Bild als TGA mit 32 Bit Farbtiefe ab.