Vai al contenuto

Favicon

Da Wikipedia, l'enciclopedia libera.
La favicon di Wikipedia

Favicon (in inglese: ['fæv.ɪˌkɒn], in italiano: ['faviˌkɔn]) è un termine inglese, contrazione di favorite icon. In informatica indica un'icona associata a una particolare pagina web. Solitamente la favicon è una piccola immagine, spesso un logo, pertinente ai contenuti del sito web correlato. La favicon viene visualizzata alla sinistra dell'URL nella barra degli indirizzi di un browser, nel momento in cui si naviga su un sito che ne è provvisto. L'icona è inoltre visualizzata nel menu dei preferiti di un browser. Nata come funzionalità di Microsoft Internet Explorer versione 5, in seguito è stata integrata su molti altri browser, tra cui Firefox, Opera, Safari, Chrome e Konqueror[1][2][3].

Storia

[modifica | modifica wikitesto]
Favicon di Google
Favicon di Google

A marzo del 1999, la Microsoft pubblicò Internet Explorer 5, che introdusse le favicon per la prima volta.[4] Inizialmente le favicon erano file di computer chiamati favicon.ico messe all'interno della cartella radice di un sito web. Era usato nella sezione link "Preferiti" di Internet Explorer e compariva vicino all'indirizzo URL della barra degli indirizzi se la pagina era salvata in "Preferiti".[5][6][7][4] Un inconveniente per la privacy era che il numero di visitatori che avevano aggiunto l'indirizzo a "Preferiti" poteva essere stimato dalle richieste di scaricamento del file favicon dal server. Questo inconveniente non è più presente, dal momento che tutti i browser odierni caricano il file favicon per mostrarlo nella barra degli indirizzi indipendentemente dal fatto che il sito sia stato aggiunto ai "Preferiti".[6]

Standardizzazione

[modifica | modifica wikitesto]

Il formato favicon è stato standardizzato dal World Wide Web Consortium (W3C) nelle specifiche HTML 4.01, pubblicate a dicembre del 1999, e successivamente nelle specifiche XHTML 1.0 pubblicate a gennaio del 2000.[8][9] Lo standard prevede un "elemento di tipo link" con un "attributo Rel" nel tag HEAD del documento per la definizione del formato, del nome e del percorso del favicon. Diversamente dallo schema precedente, il file può essere in una cartella di un sito web esterno e avere un formato file immagine.[10][11]

Nel 2003 il formato .ico è stato registrato con la Internet Assigned Numbers Authority (IANA) sotto il tipo MIME.[12][13] Ciononostante, quando si usa il formato .ico per mostrare immagini, Internet Explorer non può mostrare file forniti con quel tipo MIME standard.[13] Una soluzione per Internet Explorer potrebbe essere quella di associare l'estensione .ico al tipo MIME non standard image/x-icon nella configurazione dei server web.[14]

Google ha iniziato ad inserire le favicon dei siti web nei suoi risultati di ricerca[15].

Utilizzo

[modifica | modifica wikitesto]

Per aggiungere la favicon ad una pagina web è disponibile un apposito tag HTML per specificare la posizione dell'file all'interno del server web. Il tag viene posto nella sezione head di un file HTML con sintassi:

<link rel="icon" href="http://[percorso]/favicon.ico" />

In questo modo ogni immagine delle giuste dimensioni (16×16 o 32×32 ma anche 48×48 pixel, se .ico) può essere usata come favicon; alternativamente al formato .ico possono essere usati anche i formati .gif e .png di qualsiasi dimensione. Inoltre sfruttando le potenzialità del formato .gif è possibile creare delle favicon animate, anche se sono supportate solo da alcuni browser.

Per usare i formati GIF o PNG i tag rispettivamente necessari sono:

<link rel="icon" href="http://[percorso]/favicon.gif" type="image/gif" />

oppure:

<link rel="icon" href="http://[percorso]/favicon.png" type="image/png" />

Se si carica una favicon per la prima volta, oppure si sostituisce una precedente, per visualizzarla nel browser può essere necessario cancellare la cache, non essendo a volte sufficiente ricaricare la pagina.

Supporto dei tipi di favicon

[modifica | modifica wikitesto]
Browser Supporto nativo
ICO PNG GIF GIF animato JPEG APNG SVG
Google Chrome Sì Sì Da 4.0 Da 4.0 Da 4.0 No Da 80.0
Internet Explorer

(deprecato)

Da 5.0 Da 11.0 Da 11.0 No No No No
Microsoft Edge Sì Sì Sì No Sì No Sì
Mozilla Firefox Da 1.0 Da 1.0 Da 1.0 Sì Sì Da 3.0 Almeno da 30.0[16]
Opera Da 7.0 Da 7.0 Da 7.0 Da 7.0 Da 7.0 Da 9.5 Da 44.0
Safari Sì Da 4.0 Da 4.0 No Da 4.0 No No

Raccomandazione HTML5 per le icone in più dimensioni

[modifica | modifica wikitesto]

L'attuale specifica HTML5 consiglia di specificare più dimensioni per le icone, utilizzando gli attributi rel="icon" sizes="elenco separato da spazi delle dimensioni dell'icona"all'interno di un tag <link>[17]. È possibile fornire più formati di icone, inclusi formati "contenitore" come i file Microsoft .ico e Macintosh .icns, nonché file di grafica vettoriale scalabile includendo il tipo di contenuto dell'icona nel formato type="file content-type"all'interno del tag<link>.

A partire da iOS 5, i dispositivi mobili Apple ignorano la raccomandazione HTML5 e utilizzano invece il metodo proprietarioapple-touch-icon. Il browser web Google Chrome, tuttavia, selezionerà la dimensione corrispondente più vicina da quelle fornite nelle intestazioni HTML per creare icone di applicazioni di 128×128 pixel, quando l'utente sceglie Crea collegamenti all'applicazione... dal menu "Strumenti".

Icone della schermata iniziale sui dispositivi mobili

[modifica | modifica wikitesto]

Su iPhone e iPad Apple, così come sui dispositivi mobili Android, gli utenti possono aggiungere pagine web in formato icona come scorciatoie (anziché ogni volta digitale l'indirizzo sul browser) alla loro schermata iniziale. Queste icone di collegamento sono simili alle normali app e gli sviluppatori web possono fornire icone dedicate ai collegamenti su schermo in modo che l'utente non le confonda con le app installate sul proprio dispositivo e capisca subito di quale collegamento si tratta.

Dispositivi Apple

[modifica | modifica wikitesto]

Per i dispositivi Apple con il sistema operativo iOS versione 1.1.3 o successiva, gli utenti possono aggiungere un sito Web alla schermata iniziale utilizzando il pulsante Aggiungi alla schermata iniziale all'interno del comando "condividi" in Safari[18][19].

Funziona per qualsiasi sito web. Ma affinché iOS visualizzi il collegamento con un'icona, un sito Web deve fornire un <link rel="apple-touch-icon" ...>nella sezione <head>dei documenti serviti dal sito Web. Se l'icona personalizzata non viene fornita, nella schermata iniziale verrà invece inserita una miniatura della pagina Web[20].

Le dimensioni dell'icona dell'app nelle diverse classi di dispositivi sono diverse. Le dimensioni consigliate per le icone sono 152x152 per iPad (fino all'iPad 2, uscito nel 2011), 167x167 per iPad con schermi Retina (iPad 3 e successivi) e 180x180 per iPhone. Se non viene fornita alcuna icona della dimensione corrispondente, iOS sceglierà l'icona più grande rel="apple-touch-icon"e la ridimensionerà automaticamente[21].

Codice di esempio[22]
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">

<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">

Il file icona a cui fa riferimento apple-touch-iconviene modificato per aggiungere angoli arrotondati. Nelle versioni iOS precedenti a iOS 7, venivano aggiunti un'ombra esterna e una lucentezza riflettente e con apple-touch-icon-precomposedpotrebbe essere fornita un'icona per indicare ai dispositivi di non applicare una lucentezza riflettente sull'immagine[19][20].

Neanche i browser o i dispositivi mobili richiedono HTML per recuperare queste icone[20]. La radice del sito Web è la posizione predefinita per il file apple-touch-icon.png(in ordine di priorità)[19][20].

Dispositivi Android

[modifica | modifica wikitesto]

Sui dispositivi Android, gli utenti possono utilizzare la funzione Aggiungi alla schermata iniziale nel menu degli strumenti di Chrome per aggiungere una pagina Web alla schermata iniziale.

Funziona anche per qualsiasi sito Web, ma se non viene fornita alcuna favicon, viene utilizzata un'icona generica. Poiché le icone delle app Android hanno una dimensione di 48x48 punti, il sito web dovrebbe fornire le favicon con dimensioni multiple di 48x48 pixel. Per i moderni dispositivi ad alta risoluzione, Google consiglia di fornire icone in 192x192 pixel[23].

Codice di esempio[22]
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">

<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">

Android supporta anche i file Web Manifest, che consentono di integrare i siti Web in modo più approfondito con il sistema. Un Web Manifest è un file JSON che specifica i metadati per un'app Web progressiva. Consente allo sviluppatore di fornire non solo le icone, ma anche un nome breve da visualizzare sulla schermata iniziale e i colori del tema[24]. Tuttavia, non è necessario fornire un file manifest affinché il comando Aggiungi alla schermata iniziale funzioni[22].

Favicon animate

[modifica | modifica wikitesto]

Vari browser come Chrome, Firefox e Opera supportano l'animazione delle favicon. Dal 2001 è stata aperta una segnalazione di bug per Firefox che richiede un modo per disabilitare questa funzione[25][26].

Limitazioni e critiche

[modifica | modifica wikitesto]
Una favicon a forma di lucchetto verde può portare l'utente a credere che sia un messaggio del browser di connessione sicura
Una favicon a forma di lucchetto verde può portare l'utente a credere che sia un messaggio del browser di connessione sicura

La favicon può portare a tempi lenti di caricamento della pagina ed errori 404[6].

Il W3C non ha standardizzato l'attributo rel, quindi ci sono altre parole chiave come shortcut icon che sono accettate anche dallo user agent[11][27].

Le favicon vengono spesso manipolate nell'ambito di attacchi di phishing o intercettazioni contro le pagine Web HTTPS. Molti browser Web visualizzano le favicon vicino ad aree dell'interfaccia utente del browser Web, come la barra degli indirizzi, che vengono utilizzate per comunicare se la connessione a un sito Web utilizza un protocollo sicuro come TLS. Modificando la favicon rendendola un'immagine familiare come un lucchetto, un utente malintenzionato può tentare di indurre l'utente a pensare di essere connesso in modo sicuro al sito Web visualizzato. Gli strumenti di attacco man-in-the-middle automatizzati come SSLStrip utilizzano questo trucco[28]. Per eliminare questo, alcuni browser Web come Firefox o Google Chrome visualizzano la favicon all'interno della scheda mentre mostrano lo stato di sicurezza del protocollo utilizzato per accedere al sito Web accanto all'URL[29].

Poiché le favicon si trovano solitamente alla radice della directory del sito sul server, possono essere utilizzate con una certa affidabilità per rivelare se un client Web è connesso a un determinato servizio. Funziona sfruttando la funzionalità di reindirizzamento dopo il login di molti siti Web, richiedendo la favicon in un URL di reindirizzamento dopo il login e testando la risposta del server per discernere se all'utente viene fornita la risorsa richiesta (il che significa che l'utente è loggato al servizio), o invece reindirizzato alla pagina di login (il che significa che non è loggato al servizio)[30].

Nel 2021 i ricercatori dell'Università dell'Illinois hanno dimostrato un metodo per il monitoraggio del browser utilizzando le favicon[31].

CMS

[modifica | modifica wikitesto]

Il malware favicon crea file.icoche contengono codice PHP dannoso, andandosi a sostituire alla favicon originale del CMS. Questo codice è noto per eseguire azioni pericolose sui siti Web come URL injection, creazione di account "amministratore" in WordPress e Drupal, installazione di spyware e trojan, creazione di pagine di phishing. Inquina anche il server con file di spam e il codice dannoso viene aggiunto a index.php e ad altri file PHP che includono il file.ico[32].

Attacchi di skimming (in cui l'hacker inietta codice dannoso in un sito Web ed estrae i dati da un modulo che l'utente ha compilato) hanno già incorporato favicon dannose e avuto un impatto negativo su aziende note come Tupperware, Smith & Wesson, Macy's e British Airways[33].

Le favicon possono essere sfruttate anche per creare attacchi omografici[33].

Note

[modifica | modifica wikitesto]
  1. ^ Dave Lane, Creating a Multi-Resolution Favicon Including Transparency with the GIMP, su Egressive.com, 9 agosto 2008. URL consultato il 25 febbraio 2011 (archiviato dall'url originale il 25 dicembre 2010).
  2. ^ What's With Google's New Mini Icon?, BBC, 20 gennaio 2009. URL consultato il 25 febbraio 2011.
    «That 16x16 pixel square is the size of the favicon in question, if not the scope.»
  3. ^ Jennifer Apple, Favicon — How To Create A Favicon.ico, su photoshopsupport.com. URL consultato il 25 febbraio 2011.
  4. ^ a b How to Add a Shortcut Icon to a Web Page, in Microsoft Developer Network, Microsoft. URL consultato il 15 marzo 2010.
  5. ^ Darin McGrew, Web Authoring FAQ – 8.11. How can I have a custom icon when people bookmark my site?, su htmlhelp.com, 26 aprile 2007. URL consultato il 23 febbraio 2011.
  6. ^ a b c Christopher Heng, What is Favicon.ico? Personalise Your Site's Bookmarks, su thesitewizard.com, 7 settembre 2008. URL consultato il 23 febbraio 2011.
  7. ^ Creating favicons with Adobe Photoshop and GoLive, su golivein24.com, Adobe GoLive. URL consultato il 25 febbraio 2011 (archiviato dall'url originale il 7 dicembre 2003).
  8. ^ HTML 4.01 Specification, su w3.org, World Wide Web Consortium, 24 dicembre 1999. URL consultato il 14 marzo 2011.
  9. ^ XHTML™ 1.0: The Extensible HyperText Markup Language, su w3.org, World Wide Web Consortium, 26 gennaio 2000. URL consultato il 14 marzo 2011.
  10. ^ Karl Dubost, Web site meta data profile: favicon, ..., su w3.org, World Wide Web Consortium, ottobre 2005. URL consultato il 23 febbraio 2011.
  11. ^ a b Karl Dubost, How to Add a Favicon to your Site, su w3.org, World Wide Web Consortium, 24 ottobre 2005. URL consultato il 25 febbraio 2011.
  12. ^ Simon Butcher, Published specification, su iana.org, Internet Assigned Numbers Authority, 3 settembre 2003. URL consultato il 25 febbraio 2011.
  13. ^ a b IE9 RC Minor Changes List, su IEInternals. URL consultato il 7 aprile 2016.
  14. ^ Paul Irish, commit 37b5fec090d00f38de64 to paulirish's html5-boilerplate, su github.com, GitHub, 15 dicembre 2010. URL consultato il 25 febbraio 2011.
  15. ^ (EN) Julie Mamula, Favicons Now in Google Search Results | Sanctuary, su Sanctuary - A Digital Marketing Group, 2 marzo 2020. URL consultato il 7 settembre 2021.
  16. ^ Verificato con Firefox 30.0 su Ubuntu 14.04.
  17. ^ HTML Living Standard, Section 4.6.6.6 'Link type "icon"', su html.spec.whatwg.org, WHATWG. URL consultato il 17 novembre 2015.
  18. ^ iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips, su developer.apple.com, Apple Inc.. URL consultato il 27 maggio 2010.
  19. ^ a b c Safari Web Content Guide: Specifying a Webpage Icon for Web Clip, su developer.apple.com, Apple Inc., 15 novembre 2010. URL consultato il 25 febbraio 2011.
  20. ^ a b c d Drew McLellan, How To Set an Apple Touch Icon for Any Site, su allinthehead.com, Allinthe head.com, 17 gennaio 2008. URL consultato l'11 marzo 2011.
  21. ^ Configuring Web Applications, su developer.apple.com. URL consultato il 3 luglio 2021.
  22. ^ a b c (EN) How to add a favicon to your website — The modern browser guide, su Loqbooq Blog. URL consultato il 3 luglio 2021.
  23. ^ (EN) Material Design, su Material Design. URL consultato il 3 luglio 2021.
  24. ^ (EN) Add to Home screen - Progressive web apps (PWAs) | MDN, su developer.mozilla.org. URL consultato il 3 luglio 2021.
  25. ^ Bug 111373 - don't allow animated site icons (favicons), su bugzilla.mozilla.org, 21 novembre 2001.
  26. ^ Firefox Bug 111373 - don't allow animated site icons (mozilla.org), su news.ycombinator.com, Hacker News, 7 luglio 2015.
  27. ^ Jeff Davis, why doesn't the favicon for my site appear in IE7?, in jeffdav on code, Microsoft, 27 dicembre 2007. URL consultato l'11 marzo 2013.
  28. ^ Moxie Marlinspike, Defeating Ssl Using Sslstrip (Marlinspike Blackhat), in (see description of video), SecurityTube, 21 febbraio 2011. URL consultato il 9 luglio 2011 (archiviato dall'url originale il 13 luglio 2011).
  29. ^ Firefox version 14 features, su arstechnica.com. URL consultato il 18 luglio 2012.
  30. ^ Robin Linus, Your Social Media Fingerprint, su robinlinus.github.io. URL consultato il 14 ottobre 2016.
  31. ^ (EN) Dan Goodin, New browser-tracking hack works even when you flush caches or go incognito, su Ars Technica, 19 febbraio 2021. URL consultato il 21 febbraio 2021.
  32. ^ (EN) Favicon (.ico) Virus Backdoor in WordPress, Drupal, su Astra Website Security. URL consultato il 7 settembre 2021.
  33. ^ a b (EN) Hackers abuse lookalike domains and favicons for credit card theft, su BleepingComputer. URL consultato il 7 settembre 2021.

Altri progetti

[modifica | modifica wikitesto]

Collegamenti esterni

[modifica | modifica wikitesto]
  Portale Internet: accedi alle voci di Wikipedia che trattano di internet
Estratto da "https://it.wikipedia.org/w/index.php?title=Favicon&oldid=141585575"