Blog // ZielSpurt // SERVICE: Website Favicon ✅

Beim Favicon handelt es sich um ein kleines quadratische Icon mitunter die einzige Orientierungshilfe, welches der Wiedererkennbarkeit einer Website dient. Dabei handelt es sich oft um eine simple Form eines Logos oder eines Bildes, welche neben dem Seitentitel im Browser-Tab angezeigt wird.

zielspurt-blog-favicon_nr-1_1024102

Favicon // ZielSpurt // Blog // SERVICE: Website Favicon

Blog // ZielSpurt // SERVICE: Website Favicon

Ein Favicon ist das eine kleines Icon, Symbol oder Logo mit 16 x 16 oder 32 x 32 Pixel, das von Webbrowsern angezeigt und immer verwendet wird, um den Wiedererkennungswert zu steigern. Es erscheint z. B. in der Lesezeichenliste oder auch Favoritenliste genannt, bei den Registerkarten und unter Windows, wenn eine Seite in der Taskleiste gespeichert oder als Kachel fest angelegt wird. Die Icons gehen auf den Konzern Microsoft zurück.

Aber wie erstelle ich so ein Favicon?

Der einfachste Weg ist auch mit einem Online-Generator. Hier können Sie nur Ihr gewünschtes Bild hochladen, bearbeiten und anschließend im ICO- und PNG-Format wieder herunterladen und speichern. Auch können Sie ein durchaus einfaches und prägendes Buchstaben-Icon im Generator Ihrer Wahl erstellen.

zielspurt-blog-favicon_nr-2_200340

Wie kann ich es nun in meiner Webseite einbauen?

Sie können mit einem kleinen HTML-Befehl in der Kopfzeile (head) im Hauptverzeichnis jederzeit ein Favicon laut der u.g. Folge einbinden:

(geöffneter
Kopfbereich (head))

<head>

<!–Apple-Geräte –>

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180×180.png“>

<!-- Alle Browser -->

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

<link rel="icon" type="image/png" sizes="96x96" href=".../favicon-96×96.png“>

<!-- Windows Phone App -->

<meta name="msapplication-square310x310logo" content=".../mstile-310x310.png">

<meta name="msapplication-TileColor" content="#ffffff [Hexfarbe (z.B. WEIß)]">

<!--[if IE]>

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href=“/bilder/icons/mein-icon.ico“>

<![endif]-->

 

</head>

Im CMS wie z. B. WordPress?

Viele eingesetzten CMS bieten im Backend die Möglichkeit, dass Favicon zu ändern an. Bei WordPress ab 4.3 kann das Favicon in die Mediathek hochladen und es ausgewählt werden. Die empfohlene Größe ist jedoch bei 512 x 512 Pixel.

Kann ich meine Favicon nur mit einem online Generator erstellen?

Nein, es ist genauso möglich, Favicons mit vielen Bild- oder Grafiksoftwareprogrammen in PHP oder ICO erstellen. Für absolute Einsteiger ist ein Online-Tool leichter zu bedienen.

Der Favicon-Generator ist denkbar einfach zu bedienen. Einmal die Datei hochladen, bearbeiten, Vorschau ansehen (wenn möglich), herunterladen und schon ist Ihr ICO-Icon einsatzbereit! So müssen Sie sich nicht lange mit einer Bild- oder Grafiksoftwareprogrammen beschäftigen, sondern können alles direkt und sofort online erledigen.

  1. Laden Sie Ihr Bild für das Favicon hoch, sofern Sie bereits eines haben. Alternativ können Sie im Buchstaben-Generator ein Logo nach Ihren Vorlieben gestalten. Bitte beachten Sie, dass das Bild zum Upload quadratisch und mindestens 310 x 310 Pixel groß sein sollte.

  2. Der Favicon-Generator wandelt das Bild in ICO- und PNG-Dateien um. Ihr Icon hat dann ein Format, dass alle Browser unterstützen.

  3. Sie können nun das Favicon als ZIP-Datei herunterladen und dann jederzeit auf Ihrer Website einbinden.

 

Wenn Sie das Favicon eingebunden haben, erscheint die kleine Grafik nun neben der URL in der Browser-Adressleiste und seit neuestem auch direkt in den Suchergebnissen.