Wie können wir dir helfen?

Favicon

Ein Favicon ist ein 16x16 oder 32x32 Pixel großes Bild und dient der Wiedererkennung deiner Seite. Es wird in der Adresszeile bzw. dem Tab des Browsers angezeigt und als Symbol für Lesezeichen (Bookmarks) des Browsers verwendet.

 

Hast du ein aussagekräftiges und einprägsames Symbol gewählt, fällt es leicht, dieses unter vielen gespeicherten Lesezeichen wiederzufinden. 

 

Bild: Favicon im Browser Tag

Favicon in einem Generator erstellen

Damit dein Favicon von allen gängigen Browsern dargestellt werden kann, lade es bitte unbedingt im *.ico-Format hoch.

Um das Favicon nicht komplett per Hand in einem Grafikprogramm zu erstellen, oder bei Darstellungsproblemen mit deinem erstellten Favicon, nutzt du einfach einen kostenlosen Favicon-Generator. Auf den folgenden Seiten findest du einige solcher Generatoren. Ein Favicon damit zu erstellen ist kinderleicht. Am Ende bekommst du ein passgenaues Favicon im *.ico Format, welches jeder Browser lesen kann. 

 

http://iconifier.net/

http://favikon.com
http://www.favicon.cc
http://www.favicon.co.uk 

Favicon hochladen

Bild: Favicon im Siteadmin

Das Menü zum Hochladen des Favicons findest du in der Bearbeitungsleiste im Menüpunkt "Einstellungen" unter der Überschrift "Webseite".

 

Klicke auf das "Favicon" Symbol, um dein Favicon hochzuladen, zu entfernen oder um es zu ändern.


Klicke auf "hochladen" bzw. "ändern", wähle das gewünschte Favicon von deiner Festplatte aus und bestätige die Auswahl. 

 

Oder klicke auf "entfernen" um das vorhandene Favicon zu löschen.

 

Fertig!


Für erfahrene Nutzer: Apple Touch Icon / Webpage Icon einfügen

Der Apple Touch Icon oder auch ein Webpage Icon bestimmen das Symbol für eine Webseite, das auf dem Home-Bildschirm des iPhones oder iPads angezeigt wird. Dies funktioniert mit dem hier gezeigten Code in der Regel auch für Android Geräte. Das Symbol macht es deinen Besuchern einfach, deine Webseite schnell auf ihrem mobilen Gerät wiederzufinden, wenn sie diese auf ihrem Home-Bildschirm speichern.

 

Erstelle dir für diese Funktion zunächst ein Icon im PNG Format (zum Beispiel mit Iconifier). Die kleinste Icon-Größe ist 58 x 58px und wird von Safari auch als Favicon im angezeigt.

 

Wie füge ich das Icon auf meiner Webseite ein?

  1. Lade das Bild auf einer versteckten Unterseite deiner Navigation als Bild-Element hoch.
  2. Gehe in den Ansichtsmodus.
  3. Klicke mit der rechten Mousetaste auf das Bild und wähle "Bildadresse kopieren".
  4. Gehe in den Bearbeitungsmodus und öffne deine Bearbeitungsleiste.
  5. Füge diesen HTML Code in den Head Bereich deiner Webseite ein:

<link rel="apple-touch-icon" href="http://deinedomain.de/custom_icon.png">

  1. Suche im eingefügten Code die Zeile http://deinedomain.de/custom_icon.png heraus und ersetze diese mit deiner Bildadresse.
  2. Um das Icon für verschiedene mobile Geräte zu optimieren, erstellst du dir die Icons in unterschiedlichen Größen und lädst sie auf deiner versteckten Unterseite hoch.
  3. Folge nun den Schritten 1 bis 3 für jedes einzelne Bild.
  4. Füge den folgenden erweiterten HTML Code in den Head Bereich deiner Webseite ein:

<link rel="apple-touch-icon" href="http://deinedomain.de/custom_icon_iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://deinedomain.de/custom_icon_ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://deinedomain.de/custom_icon_iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://deinedomain.de/custom_icon_ipad-retina.png">

  1. Suche im eingefügten Code http://deinedomain.de/custom_icon_ipohne.png heraus und ersetze es mit deiner Bildadresse für das iPhone Icon.
  2. Verfahre für deine weiteren Bilder genau so und füge ihre Bildadresse entsprechend ein.
  3. Speichern: fertig!