Wie erstelle ich ein Favicon für meine Website?

Kurz und Knapp Checkliste:

  1. Such dir ein Bild aus mit scharfen Kanten und wenig Details
  2. Hol dir Gimp oder benutz einen Favicon Creator online
  3. Bring dein Bild auf die Größe 16 x 16 Pixel
  4. Speicher dein Bild unter dem Namen „favicon.ico“ als Ico Datei wie das Beispiel schon sagt ab
  5. Lad deine Website mit deinem FTP-Programm (Filezilla)
  6. Such die Dateien „index.php“ und „.htaccess“
  7. Lad deine Ico Datei zwischen die beiden auf deinen Server hoch (Drag and Drop)
  8. Speicher und schau dir deine Website im Browser an
  9. Wenn dein Symbol kommt, dann freu dich und verlink mich auf deiner Website 😉
  10. Wenn nicht dann geh wieder auf dein FTP-Programm
  11. Such die Datei header.php
  12. Füge in die <head> Zeile folgenden Code ein „<link rel=“shortcut icon“ type=“image/x-icon“ href=“./favicon.ico“>“
  13. Lade die Datei mit dem FTP-Programm auf deinem Host-Server hoch
  14. Aktualisier deine Seite im Browser
  15. Dein Symbol muss jetzt da sein
  16. Freu dich und verlink uns auf deiner Seite 😉               simplypassion.bplaced.net
  17. Wenn es immer noch nicht funktioniert dann musst du schauen ob du die Datei falsch benannt hast, falsch abgespeichert, falsch hochgeladen oder sonstiges misslungen ist.

was ist ein Favicon?

Bestimmt bist du hier auf diese Seite gestoßen weil du dir eine eigene Webseite oder einen eigenen Blog gebaut hast. Für diesen kleinen Traum benötigst du auch ein paar Bilder und Symbole. eines dieser Symbole ist das Favicon. Dieses Symbol siehst du in deiner Tab Leiste links neben deinem Website name oder deiner URL als kleines Bild zur Vorschau deiner Seite. bei der Social Media Plattform Facebook ist  es „das kleine blaue Kästchen mit dem weißen F“. Wie du sicherlich weißt sieht es sehr komisch aus wenn du kein Favicon an deiner Webseite angehängt hast. Deshalb würde ich es jedem empfehlen der anfängt sich einen eigenen Blog oder eine Webseite aufzubauen sich mit dem Thema Favicon auseinanderzusetzen denn dieses verspricht direkt Seriosität auf den ersten Blick. Das Ziel unserer Webseite soll ja sein dass möglichst viele Leute diese auch besuchen und das funktioniert nur mit einem guten Symbol in der Tableiste.

Im Großen und Ganzen sind Favicon nur sehr stark verkleinerte Bilder die auf einem Blick sich dem Besucher sofort einprägen sollen und wiedererkennungswert bilden sollen, so nach dem Motto „Ah die Seite mit dem Vogel als Bild kenne ich schon, die ist gut aber wer denkt sich so ein Bild aus“. Dieses Bild soll zeigen was ihn auf der Webseite erwartet.

wie erstelle ich mein Favicon?

Nun benötigst du ein Bildbearbeitungs Programm wie Gimp oder du benutzt einen Online Favicon Converter. Wenn du dir z.b. Gimp runtergeladen hast, dieses steht kostenlos zur Verfügung im Internet, dann musst du dir ein Bild aussuchen dass du gerne als Favicon nehmen möchtest. Hierfür dienen Bilder mit scharfen Kanten und wenig Details. Du kannst dich an dem Facebook-Logo orientieren. Das bedeutet Katzenbilder, Urlaubsfotos oder sonstige Bilder mit scharfen Details die nur schwer erkennbar sind, bringen nichts. Wenn du nun dein Bild in Gimp geöffnet hast dann musst du per „Größe ändern“ Funktion es auf entweder 16 x 16 Pixel oder 32 x 32 Pixel ändern normalerweise sind hier aber 16 x 16 besser geeignet. Nun speicherst du dein Bild, wichtig ist hierbei dass du es als „.ico“ datei speicherst! Wichtig ist hierbei dass du das Dokument „favicon.ico“ nennst.

Nun gehst du auf dein FTP-Programm durch dieses du deine Daten auf deinen Hosting Anbieter hochlädst.

Nun musst du die beiden Dateien „.htaccess“ und „index.php“ suchen. Zwischen diesen beiden Dateien lädst du nun dein Favicon hoch. Speicher nun im FTP-Programm deine Webseite und aktualisiere sie im Browser wenn du jetzt dein Symbol siehst hast du alles richtig gemacht. Sollte das nicht der Fall sein, dann musst du diese Datei noch in deine Index Datei einfügen. Hierfür gehst du wieder auf deinen FTP-Server und öffnest nun die „index.htm“ Datei. In diese musst du innerhalb des <head> Bereichs folgenden Textcode einfügen. Speicher nun deine Webseite mit deinem FTP-Programm und aktualisiere sie im Browser. Spätestens jetzt müsste dein Symbol Eingebunden sein.

Viel Spaß mit deiner neuen Webseite und viel Erfolg beim Bloggen.

Wenn dir unsere Blogbeiträge gefallen, dann teile uns doch auf Social Media, damit unterstützt du uns sehr 😉 Du kannst dich natürlich auch als Minder registrieren und damit andere durch deine Expertise unterstützen.

Wenn du jetzt noch mehr lesen möchtest dann klick dich mal rechts durch unsere anderen Beiträge, dort findest du sicherlich etwas passende für Dich.

Schreibe einen Kommentar