Tipp der Woche 16.02.2023, 13:31 Uhr

iPhone: Das passende Icon für die Website

Ein spezielles Tag sorgt für das passende Icon einer Website.

(Quelle: dotnetpro)

Die Dinger heißen in der Internet-Welt favicon.ico oder favicon.png.. Die Bildchen verwendet der Browser, wenn er eine Website über ein Logo symbolisieren will - beispielsweise in den Tabs des Browsers.

In der HTML-Datei binden Sie so ein Bild über eine Zeile im Header der Seite ein:

<head>
<link rel="shortcut icon" type="image/png" href="myfavicon.png">
</head>

Wird diese Website dann als WebApp auf den Homescreen eines iPhones geladen, erscheint aber dieses Icon nicht. Vielmehr scheint iOS einen Screenshot der Website anzufertigen und diesen als Symbol zu verwenden. Wollen Sie auch hier bestimmen, welches Bild verwendet wird, müssen Sie im head-Bereich der Website einen weiteren Tag einbinden:

<head>
<link rel="shortcut icon" type="image/png" href="myfavicon.png">
<link rel="apple-touch-icon" type="image/png" href="myfavicon.png">
</head>

Dann klappt es auch mit dem Icon auf dem Homescreen von iOS.