DevToolPal
IT

Generatore di favicon

Crea una favicon da testo, emoji o dal tuo logo: favicon.ico, PNG in più dimensioni, Apple touch icon, web manifest e tag HTML in un unico ZIP.

Eseguito in locale, mai caricato

Opzioni

Sorgente
Forma

Anteprima

HTML per <head>

Cosa fa questo strumento

Il generatore di favicon trasforma una lettera, un’emoji o il tuo logo in tutte le icone di cui ha bisogno un sito moderno. Disegna l’icona in ogni dimensione, crea favicon.ico, scrive un web app manifest e ti fornisce i tag <link> da incollare nella sezione <head> della pagina. Scarichi tutto in un unico ZIP.

Partire da un testo è il modo più rapido per ottenere un’icona pulita: scrivi da uno a tre caratteri o un’emoji, scegli i colori, un font e una forma (quadrato, arrotondato o cerchio). Le icone di testo ricevono anche un favicon.svg scalabile, che resta nitido a ogni dimensione e sugli schermi ad alta densità.

Come si usa

  1. Scegli Testo o Immagine come sorgente. Per un’immagine, premi Scegli immagine… e seleziona un PNG, SVG o JPG quadrato.
  2. Imposta la Forma e attiva Riempi lo sfondo per mettere l’icona su un riquadro colorato, oppure disattivalo per mantenerla trasparente.
  3. Inserisci il Nome del sito: è l’etichetta sotto l’icona quando qualcuno aggiunge il tuo sito alla schermata Home del telefono, e viene scritto in site.webmanifest (Android) e nel tag apple-mobile-web-app-title (iOS). Poi imposta la Cartella delle icone in cui caricherai i file, di solito /.
  4. Controlla l’anteprima: l’icona da 16 px è quella che le persone vedono nella scheda del browser.
  5. Premi Scarica ZIP, carica i file sul tuo sito e incolla l’HTML in <head>.

Esempio

Le impostazioni predefinite producono questi tag:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

Suggerimenti

  • I browser mettono in cache le favicon in modo aggressivo. Dopo aver sostituito un’icona, apri la pagina in una finestra privata per vedere la modifica.
  • iOS ignora la trasparenza nella Apple touch icon e la riempie di nero, quindi tieni lo sfondo pieno per un’icona pulita nella schermata Home.

Domande frequenti

› Quali file ottengo?

favicon.ico (16, 32 e 48 px), icone PNG da 16, 32 e 48 px, una Apple touch icon da 180 px, icone Android da 192 e 512 px, site.webmanifest, i tag HTML e favicon.svg quando parti da un testo.

› Il mio logo viene caricato da qualche parte?

No. L'immagine viene letta e ridimensionata nel tuo browser con un canvas; anche lo ZIP viene creato sul tuo dispositivo.

› Quale immagine funziona meglio?

Un PNG o SVG quadrato di almeno 512 × 512 px con sfondo trasparente. Le forme semplici e marcate restano leggibili a 16 px; i dettagli fini e il testo sottile no.

› Mi serve ancora favicon.ico?

Sì, per i browser più vecchi e per gli strumenti che richiedono direttamente /favicon.ico. I browser moderni usano i link PNG o SVG nell'HTML.