Caricamento...
Caricamento...
Inserisci un'immagine e ottieni ogni dimensione di favicon di cui un sito moderno ha bisogno — favicon.ico, dimensioni PNG per browser, Apple e Android, più HTML e frammenti di manifest pronti per il copia e incolla.
Un generatore di favicon trasforma un'immagine sorgente in una famiglia di file icona di cui un sito web moderno ha bisogno — il file .ico legacy che i browser recuperano automaticamente, le piccole dimensioni PNG mostrate nelle schede e nei segnalibri, l'icona apple-touch da 180 pixel utilizzata quando un utente iPhone aggiunge il tuo sito alla schermata principale, e le immagini da 192/512 pixel che Android estrae dal manifesto web. Farlo a mano significa aprire un editor di immagini, esportare sette file separati e scrivere un lungo blocco di tag <link> nel tuo HTML. Questo generatore esegue l'intero processo nel tuo browser: carica un'immagine, ottieni ogni dimensione e copia lo snippet HTML e del manifesto corrispondente. La tua immagine non lascia mai la pagina.
Carica un PNG, JPG, WebP o SVG che sia quadrato e almeno 512×512 pixel. Una sorgente non quadrata viene adattata su una tela quadrata in modo che il logo non venga mai ritagliato, ma i piccoli dettagli appaiono più nitidi quando la sorgente è già quadrata.
Lascialo trasparente se il tuo logo è leggibile sia su chrome del browser chiaro che scuro. Passa a un colore solido se la tua icona ha un primo piano chiaro che scomparirebbe su una scheda bianca — la maggior parte delle schede aziendali è ancora molto chiara.
Guarda attentamente le anteprime da 16 e 32 pixel. La maggior parte dei loghi perde dettagli a quella dimensione. Se il risultato è una macchia, semplifica la sorgente — meno colori, tratti più spessi, meno caratteri fini — e ricarica.
Usa Scarica tutto per ottenere favicon.ico più le sei dimensioni PNG. Posizionali nella radice del tuo sito. Il .ico contiene internamente PNG da 16, 32 e 48 px, che è ciò che i moderni Chrome, Firefox ed Edge si aspettano.
Copia lo snippet HTML nel <head> di ogni pagina. Salva lo snippet site.webmanifest accanto alle icone affinché Android mostri l'immagine corretta sulla schermata principale quando qualcuno aggiunge il tuo sito.
1. Decodifica l'immagine caricata utilizzando il caricatore di immagini nativo del browser.
2. Per ogni dimensione target (16, 32, 48, 180, 192, 512), disegna su una tela quadrata.
3. Adatta la sorgente in modo che il lato più lungo si adatti alla tela — non ritagliare mai, non allungare mai.
4. Ricodifica la tela come PNG tramite canvas.toBlob('image/png').
5. Per favicon.ico, assembla i PNG da 16/32/48 in una struttura ICONDIR + ICONDIRENTRY.
6. Concatenare i byte PNG dopo le voci di directory da 16 byte — questo è un valido .ico multi-risoluzione.I browser moderni e i dispositivi Apple accettano byte PNG incorporati all'interno di un contenitore .ico — non c'è bisogno di codificare il formato antiquato BMP-con-maschera-AND che originariamente veniva fornito con Windows 95. Il contenitore è solo un'intestazione di sei byte (riservato + tipo + conteggio), una voce di directory da 16 byte per ogni immagine inclusa (dimensione + profondità di bit + offset + lunghezza), e i payload PNG concatenati. Questo è ciò che produce questo strumento, ed è ciò che Chrome, Firefox, Safari ed Edge recuperano quando richiedono /favicon.ico dal tuo server.
Riferimento: Wikipedia — Formato file ICO
| Immagine sorgente | Cosa aspettarsi |
|---|---|
Logo quadrato in grassetto, 1024×1024 PNG, sfondo trasparente | Nitido a ogni dimensione. Le anteprime da 16 e 32 px sono ancora leggibili. Inserisci direttamente in un sito di produzione. L'input ideale. |
Wordmark orizzontale largo, 2000×400 | Ritagliato su una tela quadrata con bande vuote sopra e sotto. Il wordmark è ancora leggibile a 192 e 512 ma illeggibile a 16 e 32 — il testo è troppo piccolo. Ritaglia a un marchio quadrato prima di caricare. |
Logo fotografico con un sottile contorno sfumato | Il gradiente e il contorno scompaiono a 16 e 32 px. Usa una versione semplificata e ad alto contrasto dello stesso logo per risorse di dimensioni icona. La perdita di dettagli è un problema di origine, non un problema di esportazione. |
SVG senza larghezza o altezza esplicite | Viene visualizzato alla dimensione predefinita di 300×150 che il browser assegna agli SVG senza una dimensione derivata da viewBox. Aggiungi attributi di larghezza/altezza o un viewBox all'SVG sorgente prima di caricare. Caso limite SVG — correggi la sorgente. |
Ritaglia il soggetto da qualsiasi foto con AI su dispositivo — nessun upload richiesto.
Riduci le dimensioni dei file JPG, PNG o WebP nel tuo browser con un cursore di qualità interattivo.
Regola, filtra, ruota e ritaglia foto nel browser — senza caricamenti, senza filigrana.
Crea meme e collage di screenshot con veri livelli — incolla, trascina, ritaglia, aggiungi didascalie, esporta.
Ultimo aggiornamento