Le favicon sono una componente importante del marketing digitale. Aiutano a identificare visivamente la tua azienda nell'ampio spazio Internet. L'esperienza dell'utente sul tuo sito Web può essere migliorata e il riconoscimento del marchio può essere aumentato da questi piccoli ma potenti elementi. In questo post imparerai di più su cos'è l'icona dell'immagine favicon, comprese le loro dimensioni, come crearne una per il tuo sito Web utilizzando un generatore, come influenzano la SEO e come aggiungerne una utilizzando l'HTML.
Cos'è una Favicon?
Una favicon è una piccola icona immagine di 16×16 pixel che funge da marchio per il tuo sito web. Il suo obiettivo principale è rendere più semplice per gli utenti trovare la tua pagina quando hanno diverse schede aperte.
Una favicon funziona meglio come un'immagine semplice o da uno a tre caratteri di testo grazie alle sue dimensioni ridotte. Favicon e loghi a volte sono uguali ma non devono essere confusi. La favicon può dover essere ancora più piccola o una parte del logo originale di un'azienda a causa delle sue dimensioni ridotte e della bassa risoluzione.
Dove puoi vedere l'icona dell'immagine Favicon?
La favicon per il tuo sito web può trovarsi accanto a qualsiasi elemento identificativo. Ciò include barre di ricerca, risultati della cronologia, app della barra degli strumenti, segnalibri e schede.
Le favicon sono disponibili su:
- La barra di ricerca.
- Cronologia delle ricerche.
- App della barra degli strumenti.
- Segnalibri.
- Raccomandazioni per la barra di ricerca.
- Il menu a discesa dei tuoi segnalibri.
Usandone uno, puoi assicurarti che le persone possano riconoscere rapidamente il tuo sito web. Queste favicon possono aiutare i visitatori online a identificare immediatamente le pagine che hanno visitato.
Perché l'icona Favicon è importante?
Un passaggio semplice ma cruciale nella creazione di un sito Web aziendale è la creazione di un'icona favicon. Dà al tuo sito web più autorità e migliora sia la tua reputazione su Internet che la fiducia dei potenziali clienti.
Servono come segnale visivo iniziale per il sito Web, consentendo un'identificazione rapida e semplice per gli utenti Web e riunendo tutti i diversi elementi del browser per creare un'esperienza di navigazione unificata e ben identificata.
Crea Favicon
Quando crei e progetti un'icona favicon per il tuo sito web, ci sono diversi fattori da considerare. Sebbene minuscolo e semplice, può (e dovrebbe) avere un impatto significativo. Poiché i visitatori assoceranno il tuo marchio alla tua favicon, è fondamentale creare la versione migliore di questa immagine. Per creare l'icona della tua immagine favicon, tieni presente quanto segue:
#1. Usa lo spazio con saggezza
A volte una favicon non può essere solo una replica ridotta del tuo logo aziendale. L'intera dimensione della tua favicon deve essere presa in considerazione. Dovresti attenersi a 16px poiché tutti i browser lo consentono.
#2. Semplicità
Anche se la favicon del tuo marchio funge da logo, dovresti cercare di mantenere il tuo design il più semplice possibile. Le favicon più semplici funzionano meglio. A causa delle dimensioni ridotte della favicon e dell'utilizzo di design semplici, i colori sono essenziali per attirare l'attenzione dei potenziali clienti e distinguersi. La favicon apparirà disordinata e disorganizzata solo se ci sono troppi dettagli.
#3. Identità aziendale
La tua favicon dovrebbe trasmettere visivamente agli utenti ciò che rappresenta la tua azienda poiché è la rappresentazione visiva del tuo marchio. Questo spiega loro immediatamente cos'è il tuo marchio e cosa realizza.
Cerca di essere creativo, anche se è difficile farlo con un design così piccolo e lineare.
#4. Abbreviando
Trovare l'immagine ideale potrebbe non essere fattibile per ciò che fa la tua azienda. L'uso della prima lettera del nome della tua azienda o degli acronimi è una soluzione tipica per questo. Potresti anche decidere di abbreviare il nome della tua attività. Prova alcune varianti diverse e scegli quella più adatta alle tue esigenze.
#5. Coordinamento dei colori
Anche la selezione dei colori dovrebbe essere considerata. I colori contrastanti rendono semplice per l'occhio distinguere tra le forme e la caratteristica principale della tua favicon. Poiché le favicon sono così poche, devi rappresentare la tua attività per l'utente e la scelta del colore potrebbe essere importante. Ricorda che ogni browser differisce leggermente l'uno dall'altro. Alcuni, ad esempio, hanno uno sfondo grigio, nero o bianco che sarà coperto dalla tua favicon.
Favicon Generator
I migliori generatori di favicon su Internet sono elencati di seguito. Devi solo caricare la tua immagine favicon utilizzando le funzionalità disponibili per il generatore di favicon. L'immagine viene quindi convertita dal software del generatore nei formati favicon appropriati e resa accessibile per il download. Non ci vorrà molto per questo processo.
ICO e PNG sono i formati di file accettati per le favicon.
- Tutti i browser, incluso Internet Explorer, sono compatibili con ICO.
- Un altro formato popolare è PNG. Lo svantaggio principale è che un file PNG non sarà supportato da Internet Explorer.
Idealmente dovresti essere in grado di ottenere la tua favicon in entrambi i formati dal generatore selezionato.
#1. Favikon
È semplice creare una favicon in Favikon. Per creare un'icona, basta caricare un'immagine, ritagliarla e ottenerla nel formato ICO o PNG. Favikon consente solo una dimensione, che è 16 × 16 pixel, il che è uno svantaggio.
#2. Favicon.io
Puoi creare una favicon con Favicon.io da zero, un'immagine, un logo o un'emoji. Prima di scaricarlo, puoi visualizzarlo in tre diverse dimensioni. Il risultato è disponibile per il download nei formati ICO e PNG in una varietà di dimensioni.
#3. Favicon.ico e generatore di icone per app
Puoi caricare un'immagine PNG o JPG e utilizzare questa applicazione gratuita per convertirla nei formati ICO e PNG in una varietà di dimensioni. Salverai la tua favicon nella directory principale del tuo sito web dopo averla generata nel formato che desideri. La favicon può quindi essere aggiunta al tuo sito Web creando un collegamento HTML che punta al file.
Questo vale per i proprietari di siti Web indipendentemente dal fatto che abbiano utilizzato un framework di sviluppo come Bootstrap CSS o sviluppato il loro sito da zero, è fondamentale notare. La procedura differirà in modo significativo se hai utilizzato un costruttore di siti Web o un CMS come WordPress o alternative a WordPress.
Dimensione favicon
Una favicon dovrebbe avere una dimensione di 16×16 pixel. Vengono visualizzati in questo modo nelle barre degli indirizzi, negli elenchi di segnalibri e nelle schede del browser. Crea la tua favicon in più di una dimensione, idealmente. Su display più grandi, vedrai versioni opportunamente ridimensionate anziché la versione 16 × 16 allungata.
Di seguito sono mostrate le dimensioni delle favicon più popolari e i loro usi speciali.
- 16×16: La dimensione delle favicon del browser.
- 32×32: La dimensione delle icone dei collegamenti sulla barra delle applicazioni.
- 96×96: La dimensione delle icone dei collegamenti sul desktop.
- 180×180: La dimensione delle icone touch di Apple.
- 300×300: La dimensione richiesta da Squarespace.
- 512×512:La dimensione richiesta da WordPress.
Le favicon sono importanti per la SEO?
Sebbene le favicon non siano direttamente responsabili del tuo SEO, sono indirettamente responsabili e rappresentano una tecnica cruciale per aumentare la tua posizione nei motori di ricerca. Ecco alcuni esempi di come l'utilizzo di una favicon potrebbe migliorare il tuo SEO:
#1. I siti Web di facile utilizzo portano a un maggiore utilizzo
L'usabilità del tuo sito web aumenta indirettamente i suoi ranghi nei motori di ricerca. Rendendo il tuo sito Web facile da identificare e navigare, una favicon nelle schede del browser, nei segnalibri, negli archivi storici e in altri luoghi fa risparmiare tempo agli utenti e aumenta la possibilità che interagiscano con il tuo sito web.
Di conseguenza, più persone visiteranno il tuo sito Web per periodi più lunghi, il che aumenterà il traffico e aumenterà il tuo SEO.
#2. Segnalibri
Hai un vantaggio rispetto ai siti Web senza favicon. Per i siti Web che sono stati aggiunti ai segnalibri online, il browser Google Chrome tiene conto di determinati fattori di ranking della ricerca. Senza una favicon, il tuo sito web potrebbe non avere la possibilità di essere aggiunto ai segnalibri sul browser Chrome, che sarebbe uno dei tanti segnali indiretti utilizzati per determinare il ranking di ricerca.
Inoltre, avere il tuo sito web aggiunto ai segnalibri e quindi distinguersi visivamente in quell'elenco di segnalibri grazie alla tua favicon aumenta la probabilità che gli utenti tornino ad esso. Tutto ciò migliora la SEO e i visitatori del tuo sito web.
#3. Branding e visibilità
Gli utenti assoceranno il tuo marchio alla tua favicon perché è una rappresentazione visiva del tuo sito web e della tua azienda. La SEO è tutta una questione di marketing e branding, e più visitatori possono vedere il tuo sito web e ricordarti, più è probabile che ci clicchino sopra.
Come aggiungere una favicon in HTML
Una volta che la tua favicon è stata prodotta, devi indicare ai browser e ad altre applicazioni basate sul Web dove trovarla. Devi raggiungere questo obiettivo includendo una riga di codice nel file area pertinente del file HTML.
Ad esempio, supponi di aver salvato il tuo file PNG come "favicon.ico". Quindi, inserisci il seguente frammento di codice tra ciascuno dei tuoi file r </head> tag:
Tieni presente che, sebbene sia consuetudine, non è necessario che la tua favicon si trovi nella directory principale del sito. Assicurati solo che la proprietà href sia corretta se l'hai salvata altrove. Dovresti digitare se lo hai salvato nella sottocartella "immagini".
Immaginiamo che tu abbia prodotto varie dimensioni di favicon. Includendo una riga di codice per ogni dimensione nel file area pertinente del tuo file HTML, puoi caricarli tutti sul tuo sito web.
Ad esempio, aggiungeresti la seguente riga di codice per creare una versione 16×16, 32×32, 48×48 e 180×180:
Quali formati devo utilizzare per una favicon?
Ora ci sono alcune altre opzioni di formattazione, a differenza di quella precedente, quando una favicon doveva essere nel formato ICO di Windows. Ecco uno sguardo più da vicino a ciascuno di essi:
- Windows ICO: l'ICO è di gran lunga il tipo di file più comunemente supportato. Il vantaggio dell'ICO è che può supportare varie profondità di bit e risoluzioni, il che funziona in modo eccellente ed è particolarmente utile per Windows. Inoltre, ICO fornisce un'icona a 32 pixel per la barra delle applicazioni di Windows 7 che funziona con Internet Explorer. Inoltre, è l'unico formato che salta l'elemento.
- PNG: ci sono diversi usi per il formato PNG. Un file PNG può essere creato senza software aggiuntivo, rendendolo incredibilmente facile da usare. Viene fornita la dimensione del file più breve ed è supportata la trasparenza alfa. Tuttavia, uno svantaggio significativo di questo design è che Internet Explorer supporta solo i file ICO e non apre i file PNG.
- SVG: questo formato può essere utilizzato ed è supportato dai browser Opera.
- GIF: a parte la compatibilità con i browser più vecchi, questo formato non ha vantaggi. Sebbene renderanno gli utenti più evidenti, hanno anche la propensione a infastidire e la convinzione schiacciante è che non siano affatto vantaggiosi.
- JPG: sebbene sia possibile utilizzare JPG, è meno popolare e non offre lo stesso livello di qualità di risoluzione di PNG. Il JPEG perde anche tutti i suoi vantaggi a causa delle dimensioni modeste della favicon.
- APNG: questa è una variante animata di PNG e, sebbene Firefox e Opera possano supportarla, presenta gli stessi inconvenienti della GIF animata in termini di distogliere gli spettatori dalla loro interfaccia.
Come ottengo una Favicon?
Per aggiungere una favicon al tuo sito Web, salva l'immagine nella directory principale del tuo server Web o in una nuova cartella denominata immagini che crei nella directory principale. "favicon.ico" è un nome tipico per un'immagine favicon.
A cosa serve una favicon?
Migliorare l'esperienza dell'utente. La funzione principale di una favicon è rendere più facile per gli utenti riconoscere istantaneamente una pagina quando hanno diverse schede aperte nella stessa finestra del browser. Gli utenti possono riconoscere e accedere rapidamente al tuo sito web se ne crei uno con una favicon.
Una favicon è uguale a un logo?
Rispetto ai loghi, le favicon sono sostanzialmente minuscole. Come favicon, alcune aziende utilizzano una versione ridotta del loro logo, tuttavia, questo non è sempre efficace. La maggior parte dei loghi utilizza immagini e testo, ma le favicon sono troppo piccole per accoglierli.
Qual è un esempio di favicon?
La nostra favicon è la fantasia P che può essere vista sulla scheda a sinistra della barra degli URL sul sito web di ProCreator.
Posso usare il mio logo come favicon?
SÌ. Come favicon, la maggior parte dei siti Web utilizza spesso il proprio logo. Puoi facilmente creare un logo per il tuo sito web con il creatore di logo gratuito se non ne ha già uno.
Quali sono le regole per la favicon?
Linee guida per creare favicon fantastiche:
- Garantire la semplicità.
- Mantieni la familiarità.
- Usa meno testo o caratteri possibile.
- Considera il colore.
Conclusione
Nonostante le loro piccole dimensioni, le favicon hanno un grande impatto. Le favicon sono fondamentali per il successo della tua azienda nel frenetico mondo digitale di oggi poiché forniscono al tuo sito Web un'identità visiva online e aiutano a creare la migliore esperienza utente possibile. La parte bella è che la creazione di favicon è semplice.
Articoli Correlati
- COME AGGIUNGERE AI SEGNALIBRI: modi rapidi e semplici per aggiungere ai segnalibri qualsiasi pagina
- 2 modi rapidi per aggiornare i tuoi vecchi file PDF
- PUBBLICITÀ SU BANNER: Come funziona con esempi
- LOGO LINKEDIN: significato, storia, carattere e influenze del design
Riferimenti
