Favicon erstellen - Anleitung und Tipps

Webdesign - Tutorial

Ein Favicon ist eine Art Icon für die eine Website. Dieses sieht man im Browser links neben der Adresszeile sowie in den Tabs bei der jeweiligen Website. Dieses Icon dient als kleines grafisches Merkmal der Website.

Eines der wohl bekanntesten wird das von Google sein:

Favicon Google selbst erstellen

Möchte man für die eigene Website selbst so ein Favicon erstellen, dann gibt es hierzu ganz einfache Möglichkeiten.

Wie erstelle ich ein eigenes Favicon für meine Website?

 

 

Ein Favicon ist ein 16x16 Pixel großes (kleines) Bild. In dieser Größe hat man natürlich nicht ganz soviele Gestaltungsmöglichkeiten, sollte sich also gut überlegen, was denn auf dem kleinen Bildchen zu sehen sein soll.

Es gibt verschiedene Möglichkeiten ein eigenes Favicon zu erstellen.

1. Favicon in einem Grafikprogramm erstellen

Nehmen Sie ein beliebiges Grafikprogramm (auch Paint geht) und erstellen Sie damit ein Bild mit 16x16 Pixel.
Anschließend speichern Sie dieses wenn möglich gleich als eine ".ico" Datei ab. Sollte dies nicht möglich sein, dann speichern Sie das Bild einfach als .jpg Datei ab. Anschließend holen Sie sich die kostenlose Software IrfanView (Download IrfanView). Mit diesem Programm können Sie die .jpg Datei einfach öffnen und als .ico Datei wieder abspeichern.
Als Dateinamen wählen Sie "favicon.ico".

2. Favicon auf www.favicon.cc erstellen

Eine weitere - und sogar noch viel einfachere Möglichkeit ein Favicon zu erstellen, bietet www.favicon.cc.
Dort kann ganz einfach ein eigenes Bild importiert werden - daraus wird dann ein Bild im Format 16x16px erstellt, welches man anschließend sogar mit eigenen Bearbeitungstools nachbearbeiten kann. Praktisch ist vor allem, dass man sofort sieht, wie das Favicon dann aussehen wird.
Ist man mit dem Ergebnis zufrieden, kann das erstellte Favicon wieder heruntergeladen werden. Dieses hat dann schon das richtige Format und auch den richtigen Dateinamen.

Man kann hier auch einfach von Hand (oder besser gesagt mit der Maus) ein Favicon erstellen und für die eigene Website verwenden.
{googleAds}
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2717861494506240";
/* Links - content */
google_ad_slot = "6814663901";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/googleAds}

Wie binde ich ein Favicon in die eigene Website ein?

Möchte man das erstellte Favicon für die eigene Homepage verwenden, muss man nur im HTML-Code der Website folgendes eintragen:

Im head Bereich:

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

Das Favicon muss sich im selben Verzeichnis befinden, wie diese HTML-Datei.

In Joomla! ist das verwenden des eigenen Favicons sogar noch einfacher. Hier muss das Favicon einfach in das Verzeichnis des Templates (dort wo die index.php liegt) gespeichert werden.