Favicon Taglie e file ICO: cosa succede all'interno di una favicon.ico

La maggior parte dei consigli favicon è un elenco di una dozzina di dimensioni PNG copiate da un generatore che è stato scritto nel 2014 La maggior parte di quelle dimensioni non fa più nulla Ciò di cui un sito ha bisogno oggi è breve: uno favicon.ico per i browser e gli strumenti che ancora lo cercano, un'icona scalabile o ad alta risoluzione per tutto ciò che è moderno, e un'icona touch per i telefoni La parte che fa inciampare le persone è l'ico stesso, perché non è un'immagine con un'estensione dispari È un piccolo contenitore che contiene diverse immagini.

Questa guida copre come è costruito un file ICO, quali dimensioni appartengono all'interno di un favicon.ico e perché, quali altri file di icone un sito ha bisogno accanto ad esso, e gli errori che fanno sembrare un'icona morbida o illeggibile in una scheda del browser Si trova sotto il hub degli strumenti di immagine, e ogni dimensione indicata per il convertitore Toolz deriva dal suo codice sorgente.

tl; dr: Un file ICO è un contenitore: una breve directory seguita da diverse immagini quadrate, una per dimensione, da cui il browser o il sistema operativo sceglie la corrispondenza più vicina Per un favicon.ico, includere 16, 32 e 48 px, e aggiungere 256 px se lo stesso file raddoppia come un'icona di Windows Ogni voce può contenere al massimo 256 x 256 pixel Accanto ad essa, dichiarare un'icona SVG o PNG di grandi dimensioni e un 180 x 180 apple-touch-icon. la Convertitore da PNG a ICO scrive voci 16, 32, 48 e 256 px come PNG con trasparenza, lato client, nulla caricato, gratuito, nessuna iscrizione.

Che cosa è un file ICO?

Un file ICO è il formato dell'icona di Windows: un'intestazione, una directory che elenca ogni immagine all'interno e i dati dell'immagine per ogni voce Microsoft ha documentato il layout nella sua Articolo tecnico icone, ed è stato il formato per le icone dei programmi, delle scorciatoie e delle cartelle di Windows sin dalle prime versioni di Windows I browser lo hanno adottato per le favicon alla fine degli anni '90, motivo per cui il file sulla maggior parte dei siti web è ancora chiamato favicon.ico.

La directory è ciò che la rende diversa da un PNG o JPG Il software che necessita di un'icona a 16 pixel legge la directory, trova la voce più vicina a 16 e disegna quella Una scheda, un elenco di segnalibri, un pulsante della barra delle applicazioni e una scorciatoia da desktop possono acquisire ciascuno un'immagine diversa dallo stesso file. Ciò consente a un progettista di fornire un segno semplificato per le dimensioni minuscole e uno dettagliato per le dimensioni grandi, invece di lasciare che una singola immagine venga scalata ovunque.

Il formato va da due tipi di media Elenchi IANA image/vnd.microsoft.icon, mentre la maggior parte dei server e browser utilizza il vecchio image/x-icon. Entrambi lavorano per una favicon.

Come è strutturato un file ICO?

Un file ICO inizia con un'intestazione di 6 byte, seguita da una voce di directory di 16 byte per immagine, seguita dai dati dell'immagine Tutti i numeri sono little-endian.

ICONDIR (6 bytes)
  reserved      2 bytes   always 0
  type          2 bytes   1 = icon (2 = cursor)
  count         2 bytes   number of images

ICONDIRENTRY (16 bytes, repeated count times)
  width         1 byte    pixels; 0 means 256
  height        1 byte    pixels; 0 means 256
  colorCount    1 byte    palette size; 0 when there is no palette
  reserved      1 byte    0
  planes        2 bytes   1
  bitCount      2 bytes   bits per pixel, e.g. 32
  bytesInRes    4 bytes   size of this image's data
  imageOffset   4 bytes   where this image's data starts in the file

Image data (one block per entry)
  either a BMP-style DIB (without the file header)
  or a complete PNG file

Due dettagli in quel layout spiegano la maggior parte delle cose confuse sulle icone.

Il soffitto da 256 pixel proviene da un singolo byte. Larghezza e altezza sono memorizzate ciascuna in un byte, che può contenere da 0 a 255 Il formato riutilizza 0 per significare 256, e non c'è modo di esprimere qualcosa di più grande Una voce 512 x 512 non può esistere in un ICO valido, qualunque cosa un generatore affermi.

Le voci possono essere PNG. Le prime icone memorizzavano ogni immagine come una bitmap non compressa con una maschera di trasparenza separata a 1 bit. Da Windows Vista, una voce può invece contenere un file PNG completo, che è molto più piccolo di grandi dimensioni e trasporta un canale alfa corretto. Un'icona 256 x 256 memorizzata come bitmap a 32 bit non compressa è di circa 256 KB; la stessa immagine di PNG è solitamente una frazione di quello.

Il convertitore Toolz scrive la variante moderna Il suo costruttore ICO imposta il tipo 1, una voce di directory per dimensione con piani 1 e 32 bit per pixel, scrive 256 come 0 e memorizza ogni voce come PNG con il suo canale alfa Chiedendole una dimensione esterna da 1 a 256 viene rifiutato prima che venga scritto qualcosa, perché la directory non ha modo di registrarlo.

Che dimensione deve avere una favicon?

Un favicon.ico dovrebbe contenere immagini 16 x 16, 32 x 32 e 48 x 48, e un'immagine 256 x 256 se si desidera che il file funzioni anche come icona di Windows Oltre al.ico, i browser moderni preferiscono un SVG o un PNG di grandi dimensioni dichiarato con un tag di collegamento e i telefoni utilizzano un'icona touch separata.

Questa tabella mappa ogni dimensione al punto in cui viene utilizzata Il comportamento esatto varia con il browser, il sistema operativo e il ridimensionamento del display, quindi trattala come il caso comune:

Dimensione	Dove si presenta	Necessario in favicon.ico?
16x16	Schede browser, barra degli indirizzi, segnalibri su display standard	certo
32x32	Schede su display ad alta densità, barra delle applicazioni di Windows e scorciatoie	certo
48x48	Scorciatoie da desktop di Windows, visualizzazioni di icone medie; Ricerca Google consiglia di andare più grande di questo	certo
256x256	Visualizzazioni di icone grandi ed extra grandi di Windows	Solo se utilizzata come icona di Windows
180x180	Schermata iniziale di iPhone e iPad (apple-touch-icon)	No, PNG separato
192x192	Schermata iniziale di Android, manifesto dell'app Web	No, PNG separato
512x512	Manifesto, installazione e splash screen dell'app Web	No, non può stare in ICO
Qualsiasi (SVG)	Browser moderni che supportano le icone SVG, incluse le varianti in modalità oscura	No, SVG separato

Sui risultati di ricerca, Google's linee guida favicon chiedi un'icona quadrata e consiglia una più grande di 48 x 48 pixel, e Google la recupera dall'icona dichiarata sulla tua home page Un & ico che raggiunge i 16 pixel è un motivo comune per cui un'icona site' s appare sfocata accanto al risultato della ricerca.

Di quali file favicon ha bisogno un sito?

Un sito ha bisogno di tre file di icone e una voce manifest per coprire ogni browser e dispositivo mainstream. Più di questo sono quasi sempre gli avanzi.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Ogni linea ha un lavoro:

• favicon.ico è il ripiego. il Norma HTML WHATWG consente ai browser di richiedere /favicon.ico dalla radice del sito quando una pagina non dichiara alcuna icona, e i lettori RSS, i crawler e gli strumenti meno recenti lo fanno ancora Mantenere il file alla radice anche se si dichiarano altre icone.
• icon.svg è l'icona nitida per i browser che supportano le favicon SVG. Si adatta a qualsiasi densità e può includere un prefers-color-scheme query multimediale in modo che l'icona si adatti alle schede scure Non tutti i browser lo onorano, motivo per cui l'ico rimane.
• apple-touch-icon.png a 180 x 180 è ciò che iOS usa quando qualcuno aggiunge il tuo sito alla schermata iniziale Datelo uno sfondo opaco, dal momento che iOS non mantiene la trasparenza sulle icone della schermata iniziale.
• Le icone manifest al 192 e al 512 sono ciò che i browser basati su Android e Chromium utilizzano quando un sito viene installato come app, come descritto nel Manifesto dell'applicazione Web W3C.

la sizes attributo sul link .ico conta in un modo Quando un browser vede un SVG e un .ico di dimensioni, può dire che l'SVG è la scelta scalabile Alcune configurazioni utilizzano sizes="any" su ico invece, e alcune versioni di Chrome hanno risposto scegliendo & rsquo; su SVG. Una dimensione specifica evita che.

Perché la mia favicon sembra sfocata o sbagliata?

La maggior parte dei problemi favicon provengono dall'immagine sorgente, non dal formato L'ICO memorizza qualunque cosa venga data ad ogni dimensione, e il ridimensionamento può andare bene solo in una direzione.

Riassortimento	Causa	Fix
Ingresso morbido e chiazzato da 256 px	Fonte inferiore a 256 px, quindi è stata allungata	Inizia da un'esportazione 512 x 512 o superiore
Logo schiacciato o allungato	Fonte non quadrata allungata al quadrato	Ritaglia o pad in quadrato prima della conversione
Wordmark illeggibile nella scheda	Il testo disegnato a 16 px è alto due pixel	Usa il simbolo da solo per 16 e 32 px
Il contorno sottile scompare	Colpi sotto 1 px a piccole dimensioni	Aspessi i tratti in una variante di piccole dimensioni
Scatola bianca intorno all'icona	La fonte JPG non ha trasparenza	Usa un PNG con un canale alfa
La vecchia icona continua a essere mostrata	I browser memorizzano nella cache i favicon in modo aggressivo	Rinominare il file o aggiungere una stringa di query, quindi aggiornare in modo rigido
Nessuna icona nei risultati di Google	Icona sotto 48 px, bloccata da robots.txt, o meno nella home page	Servire un'icona più grande dalla home page e consentire la scansione

Vale la pena di precisare la prima riga, perché cattura anche i progettisti esperti Una sorgente da 64 px convertita con 256 spuntati produce una voce da 256 px che è l'immagine da 64 px ingrandita quattro volte È esattamente la voce ad alta densità di visualizzazioni di Windows e grandi scorciatoie mostrano Il downscaling da una grande fonte è la direzione che sembra buona.

La terza riga è una questione di aritmetica Un'icona 16 x 16 ha 256 pixel in totale Un marchio denominativo di cinque lettere compresso in quella larghezza ottiene circa tre pixel per lettera e l'anti-aliasing li trasforma in macchie grigie Quasi ogni sito noto utilizza una singola lettera o simbolo per la sua favicon per questo motivo.

Come faccio a fare un favicon.ico da un PNG?

Esporta un PNG quadrato di almeno 512 x 512 pixel con uno sfondo trasparente, convertilo in ICO con le dimensioni necessarie e controlla la voce 16 px a dimensioni reali prima di pubblicarlo.

Utilizzando il Convertitore da PNG a ICO su Toolz:

1. Lascia cadere il PNG. Molti possono entrare contemporaneamente; ognuno diventa il proprio ico.
2. Scegli le dimensioni delle icone Tutte e quattro le caselle, 16, 32, 48 e 256 px, sono spuntate per iniziare Per una favicon pura, spuntare 256 per rendere il file molto più leggero, poiché la voce 256 è la maggior parte del suo peso Se si spuntano tutte e quattro, il convertitore ricade sulla scrittura di tutte e quattro piuttosto che produrre un'icona vuota.
3. Premere Converti in ICO. Un quadrato 512 x 512 logo.png torna come logo.ico con la nota & quot; Contiene 16, 32, 48, 256 icone px."
4. Scarica il file o prendi un lotto come converted-ico.zip.

Il convertitore disegna la tua immagine su una tela ad ogni dimensione, codifica ogni quadrato come PNG e li racchiude prima più piccoli in un & ic, tutto lato client, quindi l'opera d'arte non lascia mai il dispositivo La trasparenza è mantenuta ad ogni dimensione Una fonte non quadrata è allungata per riempire ogni quadrato anziché ritagliata, e la nota dice così: lascia cadere un marchio 1024 x 256 e riporta che l'immagine era 1024x256 ed è stata allungata a quadrati delle dimensioni che hai scelto Quella nota è il tuo spunto per ritagliare o imbottire prima.

Per il miglior risultato a piccole dimensioni, fai due PNG: uno dettagliato per 48 e 256 px e un simbolo semplificato per 16 e 32 px Converti ciascuno con solo le sue dimensioni spuntate Il convertitore scrive una sorgente per file, quindi l'approccio a due immagini ti dà due file ico; usa quello semplificato come favicon.ico, poiché i browser scelgono principalmente le piccole voci e quella dettagliata per le icone delle applicazioni Windows o delle scorciatoie.

Posso fare un ICO da un JPG o da un SVG?

Sì ad entrambi, con un avvertimento per ciascuno.

Un JPG funziona, ma ogni voce dell'icona esce come un quadrato pieno senza trasparenza, perché JPEG non ha canale alfa e nessun convertitore può recuperarne uno. il Convertitore da JPG a ICO ricampiona la foto negli stessi quadrati da 16, 32, 48 e 256 px. Le foto perdono anche quasi tutti i dettagli a 16 px, quindi ritaglia strettamente attorno a un singolo soggetto ad alto contrasto e rendi il ritaglio quadrato prima della conversione. Una foto del telefono 4032 x 3024 convertita così com'è viene spremuta orizzontalmente e la nota te lo dice.

Un SVG è la migliore fonte possibile, dal momento che non ha una risoluzione fissa e rende nitido ad ogni dimensione di ingresso Il percorso dipende da quanto controllo si desidera Il Convertitore da SVG a PNG renderizza l'SVG in un PNG che puoi ispezionare e modificare per primo; qualsiasi SVG il cui lato più lungo è inferiore a 512 px viene disegnato a 512, quindi un SVG con icona 24 x 24 fornisce comunque una fonte pulita per la voce 256. Oppure lascia cadere l'SVG direttamente nel generale Convertitore di immagini, che accetta SVG, PNG, JPG e una dozzina di altri formati, e scegliere ICO come obiettivo per render e imballarlo in un unico passaggio.

Fonte	Trasparenza nell'ICO	Affilatura a 256 px	Miglior utilizzo
SVG	tenere	Sharp, reso da vettori	Loghi che hai in forma vettoriale
PNG 512 px o superiore	tenere	Aguzza	La maggior parte dei favicon
PNG inferiore a 256 px	tenere	Morbido a 256	Sgancia 256 o riesporta più grande
JPG	Nessuno, quadrato pieno	Dipende dalla dimensione della fonte	Solo icone basate su foto
Ico esistente	tenere	Ricostruito dalla voce decodifica il browser	Modifica delle dimensioni trasportate da un file

È possibile inserire nuovamente anche un & Ico esistente Il convertitore non tratta mai ICO in ICO come una ridenominazione; ricostruisce sempre il file alle dimensioni che si spuntano Questo è un modo rapido per ridurre una favicon gonfia a 16, 32 e 48, sebbene ricostruisca da una voce decodificata dal browser, quindi inizia dall'artwork originale se ce l'hai. SVG contro PNG copre il motivo per cui vale la pena conservare il master vettoriale esattamente per questo tipo di riesportazione.

Favicon.ico conta ancora nel 2026?

Sì, come fallback I browser attuali utilizzano le icone SVG o PNG che dichiari, ma la root /favicon.ico è ancora quello che alcuni browser, lettori di feed, strumenti di segnalibri e crawler recuperano quando non trovano alcuna dichiarazione o non supportano il tipo dichiarato Uno mancante riempie anche i log del server con 404s, poiché quelle richieste arrivano sia che il file esista o meno.

Ciò che non conta più è la lunga coda delle dimensioni legacy Separate le icone touch da 57, 60, 72, 76, 114, 120, 144 e 152 pixel datate dalle versioni iOS precedenti e sono coperte dal singolo file da 180 px Immagini delle tessere di Windows dichiarate tramite browserconfig.xml apparteneva a Windows 8 e 10 Start riquadri di schermata Nessuno dei due è necessario per un nuovo sito.

Ecco il pratico set minimo con le dimensioni dei file da aspettarsi:

File	Dimensione pixel	Peso tipico	richiesto?
favicon.ico con 16, 32, 48	16, 32, 48	Qualche KB	Sì, come ripiego
icon.svg	Scalabile	Sotto 2 KB per un semplice segno	raccomandato
apple-touch-icon.png	180x180	da 5 a 20 KB	Sì, per iOS
icon-192.png, icon-512.png	192, 512	Da 10 a 60 KB	Se il sito ha un manifesto

La conversione delle icone nel browser è privata?

Sì. Su Toolz, decodifica, ridimensionamento, codifica PNG e impacchettamento del lato client .ico all happen, all'interno della scheda del browser, quindi non viene caricata alcuna immagine e la pagina continua a funzionare offline una volta caricati I metadati e i profili colore allegati alla sorgente vengono eliminati dal passaggio della tela, che per un'icona è innocuo.

Le immagini superiori a 100 megapixel e i file vuoti vengono rifiutati con un messaggio e le sorgenti SVG superiori a 50 MB vengono rifiutate Gli strumenti sono gratuiti, senza iscrizione, con un limite giornaliero di conversioni.

Domande frequenti