Strumenti › Design

Studio per favicon e icone di app

Trasforma un logo in favicon.ico, apple-touch-icon, icone Android adattive e maskable, un set AppIcon per iOS e site.webmanifest.

Cosa contiene

favicon.ico (16, 32, 48), favicon PNG, apple-touch-icon, icone Android Chrome e maskable, site.webmanifest, un set AppIcon iOS per Xcode, mipmap Android con icona adattiva e questo snippet HTML:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#F39A3D">

Come funziona

  1. Il tuo logo viene disegnato su un canvas in ogni dimensione, con zone sicure per le icone maskable e adattive.
  2. favicon.ico contiene PNG da 16, 32 e 48 px, letti da tutti i browser attuali.

Domande

Quale immagine di partenza funziona meglio?

Un SVG, oppure un PNG quadrato di almeno 512×512 con un po’ di spazio vuoto attorno al logo.