hey
backhome
1pixel
Navigation
Mainpage
Techpage
Internet
favicon
firefox
firefox
firefox
firefox
webspace
FSBG
redirect
Computer
adventure engines
csv2txt
GPG4win
primzahlen
Shutdown
Sudoku
text formatierer
Was ist ein Favicon?
Favicon erstellen!
Speichern im richtigen Format!
Favicon einbauen!
Animiertes Favicon einbauen!
Troubleshooting!
Links

Favicon? Huh? Was ist das denn?!

Einleitend wollen wir uns der Frage widmen, was ein Favicon eigentlich ist und warum es so toll ist.
Der Begriff Favicon setzt sich aus Favourites und Icon zusammen, also deinen Lesezeichen (Favourites) und einem Icon dafür.
Deshalb spricht man es auch [Fäif-eih-ken] aus und nicht [fafikon] ;)

Wenn du nun die Artikel hier in ihrer vollen Pracht schätzt und immer wieder lesen möchtest oder einfach nur zum Nachschlagen immer parat haben möchtest, dann fügst du diese Seite hier deinen Lesezeichen (oder Favoriten) hinzu. Ja und dann erscheint in der Liste aller deiner Lesezeichen eben ein Link zu dieser Seite, was ja auch gewünscht ist und dann ist da noch etwas. Neben dem Link ist ein kleines, meist Viereckiges Bildchen. Dies mein Freund, ist das Favicon der Seite.

In Falle meiner Seite, auf der du diesen Text nun gerade liest sieht das Favicon wie folgt aus:

favicon


Auf die ansprechende und formschöne Ästhetik dieses Favicons möchte ich hier nicht weiter eingehen...
Dieses Favicon wird aber nicht nur in den Lesezeichen angezeigt, wenn du einen einigermaßen modernen Browser benutzt, wird es auch in jedem Tab der Seite im Browsers angezeigt, somit weißt du immer, wo du gerade bist, und in welchem Tab welche Seite offen ist.
Früher wurde das Favicon auch in der Adresszeile des Browsers angezeigt. Seit aber jeder Browser in der Addresszeile auch ein eigenes Symbol, meist ein Schloss, für eine sichere SSL Verbindung anzeigt, wird das Favicon nicht mehr in der Addresszeile angezeigt. Dies hat den Grund, dass einige Betrüger im Internet einfach das Schloss Symbol als Favicon für ihre betrügerische Seite genommen haben um dem Benutzer vermeintliche Sicherheit vorzutäuschen. Also gibt es jetzt kein Favicon mehr in der Addresszeile.

Wenn du selbst eine Webseite hast und nun ein Favicon dafür basteln möchtest bist du hier gerade richtig, aber dazu mehr in den nächsten paar Kapiteln, aber keine Angst es ist nicht schwer.
Das Favicon einer jeden Seite sollte einen hohen Wiedererkennungswert haben, dann findet man das gesuchte viel schneller in den Lesezeichen wieder.




Favicons erstellen!


Du hast also eine eigene Homepage oder gar noch mehr auf deinem Webspace liegen und möchtest ein Favicon auf dieser anzeigen und in den Bookmarks deiner Besucher ablegen? Crazy Stuff, nun gut, dann lies mal unbeirrt weiter.

Als erstes musst du natürlich dein Favicon erstellen. Das kannst du sogar mit dem mit Windows mitgelieferten Programm Paint machen, aber ich empfehle dir ein gutes Grafikprogramm, zum Beispiel The Gimp oder Photoshop.
The Gimp ist ein Open Source Programm und kann somit von jedem heruntergeladen werden und ohne ein Entgeld dafür hinzublättern benutzt werden. Photoshop hingegen kostet ein halbes Vermögen (gibt es aber auch gebraucht bei ebay oder in der Schüleredition), kann dafür aber auch viel mehr.
Mein Tip: Sieh zu, dass du irgendwoher billig an Foddoschop rankommst, das kannst du auch für viele weitere Anwendungen benutzen. Bei ebay gibt es oft billige Schülerversionen.

Die Grundgröße des Favicons ist 16x16 Pixel. Mit Paint bleibt dir nichts anderes übrig, als die Pixel abzuzählen um das Bild in der gewünschten Größe herauszubekommen. Mit Foddoschop tust du dir da schon leichter, damit kannst du einfach ein Foto von dir oder mit einem anderen Motiv, welches du als Favicon haben möchtest nehmen und mit dem Befehl 'Bild>Bildgröße>16x16Pixel' in die richtige Form stauchen.

Nachdem das Bild die richtige Größe erreicht hat kommen wir zum Wichtigsten.


Das richtige Speichern

Dein Favicon muss im Format .ico, dem Windows-Icon-Format vorliegen, sonst wird das ganze nichts. Findige Köpfe sind schon auf die Idee gekommen einfach ein .png File einfach in .ico umzubenennen, das funktioniert meistens auch, kann aber zu vielen Problemen und Kompatibilitätsstörungen führen. Also lieber nicht machen und den koscheren Weg wählen.
Und der ist folgender: Da Photoshop eben leider nicht standardmäßig .ico schreiben kann speicherst du dein mit Foddoschop bearbeitetes Bild als 16 Pixel x 16 Pixel großes .png Bild ab und wandelst es danach erst ins .ico Format um.
Das kannst du mit The Gimp oder mit Irfanview erledigen, da die beiden Proggys ins .ico Format schreiben können. Irfanview kann noch mehr Grafikoperationen durchführen und ist ein gutes Programm. Ein weiteres Programm, mit dem man .ico Dateien erstellen kann ist IcoFX, damit kann man eigentlich nur .ico Dateien erstellen. Es kann einiges, vor allem um für viele mobile Anwendungen passende Icons in allen Größen gleichzeitig zu erstellen und um bereits vorhandene Bilder ins .ico Format umzuwandeln eignet es sich sehr gut, sonst sagt mir da Photoshop mehr zu, da die Effekte besser ausgearbeitet sind und es einfach mehr kann.
Öffne einfach dein eben erstelltes PNG-Icon mit Gimp oder Irfanview und speichere es aus dem Programm heraus als .ico. Oder erstelle es gleich mit einem der beiden Programme, dann musst du aber auf den Luxus den dir Foddoschop bietet verzichten.

Es gibt da aber noch eine Möglichkeit. Falls du öfters ein Favicon machen willst, da du entweder mehrere Webseiten hast oder mit deinem Favicon immer sehr schnell unzufrieden bist oder einfach weil es geht und noch einfacher ist kannst du auch mit Photoshop ein .ico File schreiben.
Dazu brauchst du aber ein Photoshop Plugin fürs .ico Format.
Lade es in der richtigen Version (richtiges Betriebssystem) von der verlinkten Seite herunter, oder falls die Seite mal nicht mehr funktionieren sollte habe ich einen Mirror angelegt:

.ico Plugin für Photoshop
* Windows
* MAC
* MAC - CS2
* Windows 4 PNG-ico
* MAC - CS3
* MAC 4 PNG-ico
* Windows 64bit


Diese Files installierst, bzw. entpackst und kopierst du dann in das Foddoschop Addon-Verzeichnis, unter Windows ist dies unter folgendem Pfad zu finden:
..\Adobe\Photoshop-V.xy\Zusatzmodule\Dateiformat\

Wobei V.xy deine Photoshopversion ist.

Wenn du den Ordner nicht findest, suche nach *.8BI Dateien, aber du wirst es schon finden, die Ordner klingen alle gleich, oder zumindest ähnlich, englisch oder deutsch, es kann auch der folgende Ordner sein:
..\Adobe\Photoshop-V.xy\Plug-ins\File Formats\

Nun kann Foddoschop auch .ico Files schreiben :)




Das Favicon endlich einbauen!


Damit dein wunderschönes und gerade frisch erstelltes Favicon auch auf deiner Seite angezeigt wird musst du es zuerst mal auf deinen Server laden. Lade es in das Stammverzeichnis deines Servers. Also in die höchste Ebene. Dort wo auch die index.html oder index.php liegt. Dort liegt nun auch dein favicon.ico, oder wie auch immer du es genannt hast herum.

Nun musst du im Kopf, also dem header Teil deiner index.php (oder dem includiertem file, in dem der html header steckt) oder index.html nur noch angeben, wie und welches Favicon angezeigt werden soll. Das bewerkstelligst du, indem du folgenden Codeschnipsel in diese Datei einfügst.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Dieser Codeschnipsel macht sich am besten irgendwo im Header, also schaut das ganze dann vielleicht so aus:
...
<head>
<title>Schluckschlampen dieser Welt, alle von mir gefüllt</title>
<meta name="author" content="der geile gustav">

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

</head>
...





Ein animiertes Favicon einbauen!


Viele Seiten haben sogar ein Favicon das sich bewegt, sprich es ist animiert. Und fast jeder moderne Browser unterstützt die Darstellung von animierten Favicons. Soweit sogut, nun will ich dir nicht vorenthalten wie man so etwas macht.
An sich erstellst du nur ein animiertes gif und baust dieses ein. Natürlich sollte dein animiertes gif nicht sehr groß sein, sondern die selben Maße haben wie ein normales Favicon im .ico Format, also 16x16 Pixel, oder wenns sein muss 32x32 Pixel. Und wie du schon aus den selben Werten für Breite und Höhe erkennen kannst sollte dein animiertes Favicon natürlich quadratisch sein, sonst wird es verzerrt dargestellt.
Wenn du deine Animation erstellt hast läds du das .gif Bild in das Wurzelverzeichnis deines Webspaces, genauso wie das .ico Favicon, und dann musst du es eigentlich nur noch einbinden. Das bewerkstelligst du mit folgendem html Code:
<link rel="icon" href="favicon.gif" type="image/gif">
Wobei du anstelle von favicon.gif natürlich den Dateinamen deines Favicons angibst, sollte es anders heißen. Natürlich kannst du auch wieder auf Nummer sicher gehen und den absoluten Pfad zu deinem Favicon an dieser Stelle angeben.
Es ist sehr empfehlenswert, auch noch ein statisches, unanimiertes Favicon im .ico Format bereitzustellen und einzubinden, als Fallback für ältere Browser die kein animiertes Favicon unterstützen, dann packst du diesen Codeschnipsel irgendwo in den Header einer jeden Seite, das Ergebnis schaut dann vielleicht so aus:
...
<head>
<title>Schluckschlampen dieser Welt, alle von mir gefüllt</title>
<meta name="author" content="der geile gustav">

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.gif" type="image/gif">


</head>
...
Auch die Reihenfolge ist wichtig, der Browser arbeitet den html Code von oben nach unten durch, will zuerst das normale Favicon laden, dann muss er aber das animierte Laden. Wenn er animierte Favicons nicht unterstützt bleibt er beim normalen Favicon. Andersherum würde er zuerst das animierte Favicon laden, dann aber sehen, dass es was neuers gibt und er noch das normale Favicon laden soll, und das unterstützt ja eigentlich jeder Browser seit dem Jahr 2000 und somit verwirft er dann das animierte Favicon, wenn es denn zuerst eingebunden wird. Also das animierte Favicon immer zuletzt in den Header schreiben.




TroubleshO0ting!


!Bau keinen Scheiß!


... jetzt mal ohne Witz, viel kann man nicht falsch machen, aber es kann ja sein, dass du ein fauler Sack bist, oder einfach keine Ahnung von html hast und einen Blog oder eine sonstige Webseite betreibst die auf einem CMS basiert und du mit dem vorherigen Kapitel, dem Einbauen nichts anfangen kannst.

Da musst du in den Einstellungen deines laufenden Programms kucken, wo du das Favicon einfügst.

Hier ein paar Beispiele:
  • Wordpress (Blog):
    ändere die header.php, indem du folgenden Code einfügst: (Quelle)
    <link rel="shortcut icon" href="<?php bloginfo('url'); ?>/favicon.ico" type="image/x-icon" />.
    Natürlich gibt es auch einen Favicon Mod für Wordpress.

  • PHP-Kit (CMS):
    Administration> Konfiguration> Meta-Angaben> Favoriten-Icon
    Hier gibst du den absoluten Pfad zum Favicon ein.

  • Simple Machines Forum (Forum):
    Okay, du hast nur ein SMF mit cooler Community auf deinem Webspace laufen und dieses willst du mit einem Favicon versehen... du brauchst den Favicon Mod. Installiere diesen über den Package-Manager, wie du dies mit jedem Mod machst, und dann schau unter:
    Admin> Configuration> Current Theme> Favicon Image Url:
    Hier gibst du den absoluten Pfad zum Favicon ein, welcher wie immer das Stammverzeichnis sein sollte.
    Mach das am besten, während die Forensprache auf Englisch eingestellt ist, da der Mod nicht übersetzt ist und sonst in jeder anderen Sprache eine leere Zeile ohne Beschreibung angezeigt wird (oder eben nicht angezeigt wird, da die Zeile ja dann leer ist), und somit ist es nicht gerade einfach herauszufinden, wo der Link denn nun hingehört.
    Ab SMF 2.0 brauchst du den Mod nichtmehr, da zeigt SMF einfach die favicon.ico Datei, die im Stammverzeichnis deines Servers liegt an, auch wenn SMF vielleicht in einem /SMF oder /Forum Verzeichnis installiert ist.

  • phpBB (Forum):
    Auch für das phpBB brauchst du wie beim SMF einen Favicon-Mod. Installiere diesen wie immer und gib den Link an, dann ist alles in Butter!





Links


Allzuviel mehr gibt es zu diesem Thema nicht zu sagen. Wenn es etwas geben sollte, was hier noch nicht drin ist, dann schreib das in die Kommentare am Ende der Seite um dich zu beschweren und mich dazu zu bringen es hier reinzuschreiben. Ansonsten habe ich hier noch einen interessanten Link:
Defender of the Favicon
Ein Spiel auf 16x16 Pixel direkt in deinem Browser, also direkt im Favicon sogar. Das ganze ist aber eher technisch spannend als spielerisch, aber mal anschauen kostet ja nix...


Außerdem habe ich eine Liste mit vielen kostenlosen und werbefreien Webspace Anbietern zusammengestellt, da kannst du dein FavIcon auch hochladen und stolz der Welt zeigen.
Außerdem habe ich noch einen kurzen aber guten Artikel zu Webseiten-Hintergrundbildern im Vollbild mit CSS, ohne das Bild zu verzerren oder zu quetschen und ohne den Einsatz von Javascript geschrieben.
Und noch weitere tolle Artikel findest du hier drunter und am linken Rand verlinkt.







Kommentare

1) Jürgen  (mail versteckt)
schrieb am: 2013-11-03 12:38:28
Hallo
ich bekomme bei meiner PHP Kit Seite keine Favicon angezeigt, obowhl es im root Verzeichnis liegt.
2) selmiak  (mail versteckt)
schrieb am: 2013-11-04 18:53:04
Hi Jürgen.
Ich habe mal noch eine kurze Beschreibung eingefügt, wie man das Favicon auf einer PHP Kit Seite einbaut.
Aber an sich finde ich PHP Kit Schrott, da würde ich dir zu einem besseren CMS raten oder gleich die Seite selber coden...


Neuen Kommentar abgeben
Text:
*


Name:
*

Spamschutz: bitte 6504 eintragen
*

web:
 
email:
*
Mail-Adresse verstecken?