Come aggiungere una favicon al tuo sito Framer

Per aggiungere una favicon in Framer: aprite Site Settings (⌘ + ,), scorrete fino a "Site Images" → "Favicon", caricate un file PNG 64x64, quindi pubblicate il sito. Tutto qui.

Vediamo ora i dettagli e come risolvere eventuali problemi.

Specifiche della favicon per Framer

Framer richiede specifiche precise per la favicon:

• Dimensione: 64 x 64 pixel
• Formato: PNG (consigliato)
• Sfondo: Trasparente

Passaggio 1: Aprire le impostazioni del sito

Due modi per accedere alle impostazioni:

• Tastiera: Premete ⌘ + , (Mac) o Ctrl + , (Windows)
• Menu: Cliccate sull'icona di Framer → Site Settings → Open Settings

Passaggio 2: Trovare la sezione Favicon

• Scorrete verso il basso fino a "Site Images"
• Individuate l'area di caricamento "Favicon"

Passaggio 3: Caricare la favicon

Framer offre due slot di caricamento:

• Favicon tema chiaro: Viene visualizzata nei browser in modalità chiara
• Favicon tema scuro: Viene visualizzata nei browser in modalità scura

Se avete una sola versione, caricate la stessa immagine in entrambi gli slot.

Passaggio 4: Pubblicare il sito

• Cliccate il pulsante Publish
• La favicon appare solo sul sito pubblicato, non nell'anteprima

Supporto modalità chiara e scura

Perché usare due versioni?

• I loghi scuri scompaiono sulle schede scure del browser
• I loghi chiari scompaiono sulle schede chiare del browser
• Versioni separate garantiscono la visibilità in tutte le modalità

Come creare le versioni

1. Partite dalla vostra favicon normale
2. Invertite i colori per la versione alternativa
3. Mantenete la stessa forma e lo stesso design
4. Usate sfondi trasparenti per entrambe

Configurazione dell'icona Apple Touch

Da settembre 2024, Framer supporta le icone Apple touch:

• Posizione: Nella stessa sezione Site Images
• Dimensione: 180 x 180 pixel
• Scopo: Icona sulla schermata iniziale dei dispositivi iOS

Risoluzione problemi: La favicon non viene visualizzata

Verificare le basi

• Avete pubblicato il sito?
• Aggiornamento forzato: Cmd+Shift+R o Ctrl+Shift+R
• Provate in una finestra di navigazione in incognito

Verificare la posizione del caricamento

• Deve trovarsi in Site Settings, non nelle impostazioni della pagina
• Il file deve essere in formato PNG valido

Risoluzione problemi: Google mostra la vecchia favicon

Google aggiorna le favicon lentamente (da giorni a settimane).

Passaggi per velocizzare l'aggiornamento

1. Assicuratevi che la favicon sia attiva sul vostro sito
2. Aprite Google Search Console
3. Usate lo strumento Ispezione URL sulla homepage
4. Richiedete l'indicizzazione

Risoluzione problemi: Problemi con Safari

Safari memorizza le favicon in cache in modo aggressivo.

Passaggi per la risoluzione

1. Svuotate completamente la cache di Safari
2. Eliminate la cache delle favicon: ~/Library/Safari/Favicon Cache/
3. Chiudete e riaprite Safari

Risoluzione problemi: Appare ancora il logo di Framer

Cause comuni:

• Il sito non è stato pubblicato dopo il caricamento della favicon
• Problema di cache del browser
• State visualizzando l'anteprima invece del sito pubblicato

Soluzione: Pubblicate il sito e svuotate la cache del browser.

Buone pratiche

• Backup dei file: Conservate i file originali della favicon
• Test ovunque: Verificate su Mac, Windows, iOS, Android
• Usate strumenti di verifica: Favicon.im valida la vostra configurazione
• Documentate i colori: Annotate i codici esadecimali esatti per la coerenza del brand

FAQ

Come si aggiunge una favicon in Framer?

Aprite Site Settings con ⌘ + ,, scorrete fino a "Site Images", cliccate su "Favicon", caricate un file PNG 64x64, quindi pubblicate il sito.

Quali dimensioni deve avere la favicon di Framer?

Framer consiglia 64 x 64 pixel in formato PNG con sfondo trasparente.

Perché la mia favicon di Framer non viene visualizzata?

Le cause più comuni sono: sito non pubblicato, cache del browser o posizione di caricamento errata. Pubblicate il sito, aggiornate forzatamente la pagina o provate in una finestra di navigazione in incognito.

Quanto tempo impiega Google ad aggiornare una favicon?

Google aggiorna le favicon lentamente — di solito da giorni a settimane. Richiedete la reindicizzazione tramite Google Search Console per accelerare il processo.

Framer supporta le favicon per la modalità scura?

Sì. Da settembre 2024, Framer consente di caricare favicon separate per i temi chiaro e scuro nelle impostazioni Site Images.

Riferimenti

1. How to set up a favicon in Framer - Guida ufficiale Framer
2. September 2024 Update: Apple Touch Icon and Favicons - Aggiornamenti Framer
3. Why isn't Safari displaying the favicon? - Risoluzione problemi Framer
4. Favicon.im - Strumento di test e validazione favicon