Generatore di Favicon
Carica un'immagine, scarica ogni dimensione di favicon — PNG da 16 a 512 px più i tag HTML. Funziona interamente nel tuo browser.
1.147 visualizzazioni
Impossibile leggere l'immagine — prova con PNG/JPG/WebP
Le Dimensioni Che Contano nel 2026
Ogni dispositivo e contesto si aspetta una dimensione di favicon diversa, perché una favicon non è un solo file — è una famiglia di file. Le schede del browser usano minuscoli PNG da 16×16 e 32×32 pixel. La funzione "Aggiungi alla schermata Home" di iOS usa un apple-touch-icon da 180×180. Android e le PWA installate recuperano icone da 192×192 e 512×512 pixel dal manifest dell'app web per la grafica della schermata home e di avvio. Una singola immagine sorgente non può servire direttamente a tutto questo — un logo da 512 px compresso in una scheda da 16 px perde quasi tutto il suo dettaglio, e un'icona da 16 px ingrandita a 512 px appare sfocata e a blocchi. L'approccio corretto è quindi disegnare una sorgente ad alta risoluzione verso ciascuna dimensione target singolarmente, ridisegnando i pixel da zero a ogni dimensione invece di scalare un output da un altro.
È esattamente ciò che fa questo strumento: carica la tua immagine sorgente su un canvas HTML nel tuo browser e la ridimensiona in tutte e sei le dimensioni standard — 16, 32, 48, 180, 192 e 512 pixel — ciascuna disegnata direttamente dall'originale, poi ti consegna i PNG corrispondenti più i tag <link> da incollare nell'<head> del tuo sito. Nulla viene caricato; il ridimensionamento avviene con la Canvas API sul tuo stesso dispositivo.
Progettare per la Dimensione Più Piccola
Poiché a 16 px si perde così tanto dettaglio, il design di una favicon si lavora a ritroso a partire dalla dimensione più piccola, non dalla più grande. Ritaglia sul simbolo del logo piuttosto che sul logotipo completo — il testo diventa una macchia illeggibile sotto circa 24 px. Mantieni un forte contrasto sia contro barre delle schede chiare che scure, dato che i browser passano da un tema all'altro. Uno sfondo a tinta unita di solito si legge meglio della trasparenza alle dimensioni più piccole, dove alcuni pixel di bordo semi-trasparenti possono sembrare rumore. Molti brand mantengono una versione semplificata "icona app" del proprio logo — una singola lettera, iniziale o glifo — proprio perché il loro logo completo non sopravvive al test dei 16 px.
Aiuta anche capire il file manifest che collega le icone da 192 e 512 pixel per i siti installabili: il manifest dell'app web (manifest.json) fa riferimento a queste due dimensioni tramite URL, così Android e gli installer PWA desktop sanno quale icona recuperare per la schermata home e il selettore app. I siti che omettono le icone del manifest restano comunque pienamente funzionanti — la scheda del browser e le icone della schermata home di iOS funzionano in modo indipendente — ma il prompt di installazione stesso potrebbe ripiegare su un'icona generica o rifiutarsi del tutto di offrire l'installazione.
Domande Frequenti
Serve ancora un file .ico?
Raramente. Ogni browser moderno accetta favicon PNG dichiarate tramite l'attributo sizes in un tag link. Mantenere un /favicon.ico nella root del sito aiuta solo user agent molto datati e strumenti che richiedono direttamente quel percorso legacy fisso.
Quale immagine dovrei caricare?
Un'immagine quadrata, idealmente da 512 px o più grande, PNG oppure un raster esportato da SVG con il simbolo centrato e abbastanza margine attorno. Le immagini non quadrate vengono ritagliate al centro in un quadrato prima del ridimensionamento, così nulla viene stirato.
Perché la mia icona appare sfocata o confusa a 16 px?
Sedici pixel non possono fisicamente contenere dettagli fini — tratti sottili, sfumature e testo piccolo si dissolvono in una macchia sfocata. Semplifica il simbolo sorgente, aumenta il contrasto, oppure progetta una versione dedicata per le piccole dimensioni se il tuo logo completo non sopravvive alla più piccola icona di scheda.
Qual è la differenza tra le icone da 192 px e 512 px?
Entrambe alimentano i manifest Android e PWA: la 192 px viene usata per l'icona della schermata home a densità normale, mentre la 512 px viene usata per gli schermi ad alta densità e per la schermata di avvio mostrata durante il caricamento di una PWA — Android sceglie quella più adatta al contesto.
Devo aggiungere ogni dimensione, o solo un paio?
Per un sito moderno, 32 px più l'apple-touch-icon da 180 px copre la stragrande maggioranza dei visitatori. Aggiungi le icone manifest da 192/512 px solo se il sito è installabile come PWA; le dimensioni da 16 e 48 px aiutano soprattutto nei contesti legacy.
Strumenti Simili
Segnala un Problema
Generatore di Favicon
Commenti
Ancora nessun commento — scrivi il primo!