Prägnanz im Kleinformat

Oftmals sind es die kleinen Dinge, denen große Wichtigkeit zuteil kommt. Im Falle vom Webdesign sind das die allseits beliebten Favicons. An sich nie eine große Sache für mich gewesen: 16×16 Pixel, die von Microsoft im Internet Explorer 5 als nette visuelle Aufhübschung der Favoritenleiste erdacht wurden. Ein etwas seltsames Dateiformat, eine Standard-Prozedur beim Erstellen eines neuen Webangebotes.

Aber da unterschätzt man die kleinen Dinger! Ich habe in den letzten Wochen vermehrt die Erfahrung gemacht, dass Favicons ein sehr wichtiges Element für meine Kunden sind. Vielleicht nicht ganz so wichtig wie der Headline-Font. Aber auf jeden Fall wichtiger als ein guter Zeilenabstand. Das liegt natürlich daran, dass inzwischen alle gängigen Browser auf allen Betriebssystemen Favicons anzeigen. Und natürlich legt sich der Kunde seine eigenen Website sofort als Bookmark an. Und vor allem: So ein kleines Quadrat mit 256 Pixeln kann jeder beurteilen, ohne technisches oder künstlerisches Verständnis zu besitzen. Ist ja auch recht so.

Worauf ich eigentlich hinaus will, sind eine Frage und eine Erkenntnis:

  • Warum zum Teufel beherrscht Photoshop eigentlich nicht das korrekte ICO-Bildformat, aus dem die Favicons bestehen?
  • Eine recht komfortable Lösung stellt unter Windows das Programm mit dem seltsamen Namen @icon sushi dar.

Damit habe ich auch endlich das Favicon vom Hauptstadtblog an den Rändern transparent bekommen. Denn wisset: Wenn ich einen einzelne vertikale Pixellinie zentriert darstellen möchte, muss das Bezugsquadrat eine ungerade Pixelbreite besitzen, also 15 Pixel in diesem Falle. Der Rand fliegt dann raus, bzw. wird transparent geschaltet.

36 Kommentare

Jeriko

Ich habe mir bisher mit IrfanView beholfen, also in Fireworks das Icon vorbereitet (256 Farben, 16×16 Pixel, als PNG exportiert) und dann via IrfanView in ICO konvertiert.

hans

Wobei die eigentliche Frage ja nicht ist, warum Photoshop nicht .ico kann, sondern warum die Browser nicht einfach PNGs anzeigen.

Ingo

Obwohl man Photoshop das ja durchaus beibringen kann:

http://www.telegraphics.com.au/sw/

Peter

Wichtig ist es bei diesen Dingern auch, sie im Hauptverzeichnis und nicht nur im Template-Dir abzulegen. Nur dann werden auch Feedreader und primitivere Browser das Icon anzeigen. Ich hab lange gebraucht bis ich das kapiert hatte.

ICO-Files mache ich immer mit Gimp, das kann das Format von Haus aus.

Nicolas

Ich hab mal mit den Iconbuilder von der Iconfactory rumgespielt und war recht zufrieden.
http://iconfactory.com/software

Icons können so direkt in Photoshop/Fireworks erstellt werden.

Matthias

Mit dem von Ingo genannten Photoshop-Plugin geht das doch ganz gut und vor allem bleibt man in seinem gewohnten Programm.

The Exit

Jetzt schaut das Favicon sehr fein aus :)

Tobias

Das schwierigste am Favicon ist ja das es trotz der wenigen Pixel einen Wiedererkennungswert bieten muss. Und zwar nicht nur das Favicon ansich sondern man muss es auch mit dem Rest der CI verbinden können. Nur sehr selten kann man die Bildmarke einfach runterskalieren. Und wenn, dann reicht einfaches skalieren meistens nicht aus. Da ist noch echtes Pixelschieben angesagt bevor es wirklich gut ausschaut.

Bernd

wie wär’s denn noch mit einem ipod/iphone webclip icon? (die glänzen doch so schön  … :)

Jann

Mit dem folgenden Online-Favicon-Editor habe ich vor kurzem herumgespielt und für äußerst nützlich empfunden:

Favicon Editor

Möckernbrücke

Warum ICO? Mit PNGs sind Halbtransparenzen kein Problem -deklariert per Meta-Tag. Und für den IE, der trotzdem stumpf nach einer favicon.ico fragt (tut er das eigentlich wirklich immer noch?), legt man dann eins mit weißem Hintergrund in Reserve hin, schon allein um die vielen 404er zu vermeiden.

Alexander Hahn

Mit dem Plugin arbeite ich schon Ewigkeiten, Halbtransparenzen kein Problem, bequem in Photoshop erstellt und tausendfach schnell wieder geändert, so macht das Spaß! Favicons sind so wichtig und leider gleichzeitig so unterschätzt! feinste Grüße!

Liechtenecker

Ãœber Photoshops Inkompetenz in Sachen favicon musste ich mich auch schon oft ärgern. Save for Web —> favicon.ico. Dankeschön.

Werde aber das o.g. Plugin mal ausprobieren.

Helfe mir derzeit mit Ifranview, sehr umständlich. Aber der IE6 (noch immer Hauptbrowser) kann es leider noch nicht darstellen .

Martin Lange

An Peter:
Sobald Du das mit folgendem Code im »Headbereich« intergrierst, ist das kein Problem mehr:

Ich nutze auch GIMP um sowas zu erstellen, das kann echt gut mit dem ICO-Format umgehen. Auch sämtliche Transparenzen.

Martin Lange

Oh, er hat den Code rausgeworfen.

(link rel=‘shortcut icon’ href=‘favicon.ico’ /)

Klaus

Hilfreich sind diese kleinen Dinger auch bei Tabbed Browsing.

MiSc

es gibt auch animierte favicons – mir fällt jetzt aber die seite nicht mehr ein …. einfach googlen!

stefano picco

grad im wust von 100ten bookmarks, finde ich favicons immens wichtig :) oder wenn man einige tabs auf hat, dann guck ich eher nach dem favicon, als mir nochmal den title durchzulesen.

Frank

Für PS gibt es eine Erweiterung (icoformat.8bi), dann klappt es auch mit dem Speichern als ico.
Ansonsten empfinde ich den Service von http://www.html-kit.com/favicon/ als sehr nützlich.

Raven

Hm, hatte nicht praegnanz.de früher auch mal ein Favicon? Warum hast du es denn rausgenommen?

Und stimmt es eigentlich, dass Favicons auch eine 32*32-Pixel-Version und/oder andere Formate enthalten dürfen/müssen/sollen, die je nach Kontext verwendet werden (Desktop etc.)? Oder ist das nur eine Eigenschaft des ico-Formats, wird bei Favicons aber nicht verwendet? Manche Sites schreiben auch, man solle nur 16*16 oder 32*32 anlegen, und im zweiten Fall würde es bei Bedarf runtergerechnet. Langsam bin ich echt verwirrt. ;)

omiT

wie sie z. B. auch http://www.mazda.de/ nutzt

omiT

und womit bekommt man diese animierten favicons hin?
wie sie z. B. auch http://www.mazda.de/ nutzt

Mara

Find die kleinen Dinger auch wichtig – sowohl angesichts der mittlerweile häufig zahllosen Favoriten als auch vor allem bei mehreren offenen BrowserTabs sind sie sehr hilfreich bei der Orientierung.

Hier noch ein sehr einfaches hilfreiches Online-Tool:
Favicon Generator

Frank

@omiT: mit dem Favicon-Tool: FavIcon from Pics online und einfach. Bild hochladen, verschiedene Versionen als Zip zurück bekommen und aussuchen, fertig.

Für iPhone und co. muss man dann noch zusätzlich das WebClip Icon einbauen, siehe WebClip Icon, das neue Favicon

Frank

@Raven: praegnanz.de hat es noch immer, siehe http://praegnanz.de/favicon.ico

Die meisten Browser sollten dies auch in der Adressleiste darstellen, auch wenn Gerrit den Link nicht im Quelltext hat, was aber besser wäre.

Michael

Hatte mich auch mal zum Thema Favicon ausgelassen und arbeite gerne mit VariIcon

Meinem PS habe ich auch, wie oben genannt, ico beigebracht.

Kilian

Graphic Converter, das uralte Streitroß macht alle Formate. Wieso ist eigentlich niemand darauf gekommen?

Daniel Harrington

> und womit bekommt man diese animierten favicons hin?

Ich weiß gerad nicht genau, ob das auch für animierte FavIcons gilt, aber statische können auch einfach in Photoshop als GIF gespeichert und anschließend umbenannt werden.

Klar ist das mit nem ICO-Plugin der einfachere Weg  …
aber wer sich das Leben immer nur einfach macht  … ;)

Gerrit

Wow, so viele Kommentare! Heute war ich leider krank im Bett gelegen, was mir wirklich stinkt, deswegen erst so spät eine Reaktion. Mit Graphic Converter habe ich es natürlich als erstes versucht, allerdings hat das irgendwie nicht so hingehauen, was aber auch daran liegen könnte, dass ich mit der Bedienung des Programms gar nicht klargekommen bin.

Das kostenlose Plugin von telegraphics scheint für mich das richtige zu sein – denn 79 Dollar finde ich ein bisschen zu viel für einen Icon Creator, obwohl das Teil von icon factory natürlich tolle Funktionen bietet!

Christian

Ich häng noch einen dran:
a) mein neuer (kostenloser) Lieblings-Icon-Editor: IcoFX (http://icofx.softonic.de/)
Im Photoshop eine 256×256-Grafik anlegen und dann per Copy’n‘Paste rüber.
Und dann dort auf 128, 64,32, 24 und 16 Pixel runterrechnen und ggfls mit den üblichen Werkzeugen noch korrigieren.
Die Zwischenformate finde ich wichtig für Desktop-Verknüpfungen in allen möglichen OS. Die sind ja gar nicht mehr nur noch auf 32×32 beschränkt.

b) Außer dem IE können eigentlich alle Browser problemlos auch andere Formate als ico anzeigen – also auch zB ein animiertes GIF, wenn man das denn wirklich möchte. Es muss nur korrekt per link rel=»shortcut icon« eingebunden werden.
Mein animiertes favicon hat allerdings Besucher so aufgeregt, dass ich Mails deswegen bekam und diese Menschen mein Blog nicht mehr besucht haben. Ob so eine Aversion auf der einen Seite durch den Aufmerksamkeitsvorsprung in einer Bookmark-Liste wettgemacht werden kann? Ich glaube nicht.

Aakadasch

Ich meine, The GIMP könne .ICO abspeichern …

René

@Klaus: Ja, für die Tabs bringen die den größten Nutzen. Wenn man teilweise 20 und mehr Fenster offen hat, sieht man vom Seitentitel nicht einmal mehr den ersten Buchstaben  …

Andreas

Noch ein Softwaretipp für Mac: Pixen 3.0 kann auch .ico abspeichern. Und ist auch eine schöne Software für Pixelartisten!

Franoukwel

@ Christian

Send pics!

Kommentar verfassen