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

442

A parte il fatto che PNG è un formato di immagine più comune, c'è qualche motivo tecnico per favorire favicon.png rispetto a favicon.ico?

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

png favicon ico

— Jon Galloway
fonte

233

Risposta sostituita (e trasformata in Wiki comunità) a causa di numerosi aggiornamenti e note di vari altri in questo thread:

ICO e PNG consentono entrambi la trasparenza basata sul canale alfa completo
ICO consente la retrocompatibilità con i browser meno recenti (ad es. IE6)
PNG probabilmente ha un più ampio supporto degli strumenti per la trasparenza, ma puoi trovare strumenti per creare anche ICO a canale alfa, come lo strumento Dynamic Drive e il plug-in Photoshop menzionato da @mercator.

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

— ambra
fonte

78

L'ICO consente anche il canale alfa

— Álvaro González,

58

-1 ICO supporta risoluzioni multiple incluso il canale alfa completo. A proposito, l'alfa a 1 bit è conosciuta come "trasparenza". L'unico limite reale che ICO ha avuto era con icone più grandi o uguali a 256 di lunghezza (qualsiasi direzione), sebbene sia stato superato più volte.

— Christian,

26

-1 .ico consente anche la risoluzione multipla in un file (16x16 e 32x32 per esempio). Quindi le icone restano belle quando si crea un collegamento su un desktop.

— gagarine,

4

La maggior parte dei browser preferisce il favicon.ico nella radice rispetto a quello collegato. Con la tua soluzione, la maggior parte dei browser sceglierebbe il .ico non trasparente invece del png collegato.

— Lode,

@lode perché sceglierebbe in particolare un ico non trasparente anziché un ico trasparente?

— Rob Grant,

367

Tutti i browser moderni (testati con Chrome 4, Firefox 3.5, IE8, Opera 10 e Safari 4) richiederanno sempre un a favicon.icomeno che non sia stata specificata un'icona di collegamento tramite <link>. Quindi se non lo specifichi esplicitamente, è meglio avere sempre un favicon.icofile, per evitare un 404. Yahoo! ti suggerisce di renderlo piccolo e memorizzabile nella cache.

E non devi nemmeno scegliere un PNG solo per la trasparenza alfa. I file ICO supportano bene la trasparenza alfa (cioè il colore a 32 bit), anche se quasi nessuno strumento ti consente di crearli. Uso regolarmente il generatore FavIcon di Dynamic Drive per creare favicon.icofile con trasparenza alfa. È l'unico strumento online che conosco che può farlo.

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

— Mercator
fonte

6

Ottimo suggerimento per questo strumento Dynamic Drive! Aggiunto istantaneamente ai segnalibri. Grazie!

— Marcos Buarque,

3

per quanto riguarda gli strumenti, è in gran parte falso; ci sono diversi strumenti per la progettazione di icone. Ne ho scritto uno io stesso in passato.

— Christian,

4

Per quelli che non hanno $ 650 dollari per Photoshop, puoi usare pixlr.com (gratuitamente) per creare, modificare e salvare file .png con livelli e trasparenza completi :)

— Scott B

3

@Pacerier È incredibilmente difficile ottenere il .icomontaggio su PS. E anche se lo fai, il risultato finale è davvero pessimo, penseresti che .bmpfosse un formato migliore (aggiunge un sacco di metadati rendendo il re-editing un enorme problema).

— Christian,

4

@mikevoermans: è ancora letto come un PNG; la maggior parte dei browser moderni non si preoccupa così tanto delle estensioni dei file. A proposito, questa è la risposta migliore e dovrebbe essere quella accettata.

— rvighne,

48

I file .png sono belli, ma i file .ico offrono anche trasparenza al canale alfa, oltre a garantire la retrocompatibilità.

Dai un'occhiata al tipo di StackOverflow utilizzato ad esempio (nota 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">

La cosa Apple-Itouch è per gli utenti di iPhone che effettuano un collegamento a un sito Web.

— Wouter van Nifterick
fonte

16

PNG può anche fornire un canale alfa

— Álvaro González,

10

sì, il mio punto era che ico's può fare tutto ciò che png può fare (trasparenza alfa) come favicon, e inoltre sono supportati da tutti i browser dall'anno 0.

— Wouter van Nifterick,

secondo Wikipedia Internet Explorer non supporterà una linea come questa: <link rel = "icon" type = "image / vnd.microsoft.icon" href = " example.com/image.ico " />

— frankster

2

È probabile che il sito Web non supporti i browser dall'anno 0, quindi perché preoccuparsi? Prova a caricare un sito Web moderno in IE6 e vedi cosa succede;)

— Dominic

26

Il vantaggio teorico dei file * .ico è che sono contenitori che possono contenere più di un'icona. Ad esempio, è possibile memorizzare un'immagine con canale alfa e una versione a 16 colori per sistemi legacy, oppure è possibile aggiungere icone 32x32 e 48x48 (che verrebbero visualizzate quando si trascina un collegamento a Windows Explorer).

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

— Álvaro González
fonte

A questo proposito è il fatto che IE9 usa anche quelle grandi icone per pin per la barra delle applicazioni win7 vedere: stackoverflow.com/questions/3723715/...

— GazB

Uhm, teorico? La stessa icona fornita con Windows 7 può essere utilizzata in Windows 95 in modalità colore a 8 bit. Penso che sia abbastanza pratico, no?

— Christian,

Si prega di notare che questa risposta è stata scritta nel 2009. La scena del browser in quel momento era molto diversa da quella attuale.

— Álvaro González,

15

PNG ha 2 vantaggi: ha dimensioni ridotte ed è più ampiamente utilizzato e supportato (tranne nel caso delle favicon). Come accennato prima di ICO, può avere icone di dimensioni multiple, che sono utili 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 raccomanderei The Gimp .

— pmoleri
fonte

3

Non tanto per i siti Web? Aspetta che tutti inizino a usare display simili a retina; improvvisamente ci sarà un ottimo motivo per cui si potrebbe includere una dimensione 32x32 o superiore nella loro favicon ...

— Roman Starkov

1

Stiamo parlando di favicons, quindi il problema del supporto è in realtà l'opposto di quello che dici

— David Heffernan,

1

+1 Risolve la domanda originale e non si impantana in trasparenza. Cita anche un app che fa disposizione di sostegno .ico.

— kovacsbv,

12

Alcuni strumenti social come Google+ utilizzano un metodo semplice per ottenere una favicon per i collegamenti esterni, recuperando http://tuo.dominioname.com/favicon.ico

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

— jdavid.net
fonte

1

Non so se sia vero o falso, ma è stato l'argomento decisivo per me andare a creare favicon.ico in root oltre a png che ho.

— Alexei Tenitski,

2

Lo so dal lavoro su telly.com , -via Paul Lindner , che fa parte del team di Google Plus. plus.google.com/117259934788907243749/about

— jdavid.net

Posizionare la favicon nella radice è lo standard di fatto , quindi vorrei aderire ad essa per ragioni come menzionate in questa risposta.

— Stijn de Witt,

8

Un ico può essere un png.

Più precisamente, è possibile memorizzare uno o più png all'interno di questo formato contenitore minimo, invece della solita bitmap + alpha che tutti associano fortemente a ico.

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

Qualsiasi png valido (intero compreso l'intestazione) può essere anteposto da un'intestazione ico a 6 byte e da una directory di immagini a 16 byte.
GIMP ha il supporto nativo. Esporta semplicemente come ico e spunta "Compressed (PNG)".

— Adria
fonte

3

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

— aehlke
fonte

19

Non c'è motivo per cui non sia possibile utilizzare entrambi: un ico nella struttura di directory per IE6 e un PNG specificato tramite un <link>codice nella pagina per i browser moderni.

— Ambra

10

Perché dovresti usare entrambi? Se hai intenzione di preoccuparti di creare un ico, quali benefici avrebbe anche usare un png? Sicuramente è solo un lavoro extra e un codice extra.

— Mr_Chimp,

@Mr_Chimp perché png è uno standard aperto e più lungimirante? È un'ulteriore linea di markup.

— Wyatt8740,

9

Ciao @Orcra - Penso che non lo troveresti così divertente se avessi letto questo ~ 8 anni fa quando ho scritto questa risposta e ho dovuto considerare cose come IE6 :) StackOverflow consente di modificare le risposte, quindi sentiti libero di aggiornarlo tu stesso qualcosa di rilevante oggi

— aehlke

3

@aehike hai ragione, mio male per non aver controllato il timestamp.

— Orcra,

0

Per quello che vale, faccio questo:

    <!-- Favicon - Generic -->
    <link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
    <link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
    <link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
    <link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
    <link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
    <link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
    <link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
    <!-- Favicon - Android -->
    <link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
    <!-- Favicon - iOS -->
    <link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">

E tengo ancora il root favicon.ico.

— S3C
fonte