nofactory | webdesign » Grafik http://www.nofactory.eu/scripts Sachliches Webdesign und seriöse Suchmaschinenoptimierung Mon, 28 Dec 2009 14:44:25 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 favicon.ico – Favicon einbinden http://www.nofactory.eu/scripts/faviconico-favicon-einbinden/ http://www.nofactory.eu/scripts/faviconico-favicon-einbinden/#comments Sun, 02 Nov 2008 14:21:54 +0000 admin http://www.nofactory.eu/scripts/faviconico-favicon-einbinden/ Ein Favicon (favourite icon) ist ein 16×16 Pixel kleines Bildchen, das der Browser links von der URL in der Adresszeile anzeigt.

Favicon erstellenZahlreiche online-Dienste, wie z. B. der Favicon-Generator helfen beim Erstellen eines Pixelbildchens von Hand.

Mit jedem anderen Grafik-Programm, wie dem kostenlosen Gimp, oder sogar mit dem von Windows mitgelieferten “Paint” geht’s natürlich genauso einfach: Entweder ein vorhandenes Bild auf 16×16 Pixel verkleinern, oder ein neues Bild erstellen, Ansicht vergrößern, bearbeiten, danach als favicon.gif oder favicon.jpg speichern und schließlich in favicon.ico umbenennen. Natürlich muss das Bild so beschaffen sein, dass es in diesem winzigen Format erkennbar/wiedererkennbar ist.

Das Einbauen ist auch ziemlich einfach:

Bild mit dem Namen “favicon.ico” auf den Server (ins oberste Verzeichnis) laden und mit

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”> zwischen <head> und </head> einbinden.

Außer in der Adresszeile des Browsers taucht das Favicon auch auf Tabs und Registerkarten und bei den Lesezeichen auf.

Beim Wiener Datenschmutzblogger Ritchie Pettauer habe ich eine Möglichkeit gefunden, auch animierte Favicons ohne viel Aufwand zu erstellen:

animiertes FaviconDer Favinator ist ein kostenloses Online-Tool, mit dem man ein quadratisches Bild im Format GIF, JPG oder PNG in ein 16×16 Pixel großes Favicon umwandeln und danach herunterladen kann. Das Besondere am Favinator ist, dass man einen Text als Laufschrift durch das Favicon scrollen lassen kann:

Stimmt: Geht sicher auch etwas phantasievoller, als ich das hier gemacht habe!

Mit <link rel=”shortcut icon” href=”favicon.gif” type=”image/ico” /> zwischen <head> und </head> einbinden.

Ob man sowas braucht? Unbedingt!

Wissenswertes rund um das Favicon

]]> http://www.nofactory.eu/scripts/faviconico-favicon-einbinden/feed/ 0 Gimp: Transparente und halbtransparente Bilder (PNG) http://www.nofactory.eu/scripts/gimp-transparente-und-halbtransparente-bilder-png/ http://www.nofactory.eu/scripts/gimp-transparente-und-halbtransparente-bilder-png/#comments Sun, 02 Nov 2008 08:45:56 +0000 admin http://www.nofactory.eu/scripts/gimp-transparente-und-halbtransparente-bilder-png/ Halbtransparente Hintergrundbilder erstellen mit Gimp

Hier gibt’s jetzt gab’s mal Luftballons*. In den Google-Farben. Die scheinen schienen durch die halbtransparenten Menüboxen. Mit dem kostenlosen Grafikprogramm The Gimp kann man halbtransparente PNG-Bilder ziemlich einfach erstellen.

Halbtransparente Bilder mit GimpSo geht’s: Neues transparentes Bild erstellen, Größe 10×10 Pixel (”Ebenen” > “Transparenz” > “Farbe zu Transparenz”). Pinseltool anwählen, Deckkraft einstellen und mit dem Pinsel über das Bild fahren. Bild als *.png speichern. Fertig.

Hier wurden die Luftballons im Stylesheet als Backgrounds für die Sidebars links und rechts festgelegt. Die Navigationsquadrate sind einzellige Tabellen mit, wie oben beschrieben erstellten PNG-Dateien unterschiedlicher Deckkraft als Hintergrundbildern.

Wunderbar, klappt auch überall. Außer im Internet Explorer 6. Der ist zu blöd, dieses spezielle PNG-Format richtig darzustellen. Das habe ich aber erst mitgekriegt, als ich das neue Layout schon hochgeladen hatte. Marktanteil Internet Explorer 6 im November 2008 = 43,6%. Prost! Und jetzt?

Auf www.dreckstool.de kann man seine Stimme für dieses dämliche Stück Software abgeben.

* Die Luftballons habe ich für 3 Dollar bei iStockphoto gekauft: Kostenlose Bilder und Fotos

]]> http://www.nofactory.eu/scripts/gimp-transparente-und-halbtransparente-bilder-png/feed/ 4