Le seguenti tabelle illustrano il supporto di varie funzionalità con i principali browser web. Se non indicato, i numeri di versione indicano il numero di versione iniziale di una funzione supportata.
Formato file supportEdit
La seguente tabella illustra il supporto per il formato file immagine per la favicon.
- ^ Safari, dalla versione 12.0, supporta favicon SVG monocolore in alcuni casi in un formato non standard
mask-icon
.,
Inoltre, tali file di icone possono essere 16×16, 32×32, 48×48, o 64×64 pixel di dimensione, e 8-bit, 24-bit, o 32-bit di profondità di colore. L’articolo sul formato file ICO spiega i dettagli per le icone con più di 256 colori su varie piattaforme Microsoft Windows.
Utilizzo di faviconEdit
Questa tabella illustra le diverse aree del browser in cui è possibile visualizzare le favicon.
Il software Opera ha aggiunto la possibilità di modificare la favicon nella selezione rapida in Opera 10.,
Come usareedit
Questa tabella illustra i diversi modi in cui la favicon può essere riconosciuta dal browser web. L’implementazione standard utilizza un elemento di collegamento con un attributorel
nella sezione<head>
del documento per specificare il formato, il nome e la posizione dei file.
- ^ Firefox accetta solo
favicon.ico
nella root del sito, senza un<link>
tag se l’impostazionebrowser.chrome.site_icons
è impostato sutrue
nelabout:config
., Il valore predefinito ètrue
. Se impostato sufalse
, queste favicon vengono ignorate. - ^ Opera carica
/favicon.ico
solo seMultimedia/Always load favicon
l’opzione inopera:config
è impostata su1
. Vedere la pagina di supporto Opera per maggiori dettagli.
Se sono presenti collegamenti per le favicon PNG e ICO, i browser compatibili con PNG-favicon selezionano il formato e la dimensione da utilizzare come segue. Firefox e Safari useranno la favicon che arriva ultima., Chrome per Mac utilizzerà qualsiasi favicon è formattato ICO, altrimenti il 32×32 favicon. Chrome per Windows utilizzerà la favicon che viene prima se è 16×16, altrimenti l’ICO. Se nessuna delle opzioni di cui sopra sono disponibili, entrambi i Chromes utilizzerà qualsiasi favicon viene prima, esattamente l’opposto di Firefox e Safari. In effetti, Chrome per Mac ignorerà la favicon 16×16 e utilizzerà la versione 32×32, solo per ridurla a 16×16 su dispositivi non retina. Opera sceglierà da una qualsiasi delle icone disponibili completamente a caso.,
Solo SeaMonkey non recupera i filefavicon.ico
nella radice del sito Web per impostazione predefinita.
Device supportEdit
Per i dispositivi Apple con sistema operativo iOS versione 1.1.3 o successiva, così come alcuni dispositivi Android, è possibile fornire un’icona personalizzata che gli utenti possono visualizzare sulle loro schermate iniziali utilizzando il pulsante Aggiungi alla schermata iniziale all’interno del foglio di condivisione in Safari., Questa funzione è abilitata fornendo un <link rel="apple-touch-icon" ...>
nella sezione <head>
dei documenti serviti dal sito web. Se l’icona personalizzata non viene fornito, una miniatura della pagina web sarà messo sulla schermata iniziale, invece.
La dimensione di base consigliata per questa icona è 152×152 pixel.
Per l’iPad, la dimensione di base è 180×180 pixel. Le tavolette Android preferiscono un’icona PNG 192×192.
Il file icona a cui fa riferimento apple-touch-icon
viene modificato per aggiungere angoli arrotondati., Nelle versioni iOS precedenti a iOS 7, verrà aggiunta un’ombra esterna e una lucentezza riflettente e potrebbe essere fornita l’iconaapple-touch-icon-precomposed
per istruire i dispositivi a non applicare lucentezza riflettente sull’immagine.
Con angoli arrotondati, aggiunto da iOS
<link rel="apple-touch-icon" href="https://example.com/image.png">
Nessun HTML è richiesto dai browser o dai dispositivi mobili per recuperare queste icone. La radice del sito web è la posizione predefinita per il file apple-touch-icon.png
(in ordine di priorità).,
Raccomandazione HTML5 per icone in più dimensionimodifica
La specifica HTML5 corrente consiglia di specificare più dimensioni per le icone, utilizzando gli attributirel="icon" sizes="space-separated list of icon dimensions"
all’interno di un tag<link>
. Formati di icone multiple, inclusi i formati contenitore come Microsoft .ico e Macintosh .i file icns e la grafica vettoriale scalabile possono essere forniti includendo il tipo di contenuto dell’icona nel formatotype="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
descritto sopra. Il browser Web di Google Chrome, tuttavia, selezionerà la dimensione corrispondente più vicina da quelle fornite nelle intestazioni HTML per creare icone delle applicazioni 128×128 pixel, quando l’utente sceglie i collegamenti alle applicazioni Create… dal menu” Strumenti”.
Favicon animatemodifica
Vari browser come Chrome, Firefox e Opera supportano l’animazione delle favicon., Una segnalazione di bug è stata aperta per Firefox dal 2001 che richiede un modo per disabilitare la funzione.
Lascia un commento