favicon.png vs favicon.ico - Perché dovrei usare PNG invece di ICO?

Question

A parte il fatto che PNG è un formato immagine più comune, v'è alcuna ragione tecnica per favorire favicon.png vs favicon.ico?

Sto sostenendo i browser moderni che tutto il supporto PNG icone preferite.

Answer 1

Risposta sostituito (e trasformato Community Wiki) a causa di numerosi aggiornamenti e note di vari altri in questa discussione:

• OIC e PNG entrambi consentono la trasparenza basata canale full alpha
• ICO consente la compatibilità per i vecchi browser (ad esempio IE6)
• PNG ha probabilmente il supporto più ampio utensili per la trasparenza, ma si possono trovare strumenti per creare canale alfa OIC così come il strumento Dynamic drive e Photoshop plugin menzionato da @mercator.

Non esitate a consultare le altre risposte qui per maggiori dettagli.

Answer 2

Tutti i browser moderni (testato con Chrome 4, Firefox 3.5, IE8, Opera 10 e Safari 4) saranno sempre richiedere un favicon.ico a meno che non si è specificato un'icona di collegamento via <link>. Quindi, se non si specifica in modo esplicito uno, è meglio avere sempre un file favicon.ico, per evitare una 404. Yahoo! suggerisce si rendono piccola e memorizzabile nella cache.

E non c'è bisogno di andare per un PNG solo per la trasparenza alpha sia. file ICO trasparenza supporto alpha bene (ad esempio colori a 32 bit), anche se quasi nessuno strumenti consentono di creare loro. Ho regolarmente uso Generator FavIcon Dynamic drive per creare file favicon.ico con trasparenza alfa. E 'l'unico strumento online che conosco che può farlo.

C'è anche un Photoshop plug-in che può creare loro.

Answer 3

I file .png sono belle, ma .ico file forniscono la trasparenza canale alfa, anche, più ti danno la compatibilità all'indietro.

Date un'occhiata a quale tipo StackOverflow utilizza per esempio (si noti che è trasparente):

<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"> 
<link rel="apple-touch-icon" href="http://sstatic.net/so/apple-touch-icon.png"> 

Il thingy mela-iTouch è per gli utenti di iPhone che fanno un collegamento a un sito web.

Answer 4

Il vantaggio teorico di file * .ico è che sono contenitori che può contenere più di un'icona. Si potrebbe per esempio memorizzare un'immagine con canale alfa e una versione a 16 colori per i sistemi legacy, o si potrebbe aggiungere 32x32 e 48x48 icone (che dovrebbe quando si trascina un collegamento a Windows Explorer).

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

Answer 5

PNG ha 2 vantaggi: ha dimensioni più piccole ed è più ampiamente usato e sostenuto (tranne nel caso in cui favicon). Come accennato prima ICO, può avere più icone di format, che è utile per le applicazioni desktop, ma non troppo per i siti web. Ti consiglierei di mettere un favicon.ico nella root della vostra applicazione. Un se si ha accesso al capo tue pagine web utilizzare il tag per puntare a un file PNG. Così il browser più vecchio mostrerà la favicon.ico e quelli più recenti del png.

Per creare i file di icone PNG e consiglio The Gimp .

Answer 6

Alcuni strumenti sociali come Google+ utilizzano un metodo semplice per ottenere una favicon per i collegamenti esterni, il recupero http://your.domainname.com/favicon.ico

Dal momento che non Prefetch il contenuto HTML, il tag <link> non funzionerà. In questo caso, si potrebbe desiderare di utilizzare una regola mod_rewrite o semplicemente posizionare il file nella posizione predefinita.

Answer 7

Un ico possono essere di un PNG.

Più precisamente, è possibile memorizzare una o più png all'interno di questo formato contenitore minima, invece del solito bitmap + alfa che si associa fortemente con Ico.

Il supporto è vecchio, appare in Windows Vista ( 2007) ed è ben supportato dai browser, anche se non necessariamente da software di editing icona.

Qualunque png valido (intera intestazione compresa) può precedere da un 6 byte dell'intestazione ico e directory delle immagini di 16 byte.
GIMP ha il supporto nativo. Semplicemente esportare come Ico e spuntare "compresso (PNG)".

Answer 8

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