Guide alle favicon
Risposte chiare alle domande che sorgono creando una favicon: quali dimensioni, quali formati, quale codice incollare.
Dimensioni delle favicon: formati e utilizzi
Cercando “dimensioni favicon” si trovano ancora elenchi di quindici file ereditati dal 2014. In pratica, oggi sei dimensioni coprono schede del browser, risultati di ricerca, iOS, Android e PWA. Ecco quali e perché.
Leggi la guidaConvertire un PNG in ICO, gratis
Il .ico resta il formato atteso nella radice di un sito e la maggior parte dei convertitori online richiede di caricare l’immagine sul proprio server. Ecco come ottenere da un PNG un favicon.ico multidimensione corretto, senza caricare nulla.
Leggi la guidaapple-touch-icon: dimensioni, formato e codice
L’icona Apple Touch definisce esplicitamente l’immagine usata quando un visitatore aggiunge il sito alla schermata Home di un iPhone. È distinta dalla favicon delle schede del browser e dalle icone dichiarate nel manifest dell’app web.
Leggi la guidaFavicon in modalità scura con un SVG
Un logo nero su sfondo trasparente è perfetto in una scheda chiara e scompare in una scura. Il formato ICO non può adattarsi, ma la favicon SVG sì: contiene una regola CSS che cambia i colori in base al tema del browser.
Leggi la guidaAggiungere una favicon in HTML
Una favicon HTML affidabile non dipende da un singolo tag magico. Usa un piccolo insieme di file accessibili e collegamenti nel head. Questa procedura copre schede moderne, client meno recenti e collegamenti mobile senza moltiplicare le varianti storiche.
Leggi la guidaLa favicon non appare o non si aggiorna
Quando una favicon manca, il problema non è sempre il file. Il browser, una CDN, un service worker e un motore di ricerca possono conservare versioni diverse. Una diagnosi ordinata evita di cambiare più variabili contemporaneamente.
Leggi la guidaLe favicon in Next.js App Router
App Router può produrre gli elementi delle icone a partire da file convenzionali o dall’oggetto metadata. Entrambi gli approcci sono validi, ma mescolarli senza una regola chiara può facilmente creare dichiarazioni in conflitto.
Leggi la guidaGuida alla favicon SVG
SVG mantiene i bordi nitidi a ogni densità di pixel e può adattare i colori al tema. Questa flessibilità comporta un vincolo: il file deve restare autonomo, semplice e leggibile in uno spazio minuscolo.
Leggi la guida