Disclaimer: sono l'autore di RealFaviconGenerator, che mi aspetto sia aggiornato (principalmente, vedi sotto). Quindi non sorprenderti se questa risposta corrisponde a ciò che genera RFG.
Il mito della taglia unica
Non esiste un'icona "taglia unica". Non puoi creare una singola icona SVG e aspettarti che funzioni ovunque.
Da un punto di vista tecnico, una singola icona SVG sarebbe una buona cosa. Ma da un punto di vista dell'interfaccia utente e dell'esperienza utente, questo non è un risultato desiderabile. Confronta iOS e Android. Su iOS, tutte le icone della schermata iniziale sono quadrati con angoli arrotondati ( iOS riempie le aree trasparenti delle icone Touch con il nero ). Su Android, le icone della schermata iniziale utilizzano spesso forme e trasparenze non quadrate (comprese le icone delle app Google). Invia un'icona a tocco singolo e Android Chrome la utilizzerà. Ma non sarai in grado di abbinare le linee guida per le icone di Android , mentre un'icona dedicata potrebbe.
Quindi consiglio di evitare deliberatamente di utilizzare una singola icona. Scegli come target ogni piattaforma individualmente, quando possibile (non è sempre così).
Icone, piattaforma per piattaforma
iOS Safari
iOS Safari prevede un'icona tattile . Ad oggi, questa è un'immagine PNG 180x180. Questa immagine non dovrebbe utilizzare la trasparenza e i suoi angoli verranno automaticamente arrotondati quando aggiunta alla schermata principale. Dichiarato con:
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
Nel corso degli anni questa icona è diventata l '"icona ad alta risoluzione predefinita" per molti browser. Quindi lo troverai altrove, quando aggiungi al segnalibro, ecc.
Android Chrome
Android Chrome si basa sul manifesto dell'app Web . Sebbene questo manifest non sia dedicato ad Android Chrome, è attualmente il suo principale sostenitore. Quindi, al momento, è ancora abbastanza sicuro considerare le icone del manifest della Web App per Android Chrome.
Come suggerisce il nome, il manifesto dell'app Web è per le app Web. Ma qualsiasi sito web può usarlo come un modo per fare riferimento ad alcune icone.
Android si aspetta un'icona PNG 192x192, trasparenza consentita e incoraggiata.
Il manifest è dichiarato con:
<link rel="manifest" href="/icons/site.webmanifest">
Edge e IE 12
Microsoft ha introdotto il browserconfig , un documento XML che elenca varie icone che si adattano all'interfaccia utente Metro.
Il file e il colore di sfondo sono dichiarati con:
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
Browser desktop classici
Windows / macOS Chrome, Windows / macOS Firefox, Safari, IE ... Questo è dove le cose sono un po 'più sfocate. Storicamente, c'era un singolo favicon.icofile, ancora supportato. Tuttavia, i browser più recenti scelgono piuttosto le icone PNG, che sono più leggere. Inoltre, alcuni browser non sono in grado di selezionare l'icona corretta nel file ICO (questo formato può incorporare diverse versioni di un'icona), causando un utilizzo errato di un'icona a bassa risoluzione.
Si potrebbe essere tentati di abbandonare del favicon.icotutto il vecchio . Nonostante mi piacerebbe fare questo salto in RFG, non ho eseguito i test necessari per valutare l'impatto sui vecchi browser.
Quindi la combinazione che consiglio ancora oggi, con l' favicon.icoincorporamento di icone 16x16, 32x32 e 48x48:
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">
Altri browser
Altri browser potrebbero avere icone dedicate. Ad esempio, Coast by Opera sta cercando un'icona 228x228 . La necessità di concentrarsi su questi browser non è ovvia. Di solito usano l'icona touch o altre icone quando non riescono a trovare la "loro" icona.
Conclusione
Come annunciato all'inizio, questo è esattamente ciò che RealFaviconGenerator crea.