WordPress – neues Feature: Website Icon > Von der Erstellung bis zum Upload – Tutorial

veröffentlicht:

aktualisiert:

WordPress hat ein neues Feature: das Website Icon. Hier zeige ich euch den Verlauf von der Erstellung eines eignen Icons bis zum Upload in WordPress.

Seit der Version 4.3 hat WordPress ein neues Feature hinzugefügt: Das Website Icon, besser bekannt als Favicon. Während man für ein Favicon viel Quelltext und einen Generator benötigt ,um das ganze dann noch über ein extra Plugin oder direkt in HTML einzubinden, genügt es nun, einfach ein Bild im WordPress Backend hochzuladen.

Im Prinzip kann man jedes beliebige Bild als Icon hochladen. Als Firma wird man natürlich das eigene Logo, bzw. einen Buchstaben davon als Icon verwenden. Ich zeige euch das anhand eines Kundenbeispieles.

Hier war die CI  mit dem Logo schon vorhanden. Allerdings war das Logo zu klein, denn WordPress verlangt eine mindeste Größe von 512 x 512 px. Das ist sehr groß, allerdings hat iOS ein Retina Display mit hoher Auflösung.

Einen eigenen Buchstaben mit dem Bildbearbeitungsprogramm GIMP erstellen

Wie das genau funktioniert, habe ich euch in diesem Beitrag bereits erklärt. Genau auf diese Weise wurde nun das Website Icon hier erstellt:

 

siteicon-poest

WordPress Site Icon

So erstellst du ein einfaches Logo als Buchstabe mit GIMP

WICHTIG:  Unbeding als .png Datei abspeichern. Sonst entsteht ein unschöner schwarzer Rand.

Das neu erstellte Logo in die WordPress Mediathek importieren

Wenn du nun dein neu erstelltes Icon bereits abgepeichert und abgelegt hast, kannst du es in dein WordPress Backend importieren.

  • WordPress Dashboard öffnen
  • Gehe auf Medien >Medienübersicht > Datei hinzufügen
  • Datei auswählen

Es öffnet sich dein Desktop , wo du nun dein Bild auswählen kannst. Dieses wird nun hochgeladen. Wenn es da ist, einfach die Mediathek wieder schließen.

  • Nun gehe auf Design > Anpassen > Website Informationen

wordpress-icon-hochladen

Es öffnet sich obiges Fenster. Dort

  • Datei auswählen

Du kommst wieder in die Mediathek, wählst dein Icon aus und klickst auf

wordpress-site-icon-hochladen

Nun ist dein Icon sichtbar. icon-bild

  • Gehe auf Speichern und Publizieren

Falls du das Speichern und Publizieren vergisst, ist das Website Icon in der Adressleiste wieder weg :cry:

 Diese Website Icon Formate erstellt WordPress:

  • einfaches Icon
  • Icon für iOS
  • Icon für Android
  • Icon – Kachel für Windos

So speicherst du dein Website Icon auf dem iPhone:

Wie das geht, habe ich hier genau erklärt.

  • Webseite öffnen in Safari
  • Unten in der Mitte auf den Pfeil klicken
  • Es öffnent sich ein neues Fenster
  • auf Homebildschirm speichern klicen
  • und das Icon ist bereits geladen

iOS-icon

Fertig.

ACHTUNG:

  • Falls im vorhandenen WordPress Theme bereits ein Favicon abgelegt bzw. vorhanden ist, so muss dieses zuerst herausgelöscht werden, damit die neue WordPress Funktion bzw. das neue Feature greifen kann.
  • Das WordPress Website Icon ist in der WordPress Installation abgelegt. Das heißt, bei Themewechsel, gegebenenfalls bei einem Logo Wechsel bleibt das alte Website Icon erhalten. Es muss auch von dort wieder gelöscht werden.

 

FAZIT:

Das neue WordPress Feature ermöglicht es nun , mit einfachen Mitteln ganz ohne Programmierkenntnisse sein eigenes Favicon zu haben. Da es sich allerdings um kein eigentliches Favicon handelt, welches eine .ico Datei ist, heißt es bei WordPress eben Website Icon, bzw. Site Icon.

Es erfüllt allerdings voll seinen Zweck.  Es kommt Freude auf, bzw. Stolz, wenn man dann sein eigenes cooles Icon auf einem Handy bzw. Tablet Display bewundern kann.

Weiters liefert so ein Icon einen guten Wiedererkennungswert für die eigene Marke.

 

WEITERFÜHRENDE LINKS:

Blogartikel von mediendesign-quer. WordPress, Webdesign, Social Media .. Alle Neuigkeiten erfahren >> Werde Fan auf Facebook

Veröffentlicht in Kategorie:

Top