Guida

Guida apple-touch-icon

Quando un utente aggiunge il tuo sito alla home screen iOS, Safari usa l'apple-touch-icon — non favicon.ico. Pubblica un PNG 180×180 (o un quadrato più grande che si ridimensioni bene) e collegalo nel <head>.

Check favicons on any website

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

Install Chrome Extension

Apple non applica maschere sulle web clip di iOS moderno come fa con le app native, ma l'icona dovrebbe comunque essere quadrata con margini di sicurezza — mantieni il logo rientrato del ~10 % perché gli angoli arrotondati non taglino mai la grafica.

Usa <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. Un unico file 180×180 copre tutti gli iPhone attuali; le voci opzionali 152×152 e 167×167 migliorano la resa sugli iPad meno recenti.

Come funziona

  1. 1

    Esporta un PNG 180×180

    Dal nostro generatore favicon o da un ridimensionatore di immagini.

  2. 2

    Caricalo nella root del sito

    /apple-touch-icon.png accanto a favicon.ico.

  3. 3

    Aggiungi il tag link

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

Provalo ora

Genera apple-touch-icon

Generatore di Favicon

FAQ

Qual è la dimensione di apple-touch-icon?+

180×180 pixel per gli iPhone attuali. Esporta da un master 512×512 o 1024×1024.

PNG o ICO per iOS?+

Solo PNG. iOS ignora i file .ico per le icone della home screen.

Serve comunque favicon.ico?+

Sì — schede e altri browser usano ancora .ico. L'apple-touch-icon si aggiunge a quello.

Strumenti correlati

Altre guide

Guide