Vai al contenuto
ImageConverter

Conversione sicura sul server

Generatore di favicon

Trasforma una sola immagine in un set completo di favicon. Ottieni un favicon.ico multidimensione, le dimensioni PNG che si aspettano browser e telefoni, un web manifest e il codice HTML esatto da incollare nelle tue pagine, il tutto in uno ZIP. Da tempo una favicon non è più un singolo file, e questo strumento crea tutti i pezzi invece di lasciarti indovinare quali ti servono.

Eliminato automaticamente File caricati rimossi entro 30 minuti

Trascina qui la tua immagine PNG

Aggiungine diverse insieme. Ogni file viene elaborato e poi eliminato dal nostro server.

Fino a 20 MB per file Supporta i batch

Passo dopo passo

Come usare questo strumento in 4 passaggi

  1. Aggiungi il tuo logo

    Un quadrato funziona meglio, idealmente da 512×512 o più. Vanno bene PNG, JPG, WebP e SVG; un SVG è l’ideale, perché si rende nitido a tutte le dimensioni.

  2. Aspetta un istante mentre viene creato il set

  3. Scarica lo ZIP ed estrailo

  4. Carica tutti i file nella radice del tuo sito

    Carica tutti i file nella radice del tuo sito e incolla nel tuo <head> il codice fornito nel README allegato.

Da sapere

Informazioni su questo formato

Un tempo una favicon era un unico file 16×16 chiamato favicon.ico nella radice del sito. Funziona ancora, e il risultato è comunque mediocre quasi ovunque, perché i posti in cui compare un’icona si sono moltiplicati.

Cosa contiene l’archivio, e perché esiste ogni pezzo:

  • favicon.ico: il file classico, con versioni da 16, 32, 48 e 256 pixel riunite. I browser lo cercano automaticamente, Windows lo usa per i collegamenti, e molti strumenti di anteprima dei link e di feed RSS se lo aspettano.
  • favicon-16x16.png e favicon-32x32.png: i browser moderni preferiscono il PNG quando viene offerto, e 32 è ciò che usa una scheda su uno schermo ad alta densità.
  • apple-touch-icon.png (180×180): la schermata Home di iOS. Senza di essa, chi salva il tuo sito su un iPhone ottiene uno screenshot sfocato invece del tuo logo.
  • android-chrome-192x192.png e 512x512: schermate Home e schermate di avvio di Android.
  • site.webmanifest: dice ad Android quali icone usare e come presentare il tuo sito una volta salvato. Aprilo e inserisci il nome del tuo sito, che abbiamo lasciato vuoto perché non lo conosciamo.
  • README.txt: dove va ogni file, e il codice da incollare. È allegato perché i file non servono a nulla senza di esso, e perché chi aprirà questo archivio tra sei mesi non avrà questa pagina davanti.

I vecchi generatori producono venti file o più per dispositivi che non esistono più: riquadri di Windows, una dozzina di dimensioni Apple, browserconfig.xml. Questo set è volutamente ridotto: copre tutti i contesti che contano ancora in pratica.

Qualità

Qualità e peso del file

L’immagine di partenza conta più di qualsiasi impostazione, e tre cose decidono se il risultato sarà riuscito.

Parti da qualcosa di grande, o da un vettore. Un SVG è l’ideale, perché ogni dimensione viene resa a partire dalle forme invece di essere ridotta da un bitmap. Altrimenti usa 512×512 o più: l’icona Android da sola ha bisogno di 512.

Rendila quadrata. Le icone sono quadrate ovunque compaiano. Un logo largo viene adattato in un quadrato con spazio attorno, e appare piccolo e sperduto. Ritaglialo prima in quadrato, oppure progetta un marchio quadrato.

Semplifica. È il passaggio che quasi tutti saltano, e conta più della risoluzione. A 16×16 hai 256 pixel in tutto: il logo completo dell’azienda con il suo slogan è illeggibile, per quanto buono sia l’originale. Guarda le favicon dei siti che usi ogni giorno: quasi tutte sono una lettera, un marchio semplice o una forma decisa, e molto più semplici del vero logo della stessa azienda.

Se il tuo logo è dettagliato, crea una versione semplificata per l’icona. È normale, ed è esattamente ciò che fanno le grandi organizzazioni.

La trasparenza viene mantenuta. Di solito è ciò che si vuole: un’icona con uno sfondo bianco incorporato appare come un quadrato bianco in un browser con tema scuro.

Installare il set di icone

Carica tutto nella radice del tuo sito, perché i file siano raggiungibili a https://example.com/favicon.ico e così via. Le sottocartelle non funzionano: i browser cercano proprio /favicon.ico, e i percorsi del manifest partono dalla radice.

Poi incolla questo nel tuo <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Infine apri site.webmanifest e compila name e short_name.

«L’ho caricato e non è cambiato nulla»

È di gran lunga il problema più frequente, e quasi mai dipende dai file.

I browser mettono in cache le favicon in modo molto ostinato, spesso più di qualsiasi altra risorsa, e a volte ignorano del tutto un semplice ricaricamento. Prima di pensare che qualcosa non vada:

  • Prova un ricaricamento forzato, una finestra privata, o un browser con cui non hai mai visitato il sito.
  • Apri direttamente il file (https://example.com/favicon.ico) per confermare che c’è davvero e viene servito.
  • Dagli tempo. Alcuni browser ricontrollano l’icona solo dopo un po’ o dopo un riavvio.

Se il file si apre direttamente ma la scheda mostra ancora la vecchia icona, è la cache. Se il file restituisce un errore 404, non è nel posto giusto.

Vuoi anche un’icona SVG?

I browser moderni accettano una favicon SVG, che resta nitida a tutte le dimensioni e può adattarsi alla modalità scura:

<link rel="icon" href="/icon.svg" type="image/svg+xml">

È un buon complemento, non un sostituto. Tieni l’ICO come soluzione di riserva: i collegamenti di Windows, i browser più vecchi e molti strumenti di terze parti lo cercano ancora.

Oltre i siti web

Il favicon.ico di questo archivio è un’icona Windows multidimensione standard: serve quindi anche per le icone dei programmi, i collegamenti sul desktop e le icone delle cartelle. Ovunque Windows mostri un’icona, sceglie la dimensione più adatta alla visualizzazione, ed è proprio per questo che il file ne contiene quattro.

Privacy

Cosa succede al tuo file

Questo strumento funziona sul nostro server, così dà lo stesso risultato su qualsiasi telefono o computer. Il tuo file viene caricato, ed ecco esattamente cosa gli succede:

  • Salvato fuori dall’area pubblica del server con un nome casuale, mai con il nome del tuo file.
  • Viene elaborato e il file originale caricato viene eliminato subito, sia che la conversione riesca sia che fallisca.
  • Il risultato è protetto da un link firmato che ricevi solo tu, smette di funzionare dopo 20 minuti, e il file viene eliminato non appena lo scarichi.
  • Ciò che non viene mai scaricato viene eliminato automaticamente entro 30 minuti.
  • L’immagine in sé non viene mai registrata né conservata. Se una conversione fallisce, annotiamo i formati coinvolti e l’errore, non il file.
  • I metadati della fotocamera, comprese le eventuali coordinate GPS che registrano dove è stata scattata la foto, vengono rimossi dal risultato. Resta solo la rotazione necessaria per mostrare l’immagine dritta.

Domande e risposte

Generatore di favicon: domande frequenti

Quanto deve essere grande la mia immagine di partenza?

512×512 o più, e quadrata. Un SVG è ancora meglio, perché ogni dimensione viene resa a partire dalle forme invece di essere ridotta da pixel. L’icona Android da sola ha bisogno di 512: tutto ciò che è più piccolo verrà ingrandito.

Quali file devo caricare davvero?

Tutti, nella radice del tuo sito, non in una sottocartella. I browser cercano proprio /favicon.ico, e il manifest punta alle icone Android con percorsi relativi alla radice. Il README allegato spiega a cosa serve ogni file.

Ho caricato i file, ma il browser mostra ancora la vecchia icona.

È quasi certamente la cache, non i file. I browser mettono in cache le favicon in modo molto ostinato e a volte ignorano un semplice ricaricamento. Prova una finestra privata o un browser con cui non hai visitato il sito, e apri direttamente /favicon.ico per confermare che viene servito. Se si apre ma la scheda non si aggiorna, è la cache; se restituisce un 404, non è nel posto giusto.

Perché il mio logo appare sfocato alle piccole dimensioni?

Perché a 16×16 hai 256 pixel in tutto, e nessuna risoluzione cambia le cose. Crea una versione semplificata per l’icona: una lettera, un marchio semplice o una forma decisa. Guarda le favicon dei siti che usi ogni giorno: quasi tutte sono molto più semplici del vero logo dell’azienda.

Mi serve ancora favicon.ico se ho le icone PNG?

Sì, tienilo. I browser richiedono automaticamente /favicon.ico, anche senza tag link, e i collegamenti di Windows, i browser più vecchi e molti strumenti di feed RSS e anteprima dei link lo cercano proprio. I browser moderni preferiscono i PNG quando vengono offerti entrambi.

Perché così pochi file? Altri generatori ne creano venti o più.

Perché la maggior parte è destinata a dispositivi che non esistono più: riquadri di Windows, una dozzina di vecchie dimensioni Apple, browserconfig.xml. Questi sei coprono tutti i contesti che contano ancora, e un set più ridotto è più facile da installare correttamente.

Continua a esplorare

Strumenti per immagini correlati

Vedi tutti gli strumenti

Convertire PNG in ICO

Converti un PNG in un vero ICO multidimensione con versioni da 16, 32, 48 e 256 pixel. Trasparenza mantenuta.

Sul nostro server

Convertire ICO in PNG

Converti file ICO di Windows in PNG, trasparenza mantenuta. Estrae l’immagine più grande contenuta nell’icona.

Sul nostro server

Convertire SVG in PNG

Converti un SVG in PNG a qualsiasi risoluzione, trasparenza mantenuta. Reso dal vettore, per bordi nitidi a ogni dimensione.

Sul nostro server

Ridimensionare un’immagine

Porta un’immagine alle dimensioni in pixel che vuoi, con o senza proporzioni bloccate e con preimpostazioni per i social. Gratis, senza registrazione.

Sul nostro server