FAQ sulle favicon
Una favicon dovrebbe essere trasparente?
Assegna alla scheda del browser favicon uno sfondo trasparente in modo che si trovino su strisce di schede chiare e scure. Mantieni opache l'icona touch di Apple e le icone mascherabili, perché quelle piattaforme riempiono o ritagliano lo spazio vuoto per te.
La trasparenza aiuta nelle schede del browser
I browser dipingono la tabstrip con il colore del tema dell'utente e quel colore cambia tra la modalità chiara e quella scura. Uno sfondo trasparente lascia il tuo segno su qualunque cosa disegna il browser. Un quadrato bianco inserito nell'opera d'arte appare come un blocco luminoso su una scheda scura.
ICO, PNG e SVG portano tutti un canale alfa, quindi possono memorizzare la trasparenza per pixel. JPEG non può, e questo è uno dei motivi per cui costituisce una fonte favicon debole. Vedere è un favicon un PNG o JPEG per il confronto dei formati. Se la tua grafica originale ha uno sfondo trasparente, il file Generatore di favicon lo mantiene nei file PNG e ICO esportati.
Dove ogni icona ha bisogno di uno sfondo
| Icona | Trasparente? | Motivo |
|---|---|---|
favicon.ico e scheda PNG | SÌ | Si adatta alle linguette chiare e scure |
| SVG favicon | SÌ | Stesso posizionamento delle schede, disegnato a qualsiasi dimensione |
apple-touch-icon | NO | iOS rende i pixel trasparenti come neri |
| Icona manifest mascherabile | NO | I lanciatori lo ritagliano a forma di piattaforma |
Mantieni opaca l'icona touch di Apple
L'icona della schermata iniziale di Apple è l'eccezione più chiara. iOS combina aree trasparenti con aree nere, quindi un logo trasparente può apparire sulla schermata principale come un riquadro scuro. Esporta invece un PNG 180x180 con uno sfondo pieno.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />Apple documenta le regole delle icone in Configurazione di applicazioni Web. IL Generatore di icone touch Apple ti consente di scegliere il colore di sfondo e scaricare il file appiattito.
Le icone mascherabili necessitano di uno sfondo al vivo
I launcher Android ritagliano le icone mascherabili in cerchi, scoiattoli e altre forme. Riempi l'intera tela con un colore di sfondo e mantieni il logo all'interno della zona sicura, con il cerchio centrato che copre l'80% della larghezza. Qualunque cosa al di fuori di quel cerchio può essere tagliata.
Puoi comunque spedire un'icona manifest trasparente con purpose: "any" accanto a quello mascherato. MDN copre entrambi i valori nel file riferimento alle icone manifest, e il generatore di icone mascherabili mostra l'area sicura mentre posizioni il disegno.
Controlla il contrasto su entrambi i temi
La trasparenza sposta il problema del contrasto nel browser. Un segno quasi nero svanisce su una striscia di linguetta scura, mentre un segno pallido svanisce su una striscia chiara. Scegli colori che resistano a entrambi o metti una piccola forma arrotondata dietro il logo in modo che abbia il suo contrasto.
Si applicano alcuni browser prefers-color-scheme regole all'interno di un SVG favicon, sebbene il supporto vari, quindi tratta un SVG sensibile al tema come un aggiornamento piuttosto che come una correzione. Visualizza in anteprima l'icona sulle schede chiare e scure con Anteprima favicon, quindi conferma cosa serve un sito live con il file Controllo favicon.
Pronto a creare la tua favicon?
Genera i file comuni e uno snippet HTML pronto da incollare.