Favicon erstellen – Erhöhung des Corporate Designs
Wer nicht weiß was ein Favicon ist, das ist das kleine Symbol links neben der URL in der Browserleiste, zwar hat nicht jede Website ein Favicon, jede Große allerdings schon. Sie unterstützt den Wiedererkennungswert innerhalb der Booksmarks (dort wird das Favicon auch angezeigt) oder bei mehreren geöffneten Tabs im Firefox.
weitere Anzeigenplätze von Favicons:
- im Windows Startmenü
- als Verknüpfung auf dem Desktop
- in der Task- und Linkleiste
- in der Titelseite des Browsers
Worauf muss man achten beim erstellen eines Favicon
Die Größe eines Favicon beträgt 16 x 16 Pixel, also recht klein und nicht ganz einfach wenn man seine Corporate Identity bestmöglich darin unterbringen möchte. Achte darauf das die Hauptfarben deiner Website im Favicon untergebracht sind und eventuell etwas markantes.
Ein schlechtes Beispiel für ein Favicon ist: meine-erste-homepage.com, ich vermute das es eine Website wiederspiegeln soll, allerdings kann der User das nicht wirklich erkennen, Favicon erstellen bedeutet zu verzichten und wirklich nur die wichtigen markanten Punkte in die 16 x 16 Pixel zu quetschen.
Viele nehmen den Anfangsbuchstaben ihrer URL, vorausgesetzt man hat schon eine starke Marke ist das eine gute Idee, wie man an Google sieht. Heise-Online hat für sich aber die bessere Variante getroffen, ein eigenes Logo genau wie die Deutsche Bank
Wie erstelle ich ein Favicon
Wie schon oben angesprochen hat man nur 16 x 16 Pixel zur Verfügung. Hinzu kommt das das Logo dann noch als .ico-Datei exportiert werden muss um überhaupt angezeigt werden zu können. Dafür benutzt man am besten das Programm IconShop herunter. Hier mal eine kleine Anleitung:
- 16×16 Pixel großes Logo mit z.b. Photoshop oder Paint erstellen
- Bild abspeichern als .bmp (speichert es zur Sicherheit auch als .gif ab, bei mir kann IconShop nur .gif Bilder anzeigen und exportieren
- Öffnet IconShop und ladet eure gespeicherte .bmp (oder .gif) Datei in das Programm.
- Dann über “File” -> “Export as” -> “Icon” die Datei als .ico exportieren
- Das Favicon ins richtige Verzeichnis auf dem Webspace legen
- In den Header eurer Website folgende Zeile einfügen und anpassen:
<link rel="shortcut icon" href="http://name-der-website.de/images/favicon.ico" /> - Hinweis: Es kann vorkommen das das Favicon nicht direkt nach dem Einbinden angezeigt wird, dann muss man seine eigene Website einfach mal in die Bookmarks aufnehmen, danach sollte es dann angezeigt werden.
Wer keine Lust hat sich das Programm herunterzuladen kann sein Favicon online erstellen, besucht dazu favicon.co.uk
Verwandte Artikel
- Branding – harmonisches Webdesign zwischen Corporate Identity und Corporate Design
- Die Bildung einer Corporate Identity für die eigene Website
- Bildkomposition nutzen für Corporate Identity
- Bildkomposition nutzen für Corporate Identity
- Runde Ecken ohne Grafiken in Css erstellen
5 Kommentare
Tut mir leid, die Kommentarfunktion für diesen Beitrag ist geschlossen.
Kann nur vvv.favicon.ru empfehlen – einfach und unkompliziert.
Ja, sieht gut aus!
Kleiner Hinweis: Rechts oben kann man die Sprache auf englisch umstellen.
Gibt auch für Photoshop ein freies Plugin, dass .ico als Export ermöglicht, leider habe ich den Link gerade nicht parat.
Geht auch schnell und simpel unter http://www.favicon-maker.de
Favinator ist ein deutsches Tool wo auch Favicons erstellt werden können. Gibt sogar umfassende Tipps zum einbinden für alle die Probleme damit einem Favicon haben. http://www.favinator.de/whatis.php
Grüße Sylvia