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 16x16 oder 32x32 im Rootverzeichnis der eigenen Seite ab. Der Filename muss dabei favicon.ico oder favicon.png lauten.
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 144x144 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 144x144 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.
Neueste Kommentare