Wikipedia

Favicon

icona associata a una particolare pagina web

Favicon(in inglese:['fæv.ɪˌkɒn],in italiano:['faviˌkɔn]) è un termine inglese, contrazione difavorite icon.Ininformaticaindica un'icona associata a una particolarepagina web.Solitamente la favicon è una piccola immagine, spesso un logo, pertinente ai contenuti delsito webcorrelato. La favicon viene visualizzata alla sinistra dell'URLnellabarra degli indirizzidi unbrowser,nel momento in cui si naviga su un sito che ne è provvisto. L'icona è inoltre visualizzata nel menu deipreferitidi un browser. Nata come funzionalità diMicrosoftInternet Explorerversione 5, in seguito è stata integrata su molti altri browser, tra cuiFirefox,Opera,Safari,ChromeeKonqueror[1][2][3].

La favicon diWikipedia

Storia

modifica
Favicon di Google

A marzo del 1999, laMicrosoftpubblicòInternet Explorer 5,che introdusse le favicon per la prima volta.[4]Inizialmente le favicon erano file di computer chiamatifavicon.icomesse all'interno della cartella radice di un sito web. Era usato nella sezione link "Preferiti" diInternet Explorere compariva vicino all'indirizzo URL della barra degli indirizzi se la pagina era salvata in "Preferiti".[5][6][7][4]Un inconveniente per laprivacyera 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

Il formato favicon è stato standardizzato dalWorld Wide Web Consortium(W3C) nelle specificheHTML4.01, pubblicate a dicembre del 1999, e successivamente nelle specificheXHTML1.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 unformato fileimmagine.[10][11]

Nel 2003 il formato.ico è stato registrato con laInternet 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 standardimage/x-iconnella configurazione dei server web.[14]

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

Utilizzo

modifica

Per aggiungere la favicon ad una pagina web è disponibile un appositotagHTMLper specificare la posizione dell'fileall'interno delserver web.Il tag viene posto nella sezioneheaddi un file HTML con sintassi:

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

In questo modo ogni immagine delle giuste dimensioni (16×16 o 32×32 ma anche 48×48pixel,se.ico) può essere usata come favicon; alternativamente al formato.icopossono essere usati anche i formati.gife.pngdi 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:

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

oppure:

<linkrel="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 lacache,non essendo a volte sufficiente ricaricare la pagina.

Supporto dei tipi di favicon

modifica
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

L'attuale specificaHTML5consiglia di specificare più dimensioni per le icone, utilizzando gli attributirel= "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 fileMicrosoft.ico eMacintosh.icns, nonché file digrafica vettorialescalabile includendo il tipo di contenuto dell'icona nel formatotype= "file content-type"all'interno del tag<link>.

A partire daiOS 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 sceglieCrea collegamenti all'applicazione...dal menu "Strumenti".

Icone della schermata iniziale sui dispositivi mobili

modifica

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 sulbrowser) 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

Per i dispositivi Apple con il sistema operativo iOS versione 1.1.3 o successiva, gli utenti possonoaggiungereun sito Web alla schermata iniziale utilizzando il pulsanteAggiungi alla schermata inizialeall'interno del comando "condividi"inSafari[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 unaminiaturadella pagina Web[20].

Le dimensioni dell'icona dell'app nelle diverse classi di dispositivi sono diverse. Le dimensioni consigliate per le icone sono 152x152 periPad(fino all'iPad 2, uscito nel 2011), 167x167 per iPad con schermiRetina(iPad 3 e successivi) e 180x180 periPhone.Se non viene fornita alcuna icona della dimensione corrispondente, iOS sceglierà l'icona più granderel= "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 riferimentoapple-touch-iconviene modificato per aggiungere angoli arrotondati. Nelle versioni iOS precedenti aiOS 7,venivano aggiunti un'ombra esterna e una lucentezza riflettente e conapple-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 fileapple-touch-icon.png(in ordine di priorità)[19][20].

Dispositivi Android

modifica

Sui dispositiviAndroid,gli utenti possono utilizzare la funzioneAggiungi alla schermata inizialenel 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 fileJSONche specifica imetadatiper 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 comandoAggiungi alla schermata inizialefunzioni[22].

Favicon animate

modifica

Vari browser come Chrome,Firefoxe 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
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 ederrori 404[6].

IlW3Cnon ha standardizzato l'attributo rel, quindi ci sono altre parole chiave comeshortcut iconche sono accettate anche dallouser agent[11][27].

Le favicon vengono spesso manipolate nell'ambito di attacchi diphishingo intercettazioni contro le pagine WebHTTPS.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 comeTLS.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 attaccoman-in-the-middleautomatizzati 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 delladirectorydel sito sulserver,possono essere utilizzate con una certa affidabilità per rivelare se unclientWeb è connesso a un determinato servizio. Funziona sfruttando la funzionalità direindirizzamentodopo illogindi 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'Illinoishanno dimostrato un metodo per il monitoraggio del browser utilizzando le favicon[31].

CMS

modifica

Ilmalwarefavicon crea file.icoche contengono codicePHPdannoso, 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" inWordPresseDrupal,installazione dispywareetrojan,creazione di pagine diphishing.Inquina anche il server con file dispame il codice dannoso viene aggiunto aindex.phpe 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 unmoduloche l'utente ha compilato) hanno già incorporato favicon dannose e avuto un impatto negativo su aziende note comeTupperware,Smith & Wesson,Macy'seBritish Airways[33].

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

Note

modifica
  1. ^Dave Lane,Creating a Multi-Resolution Favicon Including Transparency with the GIMP,suEgressive,9 agosto 2008.URL consultato il 25 febbraio 2011(archiviato dall'url originaleil 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,suphotoshopsupport.URL consultato il 25 febbraio 2011.
  4. ^abHow to Add a Shortcut Icon to a Web Page,inMicrosoft 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?,suhtmlhelp,26 aprile 2007.URL consultato il 23 febbraio 2011.
  6. ^abcChristopher Heng,What is Favicon.ico? Personalise Your Site's Bookmarks,suthesitewizard,7 settembre 2008.URL consultato il 23 febbraio 2011.
  7. ^Creating favicons with Adobe Photoshop and GoLive,sugolivein24,Adobe GoLive.URL consultato il 25 febbraio 2011(archiviato dall'url originaleil 7 dicembre 2003).
  8. ^HTML 4.01 Specification,suw3.org,World Wide Web Consortium, 24 dicembre 1999.URL consultato il 14 marzo 2011.
  9. ^XHTML™ 1.0: The Extensible HyperText Markup Language,suw3.org,World Wide Web Consortium, 26 gennaio 2000.URL consultato il 14 marzo 2011.
  10. ^Karl Dubost,Web site meta data profile: favicon,...,suw3.org,World Wide Web Consortium, ottobre 2005.URL consultato il 23 febbraio 2011.
  11. ^abKarl Dubost,How to Add a Favicon to your Site,suw3.org,World Wide Web Consortium, 24 ottobre 2005.URL consultato il 25 febbraio 2011.
  12. ^Simon Butcher,Published specification,suiana.org,Internet Assigned Numbers Authority, 3 settembre 2003.URL consultato il 25 febbraio 2011.
  13. ^abIE9 RC Minor Changes List,suIEInternals.URL consultato il 7 aprile 2016.
  14. ^Paul Irish,commit 37b5fec090d00f38de64 to paulirish's html5-boilerplate,sugithub,GitHub,15 dicembre 2010.URL consultato il 25 febbraio 2011.
  15. ^(EN) Julie Mamula,Favicons Now in Google Search Results | Sanctuary,suSanctuary - 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" ',suhtml.spec.whatwg.org,WHATWG.URL consultato il 17 novembre 2015.
  18. ^iPhone Human Interface Guidelines for Web Applications: Metrics, Layout Guidelines, and Tips,sudeveloper.apple,Apple Inc..URL consultato il 27 maggio 2010.
  19. ^abcSafari Web Content Guide: Specifying a Webpage Icon for Web Clip,sudeveloper.apple,Apple Inc., 15 novembre 2010.URL consultato il 25 febbraio 2011.
  20. ^abcdDrew McLellan,How To Set an Apple Touch Icon for Any Site,suallinthehead,Allinthe head, 17 gennaio 2008.URL consultato l'11 marzo 2011.
  21. ^Configuring Web Applications,sudeveloper.apple.URL consultato il 3 luglio 2021.
  22. ^abc(EN)How to add a favicon to your website — The modern browser guide,suLoqbooq Blog.URL consultato il 3 luglio 2021.
  23. ^(EN)Material Design,suMaterial Design.URL consultato il 3 luglio 2021.
  24. ^(EN)Add to Home screen - Progressive web apps (PWAs) | MDN,sudeveloper.mozilla.org.URL consultato il 3 luglio 2021.
  25. ^Bug 111373 - don't allow animated site icons (favicons),subugzilla.mozilla.org,21 novembre 2001.
  26. ^Firefox Bug 111373 - don't allow animated site icons (mozilla.org),sunews.ycombinator,Hacker News, 7 luglio 2015.
  27. ^Jeff Davis,why doesn't the favicon for my site appear in IE7?,injeffdav 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 originaleil 13 luglio 2011).
  29. ^Firefox version 14 features,suarstechnica.URL consultato il 18 luglio 2012.
  30. ^Robin Linus,Your Social Media Fingerprint,surobinlinus.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,suArs Technica,19 febbraio 2021.URL consultato il 21 febbraio 2021.
  32. ^(EN)Favicon (.ico) Virus Backdoor in WordPress, Drupal,suAstra Website Security.URL consultato il 7 settembre 2021.
  33. ^ab(EN)Hackers abuse lookalike domains and favicons for credit card theft,suBleepingComputer.URL consultato il 7 settembre 2021.

Altri progetti

modifica

Collegamenti esterni

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