1

Favicon: was ist das überhaupt?

Ein Favicon ist ein 16×16 oder 32×32 Pixel kleines Icon, Symbol oder Logo das man normalerweise links neben der Adresszeile des Browsers (z.B. Internet Explorer oder Firefox) findet. So wie hier:

favicon browser

Wer viele Browser-Fenster offen hat, kann so einfach und schnell die jeweils gewünschte Website finden. Es geht dabei vor allem um den Wiedererkennungswert – man sollte deswegen ein Favicon erstellen, das den Besucher an die restliche Homepage erinnert.

Favicon Schritt für Schritt erstellen

Um ein Favicon zu erstellen, benötigt man ein Logo oder ein Bild, das idealerweise quadratisch ist. Dieses wandeln wir mithilfe von favicon-generator.org in ein Favicon um. Eine Alternative dazu ist auch favicon-generator.de.

  • Auf favicon-generator.org klicken wir auf durchsuchen und laden das entsprechende Logo oder Symbol hoch. Der Haken bei Maintain Image Dimensions (don’t resize to 16×16 pixel square) sollte auf jeden Fall aktiviert bleiben.

favicon1

  • Nach dem Hochladen auf den Button „Create Favicon“ klicken

favicon2

  • Danach muss man sich das fertig generierte Favicon nur noch runterladen indem man auf den Link klickt (Rechtsklick > Ziel speichern unter).
  • Um das Favicon einzubauen benutzen wir den Homepage-Baukasten Jimdo. Jimdo ist deswegen ganz praktisch, da man hier auch im Free-Tarif ein eigenes Favicon anlegen kann. Wer keinen Homepage-Baukasten oder CMS verwendet, bei dem er das Favicon menügesteuert einfügen kann, bekommt bei favicon-generator.org einen HTML-Code, den man in den head-Bereich seiner Website einbauen muss.
  • Wir gehen zunächst in die Jimdo-Einstellungen klicken auf das Favicon Symbol in der Spalte Website.

favicon4

  • Wenn man bis jetzt alles richtig gemacht hat, kann man das Favicon jetzt auf seinem Computer auswählen (darauf achten, dass es auch wirklich eine .ico Datei ist).
  • Danach klicken wir nur noch auf „upload“ und schon können wir unser neues Favicon bestaunen.

favicon5

Tutorial erstellt von: Fabian


Verwandter Content zum Thema

Alle Tutorials in der Übersicht

Ihre Kommentare und Feedback

Zurück nach oben