Ein benutzerdefiniertes Favicon erstellen

Inhaltsverzeichnis:

Anonim

Ich werde etwas Geeky zugeben. Ich mag Favicons wirklich gerne. Sie machen Spaß Sie sind ein großartiges Branding-Tool. Sie sind einfach etwas, das kleine Eigentümer tun können, um ihre Websites aufzufrischen und sogar die Benutzerfreundlichkeit für Benutzer zu erhöhen.

Wenn Sie nicht wissen, was ein Favicon ist, lassen Sie mich etwas Hilfe anbieten:

$config[code] not found

Favoriten sind die Mini-Grafiken mit 16 × 16 Pixeln, die Ihre Website in der Adressleiste, in einer Lesezeichenliste eines Benutzers oder in ihren Browser-Registerkarten darstellen. Sie ermöglichen Ihren Besuchern, eine visuelle Verbindung zu Ihrer Website herzustellen.

Ordentlich! Wie erstellst du einen?

Gestalten Sie Ihr Favicon:

  • Von Hand: Öffnen Sie Ihr Lieblings-Grafikprogramm und machen Sie sich daran. Sie möchten entweder eine neue Datei mit 16 × 16 Pixeln erstellen und so lange vergrößern, bis der Bereich bearbeitet werden kann, oder einen Bereich öffnen, der größer ist, aber immer noch ein Vielfaches von 16 × 16 ist. Wenn Sie Ihr Favicon von Hand entwerfen, verwenden Sie etwas, das Ihre Marke genau wiedergibt - ob es sich dabei um ein übliches Farbschema handelt, um die Initialen Ihres Unternehmens usw. Was auch immer Sie erstellen, muss den strengen Beschränkungen von 16 × 16 Pixeln standhalten.
  • Mit Werkzeugen: Wenn Sie beim Design gefordert sind (keine Sorge, ich bin es auch), gibt es einige großartige Tools, die es selbst Leuten wie uns leicht machen, großartige Favicons zu erstellen. Zum Beispiel wird Ihnen Favicon.cc etwas Struktur geben und Sie können Ihre direkt von ihrer Website aus erstellen, oder FavIcon von Pics lässt Sie ein Bild hochladen und das Favicon für Sie erstellen. Einfach!

Speichern Sie Ihr Favicon: Wenn Sie Ihre Datei speichern, reduzieren Sie sie auf 16 Bit und speichern Sie sie als "favicon.ico", wenn Sie Photoshop oder "favicon.gif" oder "favicon.png" verwenden, wenn Sie etwas anderes verwenden. Wenn Sie Photoshop verwenden und Ihrem Favicon zusätzlichen Schwung verleihen möchten, empfiehlt es sich, das Plug-In für das Windows-Symbol-Dateiformat herunterzuladen, damit Sie es im ICO-Format speichern können.

Laden Sie Ihr Favicon hoch: Stellen Sie eine Verbindung zu Ihrem Server her und laden Sie Ihr Favicon in den Stammordner Ihrer Site hoch. Fügen Sie dann den folgenden HTML-Code zum Head-Abschnitt Ihrer Webseite (zwischen den beiden Head-Tags) hinzu (wählen Sie Ihren Dateityp):

Aktualisierung: Wenn Sie fertig sind, aktualisieren Sie Ihren Browser und Ihr Favicon sollte angezeigt werden. Wenn nicht, gib es ein paar Minuten. Manchmal dauert es ein bisschen, bis alles synchronisiert ist.

Und das ist es! In vier Schritten haben Sie ein tolles Marken-Favicon, mit dem Benutzer Ihre Site in der Liste der Lesezeichen oder in ihrem Browser erkennen können. Ganz einfach, richtig?

Hier sind einige meiner Lieblingsfavicons im Web:

  • Michigan Feuerwerk
  • Jeffrey Zeldman
  • Boing Boing
  • Encyclopedia.com
  • Fool.com
  • Michael Greys SEO-Blog

Irgendwelche anderen persönlichen Favoriten?

17 Kommentare ▼