Website erstellen

Tutorial: Favicon erstellen und in die Homepage einbauen

Robert Brandl

Von Robert

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

Robert Brandl

Gründer und Geschäftsführer

Servus, ich bin der Gründer von Tooltester! Ursprünglich aus München startete ich mein Berufsleben als Projektmanager in einer digitalen Marketingagentur in Frankfurt, wo ich immer derjenige war, der neue Web-Tools testete. Glücklicherweise konnte ich dieses Hobby im Jahre 2010 in meinen Beruf verwandeln. Ich freue mich von Ihnen zu hören. Sie finden mich auch auf LinkedIn.

Mehr über uns

Hinter den Kulissen dieses Artikels.

Dieser Artikel wurde von unserem Expert:innenteam geschrieben und folgt einem genauen Verfahren..

So arbeiten wir

Kommentare

DE ebook cover

Der Homepage-Kurs für Einsteiger

Wenn Sie sich erst mal mehr Grundlagen anlesen möchten, dann sollten Sie in unserer „Homepage-Anleitung für absolute Beginner“ schmökern. Hier zeigen wir Ihnen Schritt-für-Schritt die einzelnen Schritte beim Aufbau einer eigenen Homepage. Das Beste: das alles kostet Sie keinen Cent.