Favicon selbst erstellen

Favicon für die eigene Homepage erstellen

Wer kennt nicht die Icons der großen Seiten die in der Favoritenliste auftauchen nachdem sie gebookmarkt wurden, auch Smartphones und Tablets arbeiten heute fast ausschließlich mit den kleinen hübschen Bildchen.

So ein Favicon in die eigene Homepage einzubinden ist einfacher als man denkt. Nachdem man ein hübsches Logo entworfen hat, speichert man das ganze einfach als .ico oder .png mit der Auflösung 16×16 oder 32×32 im Rootverzeichnis der eigenen Seite ab. Der Filename muss dabei favicon.ico oder favicon.png lauten.

Favicon selbst erstellen
Favicon selbst erstellen

Etwas schwieriger wird es da bei Apple Touch Icons. Um die unterschiedlichen Geräte zu unterstützen muss das Icon in x verschiedenen Auflösungen abespeichert werden. Als Kompromiss kann die Auflösung 144×144 verwendet werden, diese kann von allen Apple sowie Android Geräten verwendet werden.

Um ein Apple Touch Icon in die eigene Homepage einzubinden, muss das Logo mit der Auflösung 144×144 als apple-touch-icon-precomposed.png im Root Verzeichnis der eigenen Homepage abgelegt werden und der Eintrag

<link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png"/>

in den Headerbereich der Homepage eingetragen werden.

Genauere Informationen zu den verschiedenen Formaten und Auflösungen findet ihr unter http://favicons.info/ Hier findet ihr auch einen Favicon Generator sowie einen Generator der Apple Touch Icons erstellen kann.

 

Ingo

Seit jeher Technik begeistert mit Hang zur Elektronik und IT. Fasziniert von neuen Technologien speziell im Bereich Automation und Web.

Schreibe einen Kommentar

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