Vorrei usare una singola immagine sia come favicon normale sia come favicon compatibile con iPhone / iPad.
È possibile? Una bilancia PNG 72x72 compatibile con iPad se collegata a una favicon normale del browser? O devo usare un'immagine separata 16x16 o 32x32?
Risposte:
Per IE, Microsoft consiglia 16x16, 32x32 e 48x48 contenuti nel file favicon.ico .
Per iOS, Apple consiglia nomi e risoluzioni di file specifici , al massimo 180x180 per i dispositivi più recenti con iOS 8.
Android Chrome utilizza principalmente un manifest e si affida anche all'icona touch di Apple.
IE 10 su Windows 8.0 richiede immagini PNG e un colore di sfondo e IE 11 su Windows 8.1 e 10 accetta diverse immagini PNG dichiarate in un file XML dedicato chiamatobrowserconfig.xml .
Safari per Mac OS X El Capitan introduce un'icona SVG per le schede appuntate .
Alcune altre piattaforme cercano file PNG con varie risoluzioni, come l' immagine 96x96 per Google TV o l' immagine 228x228 per Opera Coast .
Guarda questo elenco di foto di favicon per un riferimento completo.
TLDR: questo generatore favicon può generare tutti questi file contemporaneamente. Il generatore può anche essere implementato come plugin per WordPress . Divulgazione completa: sono l'autore di questo sito.
Non vedo alcuna informazione aggiornata elencata qui, quindi ecco qui:
Per rispondere a questa domanda ora, 2 favicon non lo faranno se vuoi che la tua icona sia fantastica ovunque. Vedi le dimensioni qui sotto:
16 x 16 - Dimensioni standard per i browser
24 x 24 - Dimensioni del sito appuntate IE9 per l'interfaccia utente
32 x 32 - Scheda IE nuova pagina, pulsante barra delle applicazioni di Windows 7+, barra laterale Elenco lettura Safari
48 x 48 - Sito Windows
57 x 57 - iPod touch , iPhone fino a 3G
60 x 60 - iPhone touch fino a iOS7
64 x 64 - Sito Windows, barra laterale Safari Reader List in HiDPI / Retina
70 x 70 - Win 8.1 Metro tile
72 x 72 - iPad touch fino a iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - Retina touch per iPhone fino a iOS6
120 x 120 - Retina touch per iPhone iOS7
128 x 128 - App Chrome Web Store, Android
144 x 144 - Piastrella Metro IE10 per sito appuntato, Retina iPad fino a iOS6
150 x 150 - Vinci la tessera Metro 8.1
152 x 152 - iPad retina touch iOS7
196 x 196 - Android Chrome
310 x 150 - Vinci tessera Metro 8.1 larga
310 x 310 - Vinci tessera Metro 8.1
Non sono sicuro se / come i browser ridimensionano icone grandi, ma il W3C suggerisce quanto segue 1 :
Il formato per l'immagine che hai scelto deve essere 16x16 pixel o 32x32 pixel, usando colori a 8 o 24 bit. Il formato dell'immagine deve essere uno di PNG (uno standard W3C), GIF o ICO.
1 w3c.org: come aggiungere un Favicon al tuo sito (bozza in sviluppo) .
[current year]ho ancora bisogno di affrontare alcune limitazioni di cazzate quando le cose che puoi fare con il solo CSS sono abbastanza sorprendenti e ho quasi perso la tua risposta. Userò solo quello che voglio allora e se qualcosa non lo supporta, è il loro problema, come da standard.
In realtà, per far funzionare correttamente la tua favicon in tutti i browser, dovrai aggiungere più di 10 file nelle dimensioni e nei formati corretti.
Io e il mio amico abbiamo creato un'app proprio per questo! lo puoi trovare in faviconit.com
Lo abbiamo fatto, quindi le persone non devono creare tutte queste immagini e i tag corretti a mano, crearli tutti per infastidirmi molto!
È possibile avere più dimensioni delle icone nello stesso file. Di solito creo favicon ( .icofile) che sono 48, 32 e 16 pixel. Puoi aggiungere qualsiasi dimensione dell'immagine che desideri. La domanda è: l'iPhone utilizzerà un icofile?
icosupporta anche la trasparenza, ma non sono sicuro che si tratti di un canale alfa come PNG; probabilmente più come GIF dove è acceso o spento.
.icofile.
Secondo l' articolo di Wikipedia su Favicon, Internet Explorer supporta solo il formato ICO per le favicon.
Vorrei rimanere con due icone diverse.
La favicon non deve essere 16x16 o 32x32. Puoi creare una favicon che è 80x80 o 100x100, assicurati solo che entrambi i valori abbiano le stesse dimensioni e, ovviamente, non renderlo troppo grande o troppo piccolo, scegli una dimensione ragionevole.
Avrai bisogno di file separati per ogni risoluzione che temo. C'è un ottimo articolo sul monitor della campagna che descrive come hanno creato e implementato le loro icone anche per ogni dispositivo iOS:
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
Come ho appreso, nessuna di queste diverse soluzioni è perfetta. L'uso di un generatore favicon è davvero una buona soluzione, ma il loro numero è travolgente ed è difficile da scegliere. Mi piace aggiungere che se vuoi che il tuo sito web sia abilitato per PWA, devi fornire anche un'icona 512x512 come dichiarato da Google Devs :
icone tra cui una versione 192px e una 512px
Non ho incontrato molti generatori di favicon che applicano questi criteri ( Firebase fa , ma ci sono molte cose che non fanno). Quindi la soluzione deve essere un mix di molte altre soluzioni.
Non so, oggi all'inizio del 2020 se fornire un 16x16, 32x32 ancora rilevante. Immagino sia ancora importante in alcuni contesti come, ad esempio, se i tuoi utenti utilizzano ancora IE per qualche motivo (ciò accade ancora in alcune società private che non migrano a un browser più recente per alcuni motivi)