favicon.png vs favicon.ico – perché dovrei usare PNG invece di ICO?

Oltre al fatto che PNG è un formato di immagine più comune, c’è qualche motivo tecnico per favorire favicon.png vs favicon.ico?

Sto supportando i browser moderni che supportano tutte le icone preferite di PNG.

Risposta sostituita (e triggersta Community Wiki) a causa di numerosi aggiornamenti e note di vari altri in questo thread:

  • Entrambi ICO e PNG consentono entrambi la trasparenza basata su canale alfa completo
  • ICO consente la retrocompatibilità con i browser più vecchi (ad es. IE6)
  • Probabilmente PNG offre un più ampio supporto per la trasparenza degli strumenti, ma puoi trovare strumenti per creare anche ICO alfa-channel, come lo strumento Dynamic Drive e il plugin Photoshop menzionati da @mercator.

Sentiti libero di consultare le altre risposte qui per maggiori dettagli.

Tutti i browser moderni (testati con Chrome 4, Firefox 3.5, IE8, Opera 10 e Safari 4) richiedono sempre un favicon.ico meno che tu non abbia specificato un’icona di collegamento tramite . Quindi, se non ne specifichi esplicitamente uno, è meglio avere sempre un file favicon.ico , per evitare un 404. Yahoo! ti suggerisce di renderlo piccolo e memorabile nella cache.

E non devi neanche fare un PNG solo per la trasparenza alfa. I file ICO supportano la trasparenza alfa in modo ottimale (ad esempio il colore a 32 bit), anche se quasi nessuno strumento consente di crearli. Uso regolarmente il generatore FavIcon di Dynamic Drive per creare file favicon.ico con trasparenza alfa. È l’unico strumento online che conosco che possa farlo.

C’è anche un plug-in Photoshop gratuito che può crearli.

I file .png sono carini, ma i file .ico offrono anche trasparenza alfa-channel, in più ti danno la retrocompatibilità.

Dai un’occhiata al tipo di StackOverflow ad esempio (nota che è trasparente):

   

Il thingy apple-itouch è per gli utenti di iPhone che creano un collegamento a un sito web.

Il vantaggio teorico dei file * .ico è che sono contenitori che possono contenere più di un’icona. Ad esempio, è ansible memorizzare un’immagine con canale alfa e una versione a 16 colors per i sistemi legacy, oppure aggiungere icone 32×32 e 48×48 (che dovrebbero essere sollevate durante il trascinamento di un collegamento in Esplora risorse di Windows).

Questa buona idea, tuttavia, tende a scontrarsi con le implementazioni del browser.

Il PNG ha 2 vantaggi: ha dimensioni più piccole ed è più ampiamente utilizzato e supportato (tranne nel caso delle favicon). Come accennato prima ICO, può avere più icone di dimensione, che è utile per le applicazioni desktop, ma non troppo per i siti web. Ti consiglierei di mettere un favicon.ico nella radice della tua applicazione. Se hai accesso al Capo delle pagine del tuo sito web, usa il tag per puntare a un file png. Quindi il browser più vecchio mostrerà favicon.ico e quelli più recenti il ​​png.

Per creare file Png e Icon, consiglierei The Gimp .

Alcuni strumenti social come Google+ utilizzano un metodo semplice per ottenere un favicon per i link esterni, recuperando http://your.domainname.com/favicon.ico

Poiché non eseguono il precaricamento del contenuto HTML, il tag non funzionerà. In questo caso, potresti voler utilizzare una regola mod_rewrite o semplicemente posizionare il file nella posizione predefinita.

Un ico può essere un png.

Più precisamente, puoi memorizzare uno o più png all’interno di questo formato contenitore minimo, invece della solita bitmap + alpha che tutti associano con ico.

Il supporto è obsoleto, appare in Windows Vista (2007) ed è ben supportato dai browser, sebbene non necessariamente dal software di modifica delle icone.

Qualsiasi png valido (intere incluse le intestazioni) può essere preceduto da un’intestazione ico da 6 byte e una directory di immagini da 16 byte.
GIMP ha il supporto nativo. Esportare semplicemente come ico e spuntare “Compresso (PNG)”.

Evitare PNG in ogni caso se si desidera una compatibilità IE6 affidabile.