Favicon Webflow: come aggiungere favicon e webclip

Aggiungi favicon e webclip in Webflow: dove trovare le impostazioni Icone, le dimensioni generate, come pubblicare e cosa fare se non si aggiorna.

Domande frequenti

Che dimensioni deve avere la favicon di Webflow?

Il centro assistenza di Webflow indica una favicon da 32x32 e una webclip da 256x256. Nel flusso attuale carichi un'unica immagine quadrata e Webflow genera le altre dimensioni al posto tuo, quindi parti da un file quadrato di almeno 256x256 pixel che resti leggibile anche rimpicciolito.

Dove carico la favicon in Webflow?

Apri Site settings (Impostazioni del sito), vai su General (Generali) e trova la sezione Icons (Icone). Carica la tua immagine quadrata, scegli quali icone aggiornare, applica la modifica e poi pubblica il sito. Le guide meno recenti la chiamano Project settings, ma è lo stesso posto.

Che cos'è una webclip in Webflow?

La webclip è l'icona più grande che compare quando qualcuno salva il tuo sito nella schermata Home del telefono o in un collegamento simile. Webflow la indica a 256x256 pixel. È diversa dalla piccola icona che si vede nella scheda del browser.

Perché la favicon di Webflow non si vede dopo il caricamento?

La causa più comune è che il sito non è stato pubblicato dopo il caricamento: le icone cambiano solo sul sito pubblicato. La seconda è la cache del browser. Pubblica, poi controlla in una finestra privata o in un altro browser prima di pensare che il caricamento sia fallito.

Webflow supporta favicon SVG o per la dark mode?

Secondo le note di aggiornamento di Webflow puoi caricare PNG, JPG, GIF, ICO o SVG, e l'articolo del centro assistenza indica un'icona facoltativa per la scheda del browser in modalità scura. Webflow inoltre converte gli SVG caricati in PNG per garantire la compatibilità tra browser, quindi verifica il risultato nei browser che ti interessano.

Quanto ci mette Google a mostrare la nuova favicon di Webflow?

Non esiste una tempistica fissa. Google decide quando eseguire una nuova scansione e aggiornare l'icona nei risultati di ricerca, e le segnalazioni della community parlano di giorni, settimane o anche di più. Ciò che puoi controllare tu è che l'icona sia attiva sul sito pubblicato.

Risposta breve: in Webflow apri Site settings > General > Icons, carica un'immagine quadrata, scegli quali icone aggiornare (favicon chiara, favicon facoltativa per la dark mode, webclip), applica la modifica e pubblica il sito. Webflow indica una favicon da 32x32 e una webclip da 256x256, e genera le altre dimensioni a partire dal tuo file. Sul sito online non cambia nulla finché non pubblichi. (Verificato a novembre 2026 sul centro assistenza e sulle note di aggiornamento di Webflow.)

Cosa richiede Webflow

I tutorial meno recenti descrivono due campi di caricamento separati, uno per la favicon 32x32 e uno per la webclip 256x256. L'articolo attuale del centro assistenza di Webflow descrive un flusso più semplice: carichi una sola immagine quadrata e Webflow si occupa delle dimensioni. Ecco a cosa serve ciascuna icona.

IconaDimensione indicata da WebflowDove compare
Favicon (chiara)32x32Schede del browser e segnalibri
Favicon (dark mode, facoltativa)32x32Schede del browser quando è attiva la modalità scura
Webclip256x256Collegamenti nella schermata Home e link salvati simili
Extra generati automaticamenteFavicon 48x48, icone touch 180x180 e 192x192Generati da Webflow a partire dal tuo file

Formati accettati secondo le note di aggiornamento di Webflow: PNG, JPG, GIF, ICO e SVG. Gli SVG vengono convertiti in PNG per la compatibilità tra browser.

Per approfondire le dimensioni sulle varie piattaforme, leggi la nostra guida alle dimensioni della favicon.

Prepara prima l'immagine

In una scheda la favicon viene mostrata larga circa 16-32 pixel, quindi l'immagine di partenza conta più delle impostazioni.

  • Parti da un quadrato. Esporta un'area di lavoro quadrata, da 256x256 o più grande, così la webclip non viene ingrandita.
  • Semplifica. Usa un simbolo del logo o una sola lettera, non il logotipo completo. I dettagli sottili diventano illeggibili alla dimensione di una scheda.
  • Attenzione allo sfondo. Un PNG trasparente sta bene sulle schede chiare, ma su quelle scure può sparire. Se usi una favicon per la dark mode, prepara una versione con il simbolo chiaro.
  • Scegli un nome file neutro. I nomi dei file caricati possono finire nell'HTML pubblicato, quindi evita "final_v3_VERA.png".

Come aggiungere favicon e webclip in Webflow

  1. Apri il progetto nel Webflow Designer o nella dashboard e vai su Site settings.
  2. Seleziona la scheda General e scorri fino a Icons.
  3. Clicca su Upload icon e scegli la tua immagine quadrata.
  4. Scegli quali icone deve aggiornare l'immagine: la favicon, la favicon facoltativa per la dark mode e la webclip.
  5. Se vuoi un'icona diversa per la dark mode, aggiungila nello spazio dedicato. Questo passaggio è facoltativo.
  6. Clicca su Apply. Il testo dell'interfaccia può cambiare leggermente con gli aggiornamenti di Webflow, quindi fai riferimento alle etichette che vedi.
  7. Pubblica il sito sui tuoi domini. Il solo salvataggio non porta le icone sul sito online.
  8. Apri il sito online in una finestra privata e controlla la scheda.

Checklist da copiare

`` [ ] Immagine di partenza quadrata, 256x256 o più grande [ ] Il simbolo è abbastanza semplice da leggersi alla dimensione di una scheda [ ] Testata con tema del browser chiaro e scuro [ ] Caricata in Site settings > General > Icons [ ] Modifica applicata (Apply) [ ] Pubblicata sul dominio online (non solo sul dominio di staging webflow.io) [ ] Controllata in una finestra privata [ ] Aggiornamento forzato o cache svuotata se resta la vecchia icona ``

Risoluzione dei problemi

La favicon mostra ancora la vecchia icona o il logo di Webflow

Procedi in quest'ordine:

  1. Pubblica di nuovo. Le icone vanno online solo con una pubblicazione. Se pubblichi su più domini, includili tutti.
  2. Prova in una finestra privata. I browser tengono le favicon in cache in modo molto aggressivo, e una scheda normale può mostrare a lungo quella vecchia.
  3. Forza l'aggiornamento della pagina, oppure chiudi e riapri il browser.
  4. Apri direttamente il file. Verifica che l'URL dell'icona nel codice sorgente della pagina si carichi in una scheda a parte.

Il caricamento viene rifiutato o l'immagine appare deformata

Alcune discussioni della community segnalano errori sulle dimensioni nei flussi più vecchi, che richiedevano misure esatte. Se ti capita, usa un'immagine quadrata e riprova; se il problema persiste, prova con un altro browser o con una finestra privata. Questo consiglio arriva da segnalazioni nei forum, non dalla documentazione di Webflow, quindi consideralo un rimedio provvisorio.

I risultati di Google mostrano l'icona sbagliata

L'icona nei risultati di ricerca è gestita da Google, non da Webflow. Le discussioni della community parlano di aggiornamenti che richiedono giorni, settimane o più. Verifica che l'icona si carichi sul tuo sito online, poi attendi. Aiuta mantenere un'icona stabile, quadrata e sempre allo stesso URL.

L'icona appare sfocata nelle schede

Di solito significa che l'originale ha troppi dettagli oppure aveva una risoluzione bassa fin dall'inizio. Ridisegna un simbolo più semplice a una dimensione maggiore e caricalo di nuovo.

Quale formato conviene caricare?

FormatoIdeale perAttenzione a
PNGLa maggior parte dei siti; affidabile e supporta la trasparenzaServe una risoluzione sufficiente per la webclip
SVGGrafica di partenza nitidaWebflow lo converte in PNG, quindi controlla l'anteprima del risultato
ICOFlussi di lavoro legacySpesso superfluo quando Webflow genera le dimensioni al posto tuo
JPGRaramente è una buona sceltaNiente trasparenza; lascia un riquadro di sfondo

Nel dubbio, un PNG quadrato da 256x256 o più grande è la scelta più sicura.

Dove si colloca nella preparazione al lancio

La favicon è solo una piccola voce della checklist di lancio, insieme a titoli, descrizioni e immagini social. Se stai valutando le piattaforme prima di impegnarti, le nostre pagine confronto con Webflow e alternative a Webflow spiegano i pro e i contro, mentre la guida generale per cambiare la favicon è utile se gestisci siti su più piattaforme.

Se preferisci partire da un layout già pronto, il piano gratuito di We.Inc ti permette di pubblicare fino a tre siti da template pronti; il builder con intelligenza artificiale che crea un sito a partire da un prompt parte dal piano Starter a $20 al mese. Puoi iscriverti qui.

Inizia gratis · Nessuna carta di credito richiesta

Umair Ali Sadaqat

Fondatore di We.Inc

Umair è il fondatore di We.Inc. Scrive di creazione di siti web con l’IA, agenzie e gestione di uno studio web.

Pronto a creare qualcosa di grande?

Unisciti a 15,000+ aziende che usano We.Inc per lanciare, crescere e automatizzare, tutto da un'unica piattaforma.

Inizia gratis

Nessuna carta di credito richiesta · Parla con il team vendite

Correlati: Blog

Prodotto

Per chi è

Funzionalità

Risorse

Azienda

Mappa del sito