Eigenes Favicon für eure Website

**Vocast** · 23.10.2008, 23:15

Ein was bitte?
Ein Favicon

(engl. Favourite Icon) ist kleines Bild, welches im Browser

links neben der Adressleiste angezeigt wird.
Hier das Beispiel des Starter-Forums:

Was bringt mir ein Favicon ?

Es ist dann nützlich, wenn User eure Seite in ihre Favoriten packen. Da eure Seite bestimmt nicht die einzige in der Liste sein wird, kann man leicht den Überblick verlieren. Bietet ihr ein Favicon

an, kann man euch recht schnell anhand dieses kleinen Bildes finden. Es liegt in der Natur des Menschen, sich an Symbolen, Schildern, Logos etc. zu orientieren, statt an Text. Auch hierzu zeige ich euch ein Beispiel:

Was sehen wir hier? YouTube hat ein schönes Favicon

, Map24 ... doch was ist das? 2 weiße Blätter... So, oder ähnlich, kommt auf den Browser

an, würde eure Seite in einer Favoritenliste erscheinen. Als weißes Blatt Papier. Nun ist diese Liste noch sehr klein, wäre sie größer müsste der Mensch mal wieder lesen. Wer schnell etwas erreichen will, will nicht lange die List durchstöbern. Logo finden, klicken - fertig. (Ist bestimmt nich bei allen so, aber ich hab damit Erfahrungen gemacht)

Wie erstelle ich ein Favicon ?
Es sieht schwierig aus, aber es ist wirklich kinderleicht. Was ihr dazu braucht: Euer Logo - oder eine andere Idee, ein Grafikprogramm und eine Internetseite. Paint von Microsoft reicht dafür vollkommen aus. Andere Grafikprogramme sind dafür natürlich auch geeignet - ich will es aber so einfach wie möglich erklären. Daher erklär ich es nur für Paint.

Also, legen wir los!!! Wie bei fast allem, müsst ihr euch bei der Erstellung eines Favicons, an gewisse Regeln halten. Als Grafiken werden *.ico (Icon), *.png (Portable Network Graphics) oder auch *.gif (Graphics Interchange Format) Dateien verwendet. Letzteres Format eignet sich hervorragend, wenn ihr Bewegung in euer Favicon bringen wollt. Zur Erstellung von GIF-Dateien ist allerdings ein gesondertes Programm zu verwenden.

Zudem ist eine Größe von 16 x 16 Pixeln erforderlich.

So - genug Regeln, jetzt seid ihr gefragt!

Öffnet Paint und bringt erstmal die Arbeitsfläche auf die richtige Größe. Das macht ihr so:

Im folgenden Fenster gebt ihr Breite: 16 und Höhe: 16 an. Die Maßeinheit muss hier Pixel sein. Schwarzweiss oder farbig überlasse ich euch.

Das bestätigt ihr mit OK. Jetzt seht ihr eine kleine quadratische, weisse Arbeitsfläche - das wird mal euer Favicon.

Unruhiges Händchen? Bei der kleinen Darstellung ist wohl kaum einer ruhig - daher vergrößert euch die Fläche mit dem Lupenwerkzeug:

Jetzt ist eurer Kreativität freien Lauf gelassen! Denkt aber daran, nicht zu viel und nicht zu dünn zu zeichnen - ihr habt das kleine, weisse "Bild" gesehen, da sieht man nicht viel drauf

Wenn ihr das nun habt ist es euch überlassen, als was ihr es abspeichern wollt. Ich habe *.png gewählt.

Einbindung in die Website

Öffnet nun eure Website und schaut in den Quelltext, Code, wie auch immer es bei eurem Editor heisst - oder schlicht: öffnet eurer Seite mit dem Texteditor von Microsoft. (Rechtsklick auf eure Datei --> Öffnen mit... --> Editor)

Wir müssen den Link zum Favicon in den head-Bereich stecken. Eine kurze Erklärung: Eine Website ist immer in folgendem Schema aufgebaut:

Code:

<html>
<head>
"Kopf"-Informationen zu eurer Seite, wie Author, Sprache etc.
</head>
<body>
Alles sichtbare auf der Seite
</body>
<html>

In den Headbereich also, tragt ihr nun folgendes ein (hier das Beispiel png):

Code:

<link rel="shortcut icon" href="http://www.eure-website.de/bild.png" type="image/png">

rel="shortcut icon" gibt hier an, dass es sich um ein Favicon handelt. Manchen Browsern reicht es auch, wenn ihr einfach nur "icon" angebt. Da euer Favicon aber von allen gesehen werden soll, empfehle ich meine Variante.

href="...." ist der Link zu eurem Bild auf eurem Server.

type="image/png" gibt an, um welches Format es sich handelt. Diese Passage muss je nach Dateityp geändert werden.

Für GIF: image/gif
Für ICO: image/x-icon

Speichert das jetzt so ab und ladet sowohl euer Bild, als auch die Seite hoch und bestaunt das Ergebnis!

In meinem Beispiel, sieht es so aus: http://www.vocast.de/vm/starterforum/favicon.html

Anmerkungen zu diesem Tutorial

Natürlich könnt ihr euer Favicon nennen wie ihr wollt, ihr könnt es auch ablegen wo ihr wollt. Manche Browser suchen jedoch standartmäßig nach der Datei "favicon.ico" wodurch eine Einbindung wie oben erklärt wegfallen würde. Wichtig hierbei: "favicon.ico" MUSS im Hauptverzeichnis liegen!!!

Also: http://www.eure-website.de/favicon.ico

Aktuelle und neue Browser

bieten auch erst seit kurzem die Möglichkeit für PNG und GIF Favicons. Standard war immer das ICO. Wer also eine Seite für "jedermann" kreieren möchte, sollte beim ICO bleiben. Die Einbindung würde ich jedenfalls unter keinen Umständen weglassen, da nicht alle und schon gar nicht ältere Browser

automatisch nach der favicon

.ico suchen.

GESCHAFFT!!!

Und, war es schwer? Jetzt könnt ihr eurer Seite den letzten Feinschliff geben und euch in der Favoritenliste anderer Leute hervorheben!

Wünsche euch viel Spaß! Bei Fragen oder Unklarheiten könnt ihr gerne schreiben. (Bitte keine PN, soll schließlich für alle sein

)

Gruß
Vocast

***fox*** · 24.10.2008, 07:53

Sehr gute Anleitung, vielen Dank dafür, Vocast.

Dabei fällt mir auf: ich hab ja immer noch das Standard-Bild von vB

Werd ich mir bei Gelegenheit mal vornehmen (jetzt weiß ich ja wie!)!

**D3nN!sD3luXe** · 26.10.2008, 20:06

das vB favicon

sieht aber schöner aus als das iphp favicon

N3tLux · 27.10.2008, 10:57

Eine Frage dazu. Verwende das Forensoftware phpBB 3.0.2, kann ich diese Einstellung auch dafür verwenden? Wenn "JA" Wie?

**Vocast** · 27.10.2008, 14:54

Zitat von N3tLux

Eine Frage dazu. Verwende das Forensoftware phpBB 3.0.2, kann ich diese Einstellung auch dafür verwenden? Wenn "JA" Wie?

Geht auf jeden Fall... Wie? Dafür kenn ich die Struktur leider nicht. Ich würde mal nach einer Datei wie "header_information. html

" oder "header_content. html

" (keine Ahnung, wie sie das Kind genannt haben!) suchen. Und dann nach Hinweisen suchen, die auf ein Favicon

schließen lassen.

Vor paar Jahren hatte ich auch phpBB - bis ich die Faxen dicke hatte, mich bei jedem Kram tot suchen zu müssen

Da hab ich mir einfach ein eigenes programmiert. Da weiss ich wenigstens wo ich suchen muss

***fox*** · 27.10.2008, 15:00

Such mal in der "index. php

" nach "<head>". Dadrunter musst Du dann den Text einfügen (siehe Tutorial oben).

**Vocast** · 27.10.2008, 15:29

Zitat von fox

Such mal in der "index. php

" nach "<head>". Dadrunter musst Du dann den Text einfügen (siehe Tutorial oben).

So einfach wird das bei phpBB nicht funktionieren, weil sie Templates-Klassen nutzen. Heisst: die index. php

enthält reinen PHP

-Code in der alles geladen wird (header, footer - der Mittelteil) Das Gerüst und das Layout wird dann über .htm oder . html

Dateien in diese php

-Datei geladen.

Der Sinn dahinter: so trennt man Programmierung von Layout.

So war es früher jedenfalls und der Grund, warum ich Kopfschmerzen und graue Haare bekommen habe - eine heiden Arbeit, wenn man alles an seine Bedürfnisse anpassen wollte.

**Vocast** · 27.10.2008, 15:34

Sorry, für das Doppelpost, aber ich habe soeben was gefunden:

hab mir die ganzen Dateien mal runtergeladen.

Vom Hauptverzeichnis gehst du in styles/"dein Theme"/template/

Dort findest du folgende Datei:
simple_header. html

Da findest du den <head> Bereich... Jetzt folgst du einfach meinem Tutorial.

Wie schon erwähnt: Es ist eine heiden Arbeit, wenn man den Kram seinen Bedürfnissen anpassen will. Man sucht jedes Mal aufs neue die Nadel im Heuhaufen

***fox*** · 28.10.2008, 12:10

Zitat von Vocast

Wie schon erwähnt: Es ist eine heiden Arbeit, wenn man den Kram seinen Bedürfnissen anpassen will. Man sucht jedes Mal aufs neue die Nadel im Heuhaufen

Ja, so die richtige Logik hab ich da auch nicht gefunden im Aufbau.

Wobei man sagen muss, dass einige Funktionen, die man bei anderen Foren an den Dateien selber oder über MySQL durchführen muss, im phpbb im Adminbereich selber gemacht werden können!

**Kulle** · 16.05.2011, 21:46

Danke werde das morgen nochmal probieren ^^.

Eigenes Favicon für eure Website

Das ist eine Diskussion über Eigenes Favicon für eure Website im Hilfreiche Anleitungen/Tutorials Forum; Ein was bitte? Ein Favicon ( engl. Fav ourite Icon ) ist kleines Bild, welches im Browser links neben der ...

LinkBack

Themen-Optionen

Anzeige