Browserbild (Favicon) erstellen und installieren

2 Comments

September 19, 2014

Plus Geschenk: WP-Favicon-Plugin

Wer kennt sie nicht, die kleinen Bildchen in der Browserzeile, die sogenannten Favicons. Jedes Unternehmen möchte sich heute – auch mit solchen Kleinigkeiten – hervorheben. Solche Favicons zu erstellen ist nicht schwer, dennoch werde ich immer wieder von Firmengründern und Selbständigen gefragt, wie man das machtder in die Browserzeile bekomme. Und weil ich grundsätzlich eher faul bin, habe ich zu mir selbst gesagt: „Schreibe auf, wie man’s macht, dann musst du es nicht mehr erklären.“ So kam es zu diesem Artikel.

Favicon erstellen

Schritt 1: In drei Schritten zum eigenen Favicon:

Drei Schritte sind notwendig, um ein Favicon auf seiner Homepage zu haben.

  1. Bild auswählen oder erstellen
  2. Als Favicon abspeichern
  3. Ab auf die Browserzeile

Weil es dabei einige Punkte zu beachten gibt, gehen ich im Folgenden auf die einzelnen Punkte ein.

Bild auswählen oder neu erstellen

Grundsätzlich können Sie jedes Bild verwenden. Die Frage ist nur, wie sieht es schlußendlich als Favicon aus. Hier müssen Sie einfach ausprobieren und sich das Ergebnis jeweils ansehen. Wenn Sie ein gutes Grafikprogramm besitzen und sich auch damit auskennen, können Sie ihr zukünftiges Favicon damit erstellen. Wichtig ist nur, dass es ein quadratisches Bild wird. Dieses müssen Sie dann auf die Größe von 16 x 16 Pixel bringen.

Allen Nichtgrafikern empfehle ich, eines der vielen Online-Tools zu nutzen. Beispielsweise können Sie auf http://favicon-generator.de ein gewünschtes Bild (mit Klick auf „Durchsuchen“) hochladen und dann bearbeiten oder ein komplett neues Bild erstellen.

Favicon für Webseiten

Für eine Eigenkreation wählen Sie zuerst eine Hintergrundfarbe durch Klick auf eines der vielen Farbkästchen (Schritt 1 -unteres Bild). Dann klicken Sie auf das Eimer-Symbol (Schritt 2 – unteres Bild), und schon ist der Hintergrund farbig.

Favicon-Tool

Jezt können Sie beginnen, ein Bild darauf zu malen. Klicken Sie dazu im ersten Schritt immer auf das gewünschte Farbfeld. Im großen weißen Feld malen Sie dann nach belieben Ihr Symbol.  Im unteren Bild sehen Sie auch, dass Sie ihr Kunstwerk zeitgleich in späterer Originalgröße als Favicon sehen (Pfeil 3).

Browser-Bild

Sobald Sie mit Ihrer Schöpfung zufrieden sind, klicken Sie auf den orangen Button „OK“, um das Bild zu speichern (Pfeil 1 – unteres Bild). Es wird dann darunter eine Vorschau des Browsers erscheinen (Pfeil 2 – unteres Bild), damit Sie nochmals kontrollieren könne, ob es so geworden ist, wie Sie es sich vorgestellt haben. Ebenfall neu eingeblendet wird ein Link (Pfeil 3 – unteres Bild), damit Sie ihr neues Favicon herunterladen können. Wie es gemacht werden muss, steht auf dem Link: Rechtsklick mit der Maus und „speichern unter“ wählen, und das Bildchen abspeichern. Als vierten Schritt (Pfeil 4 – unteres Bild) hätten die Webseitenbetreiber gerne, wenn Sie die Webseite eingeben, auf der das Favicon zukünftig erscheinen wird.

Favicon erstellen

 

Schritt 2: Bild als Favicon.ico abspeichern

Wenn Sie Ihr Bildchen mit dem oben genannten Online-Tool oder einem anderen erstellt und herunter geladen haben, dann haben Sie hier nichts weiter zu tun. Sie haben das Bild nämlich bereits im richtigen Format abgespeichert. Das verlangte Format ist das „Windows Icon“ – Format. Die Dateien erhalten die Endung „.ico“. Sie haben also eine Datei herunter geladen, die „favicon.ico“ heißt. Wenn dem so ist, können Sie bereits zum 3. Schritt weiter gehen.

Für alle anderen gibt es mehrere Möglichkeiten. Sie müssen Ihr Bild oder Foto jetzt irgendwie in das „ico“-Format bringen. Ich weiß, dass die meisten Grafikprogramme leider nicht in diesem Format abspeichern.

Sie haben folgende Möglichkeiten:

  • Variante 1: Sie verwenden ebenfall ein Online-Tool, wie ich es anhand eines Beispieles unter Schritt 1 beschrieben habe, und laden ihr Bild hoch, bearbeiten es gegebenenfalls und laden es im richtigen Format wieder herunter.
  • Variante 2: Sie öffnen Ihr Bild mit einem Grafikprogramm, das Ihnen erlaubt, im ico-Format abzuspeichern. Beispielsweise kann das kostenlose Bildbetrachtungsprogramm „irfanview“ dies bewerkstelligen.

 

Schritt 3: Ab in die Browserzeile mit dem Favicon

Nun kommen wir zum letzten Schritt, der für WordPress-Benutzer nun sehr einfach wird. Sollten Sie kein WordPress-Nutzer sein, so müssen Sie die Befehlszeile <link href=“favicon-Bildadresse“ rel=“shortcut icon“/> in die header.php-Datei einfügen. Den Text favicon-Bildadresse müssen Sie ersetzen mit der Speicheradresse Ihres Favicons.

Da ich auf meinem Blog für Unternehmer und Firmengründer schreibe, von denen ich nicht annehme, dass sie sich so im Detail mit Webseitenprogrammierung, HTML, usw. beschäftigen (wollen), empfehle ich allen anderen Youtube. Geben Sie ins Suchfeld „Favicon einbinden“ oder Favicon installieren“ ein und Sie erhalten viele gute Beschreibungen.

Die meisten Firmengründer und Selbständigen werden sicherlich einen WordPressblog betreiben. Das ist übrigens aus mehreren Gründen sehr sinnvoll, aber das ist ein anderes Thema. Um das Favicon komplett automatisch zu installieren, verwenden Sie am besten ein Plugin.  Das empfohlene Plugin erhalten Sie kostenlos von mir. Aber dazu später.

Installation des kostenlosen Plugins

Das Plugin installieren Sie wie gewohnt, in dem Sie im linken Menü auf den Reiter „Plugins“ klicken. Dann wählen Sie „Plugins hochladen (s. Bild unten)

Plugins hinzufügen

Jetzt müssen Sie das Plugin im .zip-Format (also genau so, wie Sie es auch erhalten) hochladen. Dazu klicken Sie auf „Durchsuchen“. Es öffnet sich ein Explorer-Fenster. Sie suchen die Datei „favicon.ico“ und klicken dann auf den zweiten Button „Installieren“.

Plugin hochladen

Nach der Installation erscheint der Text: Plugin erfolgreich installiert. Wollen Sie das Plugin aktualisieren?

Da sie ja genau das wollen, klicken Sie auf „aktualisieren“. Jetzt ist das Plugin installiert. Fahren Sie nun im linken Menü über den Punkt „Einstellungen“ (nicht klicken). Es erscheint ein Untermenü. Dort sehen Sie das neu installierte Plugin „favicons“. Klicken Sie darauf und es öffnet sich das Einstellungsfesnter des Plugins.

Plugin für favicons

Pfeil 1: Sie erkennen im Bild oben, dass Sie auch ihr Gravatarbild als Favicon auswählen können. Dazu benötigen Sie nicht einmal ein Bild, sondern müssen nur bei http://gravatar.com registriert sein.

Pfeil 3: Hier könnten Sie eines der bestehenden Bildchen auswählen. Aber wer will schon auf seiner Seite ein Favicon von anderen Seiten.

Pfeil 2: Diesen Knopf müssen Sie nun auswähen, wenn Sie Ihr eigenes Bild anzeigen lassen wollen. Was Sie dazu benötigen, ist der Speicherplatz Ihres Bildes. Dazu müssen Sie zuerst Ihre favicon.ico – Datei in Ihre Medien-Bibliothek hochladen. Dies funktioniert genauso, wie das hochladen eines Plugins. Klicken Sie auf „Medien“ und dann auf „Datei hinzufügen“. Wählen Sie die favicon-Datei auf Ihrem PC aus und klicken Sie auf hochladen.

Um die Speicheradresse zu erhalten müssen Sie in der Mediathek auf Ihre Datei klicken. In den Details sehen Sie die Adresse der favicon-Datei (unteres Bild). Kopieren Sie diese Adresse vollständig.

favicon-URL

Jetzt gehen Sie zurück zu den Einstellungen des favicons-Plugin und geben die kopierte Adresse in das leere Feld neben dem zweiten Knopf, den Sie bereits angeklickt haben, ein (oberes Bild – Pfeil 2).

Nun scrollen Sie ganz hinunter und klicken auf „Save Changes“, um Ihre Einstellungen zu speichern. as war’s. Ihr selbst erstelltes Favicon erscheint beim nächsten aufruf Ihrer Webseite in der Browserleiste.

Mein Geschenk an Sie:
Wordpress-Plugin für die automatische Favicon-Installation

Ich schenke Ihnen sehr gerne das WordPress-Plugin.

Hier können Sie nun das Favicon-Plugin herunterladen!

Teilen macht Freude

About the author 

Alfons Burtscher

Seit über 10 Jahren als Unternehmensberater und Coach in kleinen und mittleren Firmen unterwegs, begann er 1997 nebenberuflich und seit 2009 hauptberuflich selbständig zu arbeiten. Was früher überhaupt kein Thema war, wurde im Laufe der Angestelltenjahre immer mehr zu einem starken Wunsch. Er kennt daher die Ängste, Zweifel und vor allem den inneren kleinen Schweinehund, der nicht aus seiner gewohnten Komfortzone raus will. Mit seinen Artikeln möchte er Menschen helfen, die den Schritt in die Selbständigkeit machen wollen oder bereits vollzogen haben, damit sie den Erfolg erlangen, den sie anstreben. Sein Motto: "Lerne, aber behalte es nicht für dich, damit die Welt davon profitiert."

Leave a Repl​​​​​y

Your email address will not be published. Required fields are marked

38 + = 43

  1. Die Wichtigkeit des Punktes Browserbild erstellen unterschätzen viele Unternehmer. Den Beitrag finde ich äußerst hilfreich und auf den Punkt getroffen. Kompliment, weiter so.

    Reply

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Title Goes Here


Get this Free E-Book

Use this bottom section to nudge your visitors.