Design, How To

Wie man ein Favicon erstellt: Tipps, Tricks und Services von Logaster

Die Struktur:

1.Die Erstellung eines Favicons mit Adobe Photoshop
2.Wie man ein Favicon mit GIMP (GNU Image Manipulation Program) erstellt
3.Entscheidende Vorteile von .ICO im Vergleich zu .PNG und .GIF
4.Konvertieren Sie .PNG zu .ICO mit speziellen Online-Konvertern
5.Wie installiert man ein Favicon in WordPress?

Ein Favicon ist ein winziges Symbol oder Merkmal, das verwendet wird, um Ihre Webseite in den Favoriten zu identifizieren. Das Favicon wird außerdem immer neben der Adresse oder dem Namen der Webseite angezeigt, wenn Sie den Browser verwenden. In den meisten Fällen ist das Favicon quadratisch, mit einer Größe von 16 mal 16 Pixeln und es wird im .ICO-Format gespeichert.
In diesem Artikel werden wir über die „Basis“ sprechen, die für den Start des ganzen Prozesses benötigt wird. Wir werden Ihnen zeigen, wie man mit verschiedenen Grafikbearbeitungsprogrammen ein Favicon für die Webseite erstellt und werden Ihnen auch die wichtigste Methode zum Hinzufügen des Favicons zur Webseite vorstellen.

Was benötigt man, um anzufangen?

  1. Man benötigt als erstes das Logo mit einer Auflösung von mindestens 512 mal 512 Pixeln (es muss quadratisch sein).
  2. Das Logo muss im PNG-Format sein.
  3. Adobe Photoshop oder GIMP Grafikbearbeitungsprogramm.

Die Erstellung eines Favicons mit Adobe Photoshop

So erstellt man ein Favicon mit transparentem Hintergrund:

1.Öffnen Sie das Logo im PNG-Format mit dem transparenten Hintergrund, indem Sie auf „Datei“ – „Öffnen“ klicken und ein Bild wählen, das auf Ihrem Computer gespeichert ist.

Open the file

2. Löschen Sie mit dem „Löschen-Werkzeug“ den Namen des Unternehmens vom Logo, so dass nur das Symbol übrig bleibt und ändern Sie die Hauptfarbe auf weiß.

3. Ändern Sie die Größe des Logos auf 16 mal 16 Pixel, indem Sie auf „Bild“ – „Bildgröße“ klicken.

Decrease the size

4. Wählen Sie eine Größe von 16 mal 16 Pixel. Ihr Favicon wird unglaublich klein aussehen, aber Sie müssen sich keine Sorgen machen, weil alles wie geplant ist.

5. Speichern Sie das Bild, indem Sie auf „Datei“ – „Speichern unter“ klicken und das PNG-Format zum Speichern wählen.

Wenn Sie mit dem Logo im Favicon zufrieden sind, dann gehen Sie zu Punkt 4 dieser Anleitung.

So erstellen Sie ein Favicon mit einer Ihrer Unternehmensfarben:

1.Sie müssen wie bei der ersten Option eine PNG-Datei öffnen. Der Hauptunterschied ist, dass der Hintergrund eine Unternehmensfarbe enthalten wird und nicht transparent sein wird.

Open the file

2. Entfernen Sie den Text, so dass nur das Symbol übrig bleibt: Verwenden Sie das „Farbauswahlwerkzeug„, um die Hintergrundfarbe zu wählen. Klicken Sie und die Farbe in der Palette wird dieselbe Farbe wie der Hintergrund haben. Verwenden Sie jetzt das „Pinselwerkzeug“ und entfernen Sie den Namen des Unternehmens vom Logo.

3. Ändern Sie die Größe des Bildes indem Sie auf „Bild“ – „Größe ändern“ klicken und wählen Sie eine Größe von 16 mal 16 Pixeln. Wenn das Bild proportional und attraktiv aussieht, dann speichern Sie es im PNG-Format und gehen Sie zum vierten Schritt in dieser Anleitung.

Wie man ein Favicon mit GIMP (GNU Image Manipulation Program) erstellt

GIMP ist ein Grafikbearbeitungsprogramm das den Benutzern ermöglicht mit verschiedenen Arten von Vektorbildern zu arbeiten. Der entscheidende Vorteil dieser Software ist die Tatsache, dass man damit ein Favicon im ICO-Format erstellen kann, ohne dass man verschiedene Bild-Konverter verwenden muss. so wie es z.B. mit Adobe Photoshop der Fall ist.

1.Öffnen Sie die Datei im Programm, indem Sie auf „Datei“ – „Öffnen“ klicken und wählen Sie eines der Bilder das auf Ihrem PC gespeichert ist.create favicon with GIMP
2.Sie müssen jetzt den Text entfernen, so dass nur das Symbol übrig bleibt: Klicken sie auf die Farbpalette und wählen Sie den Code der Unternehmenshintergrundfarbe. Wenn Sie den Code nicht kennen, dann wählen Sie das „Farbauswahlwerkzeug“, gehen Sie mit dem Mauszeiger auf den Hintergrund und klicken Sie mit der linken Maustaste darauf. Die Farbe wird automatisch ausgewählt. Verwenden Sie jetzt das „Pinselwerkzeug“, um alle Buchstaben vom Favicon zu entfernen.

3. Verringern Sie die Größe des Logos auf die Standardgröße des Favicons, d.h. 16 mal 16 Pixel, indem Sie auf „Bild“ – „Bildgröße ändern“ klicken.

4. Exportieren Sie das Logo, indem Sie auf „Datei“ – „Exportieren als…“ klicken.

Export favicon

5. Wählen Sie das Export-Format, z.B. Microsoft Windows Symbol mit .ICO-Dateianhang. Klicken Sie dann auf den „Exportieren-Knopf“.

Choose the export format

Alles steht jetzt bereit! Sie können das Favicon jetzt auf Ihrer Webseite verwenden!

Entscheidende Vorteile von .ICO im Vergleich zu .PNG und .GIF

  1. Kompatibilität: Alle Browser, einschließlich IE 5.0 unterstützen das ICO-Format.
  2. Man erhält nicht mehr den Fehler 404 vom Server: Alle modernen Browser (getestet mit Chrome 4, Firefox 3.5, IE8, Opera 10 und Safari 4) werden immer die favicon.ico Datei anfordern, deswegen ist es sehr zu empfehlen sie auf der Webseite zu haben.
  3. Die Datei im ICO-Format kann mehrere Symbole enthalten und es gibt keinen Grund mehr als eine Datei für Symbole mit einer Größe von 16 mal 16 und 48 mal 48 zu erstellen.

Konvertieren Sie .PNG zu .ICO mit speziellen Online-Konvertern

Man kann verschiedene Online-Konverter verwenden, um eine PNG-Datei ins ICO-Format umzuwandeln. Wir haben uns entschlossen online-convert.com zu verwenden, aber Sie können jede andere verfügbare Option verwenden, die für diesen Zweck geeignet ist, da alle Optionen ähnlich funktionieren. Lassen Sie uns anfangen:

1.Öffnen Sie die Webseite und verwenden Sie die Leiste auf der linken Seite, um folgendes zu wählen: „Bild Converter“ – „In ICO umwandeln“.

Open the website

2. Wählen Sie die Dateien auf Ihrem Computer, indem Sie auf „Dateien auswählen“ klicken oder indem Sie die Dateien in das entsprechende Feld ziehen. Fahren Sie dann fort, indem Sie auf „Umwandlung beginnen“ klicken.

Choose the files on your computer

3. Klicken Sie auf den „Download“ Knopf, um das Favicon im ICO-Format auf Ihren Computer herunterzuladen. Sie können die Datei auch zum Cloud-Speicher hochladen oder sie direkt im ZIP-Format herunterladen.

download a favicon

Wie installiert man ein Favicon in WordPress?

Sie können Ihr Favicon (favicon.ico) ins Hauptverzeichnis (root) Ihrer Webseite laden.
Das Root-Verzeichnis ist das Hauptverzeichnis der Webseite, mit allen wichtigen Dateien von WP, einschließlich „index.php“ und anderen Ordnern wie z.B. „wp-admin“, „wp-content“ und „wp-includes“. Sie müssen die „favicon.ico“ Datei unbedingt im selben Ordner speichern wie „index.php“.

1.Öffnen Sie den „Administratorbereich“ von WordPress.

WordPress Dashboard

2. Gehen Sie zum Bereich „Design“.

“Appearance” section.

3. Öffnen Sie den „Theme-Editor“.

Open "Theme editor"

4. Wählen Sie die Datei „Header“ oder „Header.php“ aus, um sie zu bearbeiten.

choose header

5. Finden Sie die Zeile im Code, die mit <link rel=»shortcut icon» beginnt und die mit  /favicon.ico «/> aufhört. Sie müssen den folgenden Code direkt unter demHTML-Tag  <head> ändern oder hinzufügen. In unserem Beispiel haben wir die “favicon.ico” Datei verwendet. Sie können sich den Namen aussuchen.

Hier ist der Code: <link rel=»shortcut icon» href=»<?php echo get_stylesheet_directory_uri();?>/favicon.ico»/>;

6. Speichern Sie die Änderungen.

Das Fazit:

Während der Entwicklung der Webseite muss man sicherstellen, dass man auch auf die kleinsten Details, wie z.B. das Favicon, achtet. Es ist wirklich sehr einfach das Favicon zur Webseite hinzuzufügen. Dieses kleine Element zeigt Ihr Gesamtkonzept für das Design und die Aufmerksamkeit gegenüber Benutzern. Haben Sie irgendwelche Fragen oder möchten Sie Ihre Erfahrungen mit uns teilen, die Sie bei der Erstellung von Favicons gesammelt haben? Sind können das unten in den Kommentaren tun!

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5,00 out of 5)
Loading...


About Shpitula Natalia

No information is provided by the author.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.