Handleiding

Apple-touch-icon-gids

Wanneer iemand je site toevoegt aan het iOS-homescreen, gebruikt Safari het apple-touch-icon — niet favicon.ico. Lever een 180×180 PNG (of een groter vierkant dat netjes verkleint) en link het in je <head>.

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

Apple past op moderne iOS geen masking toe op web clips zoals bij native apps, maar je icoon moet wél vierkant zijn met veilige marges — houd logo's circa 10 % ingesprongen zodat afgeronde hoeken nooit artwork afsnijden.

Gebruik <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. Eén bestand van 180×180 dekt alle huidige iPhones; optionele 152×152- en 167×167-vermeldingen helpen bij oudere iPad-layouts.

Hoe het werkt

  1. 1

    Exporteer een 180×180 PNG

    Via onze favicon-generator of image-resizer.

  2. 2

    Upload naar de site-root

    /apple-touch-icon.png naast favicon.ico.

  3. 3

    Voeg de link-tag toe

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> in <head>.

Probeer het nu

Genereer apple-touch-icon

Favicon-generator

Veelgestelde vragen

Welke maat is apple-touch-icon?+

180×180 pixels voor huidige iPhones. Exporteer vanuit een master van 512×512 of 1024×1024.

PNG of ICO voor iOS?+

Uitsluitend PNG. iOS negeert .ico voor homescreen-iconen.

Heb ik favicon.ico nog steeds nodig?+

Ja — tabs en andere browsers gebruiken nog steeds .ico. Apple-touch-icon is een aanvulling.

Gerelateerde tools

Meer handleidingen

Handleidingen