FavIcons auf dem Mac erzeugen und in WordPress einbinden

Favicon Icon

Ich beschreibe im Folgenden wie man Favicons auf dem Mac erstellt, testet und anschliessend in ein WordPress Theme einbinden kann. Ausserdem gehe ich auf einige Fallstricke ein über die ich gestolpert bin. Photoshop und XHTML Kenntnisse setze ich als gegeben voraus, ich werde bei Fragen in den Kommentaren soweit es mir möglich ist aber gerne helfen.

Was sind Favicons?

Favicon Safari

Favicons (Favoriten-Icons) sind die Icons, die im WebBrowser rechts neben der URL angezeigt werden, bzw. bei den Lesezeichen (Favoriten/Bookmarks). Leider handelt es sich hier nicht einfach um GIF-, JPG- oder PNG-Dateien sondern um “Standard” Windows Icons. Diese Bilddatei sollte eine Größe von 16×16 Pixeln haben.

Erstellen des Favicons

Auf dem Mac gibt es zwei Möglichkeiten, erstens mit Adobe Photoshop und einem Export Plugin und zweitens mit dem GraphicConverter. Als Photoshop Nutzer beschreibe ich hier nur den ersten Weg.

Favicon Photoshop Plugin

Zuersteinmal braucht man das “ICO (Windows Icon) Format” Plugin von Telegraphics, dieses ist frei erhältlich. Einfach für die eigene Photoshop Version herunterladen, die DMG-Datei öffnen und das Plugin in den “File Formats” Ordner von Photoshop kopieren, dieser liegt bei CS2 hier: “~/Programme/Adobe Photoshop CS2/Plug-Ins/File Formats” (Photoshop Neustart nicht vergessen).

Jetzt erstellt man im Photoshop eine neue Datei mit der Ausgangsgröße von 128×128 Pixeln. Hier designt man jetzt sein gewünschtes Icon. Durch die Ausgangsgröße von 128×128 Pixel wird die Icon-Qualität hinterher besser. Wenn man mit dem Entwurf soweit fertig ist, verkleiner man die Bildgröße (“Bicubic Sharpener” als Resample Funktion wählen) auf 16×16 Pixel.

Man muss das Icon jetzt nur noch im Format “ICO (Windows Icon)” unter dem Namen “favicon.ico” speichern (“Standard Icon” wählen).

Einbinden ins WordPress Theme

Das fertige Icon muss jetzt auf den WebServer hochgeladen werden, am besten direkt ins Hauptverzeichnis (z.B.”http://her.ein.de/favicon.ico“), der IE z.B. such an dieser Stelle automatisch nach der Datei (aufpassen das die Zugriffsrechte für das Icon richtig sind).

Damit das Icon auch von allen anderen Browsern gefunden und angezeigt wird, muss man es im Header der WebSite einbinden. In WordPress kann man hierzu im Adminbereich sein Theme editieren. Man muss vor dem </head> Tag folgendes einfügen:

<link rel="SHORTCUT ICON" href="/favicon.ico">
<link rel="icon" href="/favicon.ico" type="image/ico">

Damit sollte jetzt jeder Browser, vorausgesetzt er zeigt diese an, das Favicon anzeigen.

Stolperfallen

Firefox ohne Favicon Firefox mit Favicon Safari Icon Manager Favicon SafariStand

Beim Design einer WebSite kommt es ja durchaus vor, das man das Favicon auch mal ändert oder mit der ersten Version noch nicht ganz zufrieden ist, dabei gibt es ein Problem mit Safari. Safari speichert einmal geladene Favicons in einem Cache ab und aktualisiert diese dann nicht mehr, d.h. wenn man das Favicon ändert zeigt Safari immer noch das alte an. Mit dem Safari Icon Manager kann man die Icons im Cache aktualisieren, vorher sollte man Safari schließen. In den Einstellungen von SafariStand (ein sehr empfehlenswertes Safari Plugin) gibt es die Möglichkeit, den Favicon Cache komplett zu leeren (Kill All Favicons), so das Safari nach einem Neustart und erneutem Besuch der entsprechenden WebSite das aktuelle Favicon lädt.

Firefox zeigt mit dem Standardtheme auf dem Mac keine Favicons in der Bookmark-Toolbar an, mit dem Mac Favicon Theme zeigt Firefox auch auf dem Mac die Favicons an.

Nachsatz

Flattr thisWenn Ihnen dieser Artikel weitergeholfen hat, würde ich mich freuen wenn Sie meine Arbeit dadurch unterstützen, das Sie mich Flattrn oder bei Ihrem nächsten Einkauf im Apple Store oder bei Arktis über einen Link auf meiner Seite zu diesen WebShops gelangen. Der Einkauf wird für Sie dadurch nicht teurer, aber ich erhalte eine Provision auf Ihren getätigten Umsatz in den jeweiligen WebShops. Vielen Dank fürs Lesen!

7 Gedanken zu „FavIcons auf dem Mac erzeugen und in WordPress einbinden“

  1. Klingt ja eigentlich ganz einfach. Hab mir meinen Mac gerade erst neu gekauft und steh noch ein bisschen auf dem Schlauch. Danke für die Erklärung!

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>