praegnanz.de büro für intervernetzte medien

Gerrit, 07.02.2008

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

  1. Jeriko am 7. Februar 2008 #

    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.

  2. hans am 7. Februar 2008 #

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

  3. Ingo am 7. Februar 2008 #

    Obwohl man Photoshop das ja durchaus beibringen kann:

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

  4. Peter am 7. Februar 2008 #

    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.

  5. Nicolas am 7. Februar 2008 #

    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.

  6. Matthias am 7. Februar 2008 #

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

  7. The Exit am 7. Februar 2008 #

    Jetzt schaut das Favicon sehr fein aus :)

  8. Tobias am 7. Februar 2008 #

    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.

  9. Bernd am 7. Februar 2008 #

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

  10. Jann am 7. Februar 2008 #

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

    Favicon Editor

  11. Möckernbrücke am 8. Februar 2008 #

    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.

  12. Alexander Hahn am 8. Februar 2008 #

    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!

  13. Liechtenecker am 8. Februar 2008 #

    Ü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 .

  14. Martin Lange am 8. Februar 2008 #

    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.

  15. Martin Lange am 8. Februar 2008 #

    Oh, er hat den Code rausgeworfen.

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

  16. Klaus am 8. Februar 2008 #

    Hilfreich sind diese kleinen Dinger auch bei Tabbed Browsing.

  17. MiSc am 8. Februar 2008 #

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

  18. stefano picco am 8. Februar 2008 #

    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.

  19. Frank am 8. Februar 2008 #

    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.

  20. Raven am 8. Februar 2008 #

    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. ;)

  21. omiT am 8. Februar 2008 #

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

  22. omiT am 8. Februar 2008 #

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

  23. Mara am 8. Februar 2008 #

    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

  24. Frank am 8. Februar 2008 #

    @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

  25. Frank am 8. Februar 2008 #

    @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.

  26. Michael am 8. Februar 2008 #

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

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

  27. Kilian am 8. Februar 2008 #

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

  28. Daniel Harrington am 8. Februar 2008 #

    > 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  … ;)

  29. Gerrit am 8. Februar 2008 #

    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!

  30. Christian am 9. Februar 2008 #

    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.

  31. Aakadasch am 10. Februar 2008 #

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

  32. Martin am 10. Februar 2008 #

    Jon Hicks hat dazu auch einen netten Vortrag.

  33. René am 11. Februar 2008 #

    @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  …

  34. Andreas am 12. Februar 2008 #

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

  35. Franoukwel am 12. Februar 2008 #

    @ Christian

    Send pics!

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.