Favicon animata e alternativa statica in formato ICO

Una favicon animata è un comportamento del sito da verificare nei browser a cui è destinato. ImgConvert può preparare un'alternativa statica in formato ICO dal primo fotogramma di una GIF. Non offre un'opzione per conservare l'animazione e non genera file ICO animati.

Che cos'è una favicon animata?

La favicon (abbreviazione di "favorite icon", cioè "icona dei preferiti") è la piccola icona mostrata nella scheda del browser, nei preferiti e nella barra degli indirizzi. Una favicon animata alterna più fotogrammi, creando effetti di movimento visibili nella scheda del browser.

Tra gli usi più comuni:

• Indicatori di notifica — Pulsazioni o lampeggi per segnalare nuovi messaggi
• Animazioni di caricamento — Un'icona che ruota durante l'elaborazione dei contenuti
• Identità del marchio — Una discreta animazione del logo che ne esprime la personalità
• Eventi stagionali — Icone animate temporanee per festività o promozioni

Preparare un primo fotogramma efficace

Scegli un simbolo semplice, riconoscibile anche a 16×16 o 32×32. Se la GIF inizia con un fotogramma vuoto o una dissolvenza in entrata, seleziona prima un'immagine fissa più adatta in un editor. Il convertitore non permette di scegliere il fotogramma.

Principi di progettazione dell'animazione

Queste indicazioni sono punti di partenza per creare l'animazione in un editor separato, non limiti o controlli del convertitore ICO. Adatta i tempi al movimento effettivo ed evita lampeggi inutili.

Punta sulla semplicità

Le favicon animate più efficaci usano il movimento con moderazione. Tra 16×16 e 32×32 pixel, la complessità diventa confusione visiva:

• Massimo 2-4 fotogrammi per la maggior parte degli effetti
• Movimenti semplici — pulsazione, lampeggio, rotazione o scorrimento
• Sagoma ben riconoscibile in ogni fotogramma
• Ritmo lento — 500ms o più per ogni ciclo di fotogrammi

Scegli i tempi in base al tipo di animazione

La regola del primo fotogramma

Il convertitore usa il primo fotogramma per creare l'ICO statico. Quel fotogramma deve funzionare da solo, indipendentemente dalla riproduzione di un'animazione implementata separatamente:

• Simbolo del marchio riconoscibile anche senza contesto
• Nitido sia a 16×16 sia a 32×32 pixel
• Buon contrasto con l'interfaccia del browser, sia chiara sia scura
• Nessun testo (illeggibile alle dimensioni di una favicon)

Procedura di creazione passo dopo passo

Queste indicazioni sono punti di partenza per creare l'animazione in un editor separato, non limiti o controlli del convertitore ICO. Adatta i tempi al movimento effettivo ed evita lampeggi inutili.

Passaggio 1: progetta i fotogrammi

Crea 2-4 fotogrammi distinti per l'animazione:

Per una pulsazione di notifica:

• Fotogramma 1: icona normale (stato di base)
• Fotogramma 2: icona con un leggero bagliore o un aspetto ingrandito
• Fotogramma 3: ritorno allo stato normale (per un ciclo fluido)

Per un'animazione di caricamento:

• Fotogramma 1: icona nella posizione delle ore 12
• Fotogramma 2: icona nella posizione delle ore 3
• Fotogramma 3: icona nella posizione delle ore 6
• Fotogramma 4: icona nella posizione delle ore 9

Passaggio 2: esporta i singoli fotogrammi

Esporta ogni fotogramma come PNG a 32×32 pixel:

• Esporta il PNG con un canale alfa se il fotogramma deve essere trasparente.
• Mantieni lo sfondo trasparente dove serve
• Punta a meno di 5KB per fotogramma

Passaggio 3: assembla la GIF

Combina i fotogrammi in una GIF animata:

Creare il pacchetto ICO statico

1. Apri Da GIF a ICO e seleziona una GIF fino a 20 MB.
2. Seleziona le dimensioni necessarie: 16, 32, 48, 64, 128 o 256 px. Inizialmente sono selezionate 32, 64 e 128.
3. Converti, scarica ed estrai icons.zip.
4. Usa una singola icona oppure il file favicon.ico incluso, che contiene tutte le dimensioni selezionate. Sono varianti di dimensione della stessa immagine fissa, non fotogrammi di un'animazione.

Le immagini rettangolari vengono adattate al quadrato con margini trasparenti. Uno sfondo opaco presente nella sorgente rimane opaco. Per un pacchetto destinato a un sito con icone PNG e un manifest, usa il Generatore di favicon.

Installare l'alternativa statica sul sito

Dopo aver pubblicato il file estratto nella directory principale del sito, inserisci il riferimento nell'intestazione della pagina:

<link rel="icon" href="/favicon.ico">

Adatta il percorso alla struttura del sito pubblicato. Il convertitore non installa file e non modifica il sito. La documentazione MDN sul valore icon descrive la dichiarazione HTML.

Se la favicon deve muoversi

Conserva l'animazione originale. Usare un'immagine animata come favicon o cambiare i fotogrammi dell'icona tramite JavaScript sul sito richiede un'implementazione separata. Non dare per scontato che un file animato in un visualizzatore di immagini si animi anche in una scheda del browser, nei preferiti o in un collegamento. Verifica ogni browser richiesto e fornisci un'alternativa statica ben leggibile.

Esempio JavaScript per il sito

Chi sviluppa il sito può sperimentare modificando l'URL di un collegamento favicon esistente. Si tratta di codice da implementare separatamente nel sito; caricare qui una GIF non la aggiunge a un sito e non installa un'animazione. Conserva un file statico per ogni fotogramma e parti da un'icona statica efficace.

L'esempio seguente alterna due URL PNG ogni 500 ms mentre la pagina è visibile. Si interrompe quando la pagina viene nascosta o quando è richiesta la riduzione del movimento. Mostra il meccanismo di aggiornamento, senza garantire che ogni scheda del browser, preferito o collegamento del sistema operativo si animi. Verifica il comportamento nella destinazione effettiva prima di farvi affidamento.

<link id="favicon-demo" rel="icon" type="image/png" href="/icon-1.png">
<script>
  const icon = document.getElementById('favicon-demo');
  const frames = ['/icon-1.png', '/icon-2.png'];
  const motion = window.matchMedia('(prefers-reduced-motion: reduce)');
  let timer = null;
  let frameIndex = 0;

  function stopAnimation() {
    if (timer !== null) window.clearInterval(timer);
    timer = null;
    frameIndex = 0;
    icon.href = frames[0];
  }

  function syncAnimation() {
    stopAnimation();
    if (document.hidden || motion.matches) return;
    timer = window.setInterval(() => {
      frameIndex = (frameIndex + 1) % frames.length;
      icon.href = frames[frameIndex];
    }, 500);
  }

  document.addEventListener('visibilitychange', syncAnimation);
  motion.addEventListener('change', syncAnimation);
  syncAnimation();
</script>

Quando usare le favicon animate e quando evitarle

Usi adatti

Usi poco adatti

Ottimizzare le prestazioni

Limita il numero di fotogrammi, interrompi l'animazione quando la notifica non è più rilevante e prova la pagina con l'animazione attiva e disattivata. Un intervallo più breve non rende necessariamente migliore una favicon. Evita di eseguire più timer per la stessa icona. Se integri il codice in un componente, rimuovi i listener e arresta il timer quando il componente viene eliminato. L'esempio è codice autonomo per una pagina.

La guida MDN alla Page Visibility API spiega il segnale di visibilità usato qui. L'animazione dovrebbe affiancare un messaggio di stato accessibile nella pagina, perché l'icona da sola potrebbe non essere vista né annunciata dalle tecnologie assistive.

Controllare il risultato

• Apri l'URL dell'icona pubblicata e controllala alle dimensioni più piccole.
• Se rimane la vecchia icona, verifica le dichiarazioni delle icone esistenti e la cache del browser.
• Verifica l'animazione separatamente dal file ICO statico scaricato.

Controlla ogni browser e dispositivo effettivamente supportato, sia in una nuova sessione sia in una sessione con dati in cache. Verifica il primo fotogramma, gli eventuali movimenti implementati separatamente, la preferenza per la riduzione del movimento e il ritorno a una scheda prima nascosta. Esamina il simbolo a 16×16 e 32×32 sull'interfaccia chiara e scura del browser. Se l'animazione non funziona in modo affidabile, mantieni l'alternativa statica. Gli obiettivi di peso dei file sono limiti stabiliti per il progetto, non limiti universali dei browser.

Domande frequenti

Selezionare più dimensioni ICO conserva l'animazione della GIF?

No. Tutte le dimensioni derivano dal primo fotogramma. Non esiste un'opzione per conservare l'animazione.

Posso scegliere un altro fotogramma qui?

No. Prepara altrove l'immagine fissa desiderata, poi usa Da PNG a ICO se l'hai salvata come PNG.

Perché compare ancora la vecchia favicon?

Verifica che l'URL del file pubblicato sia accessibile, controlla se ci sono dichiarazioni di icone in conflitto e confronta una nuova sessione del browser con una che usa la cache. Le icone delle schede, i preferiti e i collegamenti installati possono usare risorse o cache diverse. Aggiornare un collegamento in una pagina non sostituisce tutte le icone salvate.

Il solo CSS può animare l'icona della scheda?

Un'animazione CSS applicata a un'immagine nella pagina web non anima l'icona della scheda del browser. Considera il collegamento diretto a un file animato e l'alternanza sperimentale degli URL tramite JavaScript come implementazioni separate, da verificare nei browser richiesti.

Quanto movimento dovrei usare?

Usa solo il movimento necessario a comunicare lo stato previsto. A volte un contrassegno statico lo comunica più chiaramente. Evita lampeggi rapidi, conserva un'immagine fissa riconoscibile e verifica il comportamento quando è richiesta la riduzione del movimento. Valuta i tempi alle dimensioni effettive dell'icona, senza basarti su un'anteprima ingrandita.