Perché la favicon è essenziale per il vostro sito web

Hai una favicon personalizzata per il tuo sito web? In caso contrario, dovresti davvero averne uno.

Il nome potrebbe non suonare un campanello per te, ma lo vedi regolarmente sul Web, che si tratti di app, social media, siti Web, ecc.

La sensazione che questa piccola icona non importi molto sembra essere diffusa tra molte persone. Tuttavia, rimarrai sorpreso dal suo ruolo in una buona strategia di branding.

In questo articolo tratterò tutto ciò che devi sapere sulle favicon: 

• cosa sono; 
• Come ti aiuteranno;  
• Migliori pratiche per il loro utilizzo; 
• Come aggiungerli al tuo sito web; 
• E altro ancora!

Capitolo 1: Cos’è una favicon ea cosa serve?

Dopo aver letto questo capitolo, avrai una perfetta conoscenza delle caratteristiche, dell’importanza e di dove trovare le favicon.

1.1. Favicon: Che cos’è?

Il termine favicon deriva dalla combinazione delle parole “Favorite” e “Icon”, che in francese potrebbero essere tradotte come “Iconepreferred”. Come suggerisce il nome, la favicon è una piccola icona di 16×16 pixel che svolge funzioni di branding per il sito web. 

Viene visualizzato su browser Web e sistemi operativi in ​​diversi modi.

Il suo scopo principale è aiutare i visitatori a individuare una pagina Web più facilmente, soprattutto quando sono aperte più schede o in elenchi di preferiti. 

Date le loro piccole dimensioni, le favicon funzionano meglio quando sono immagini semplici o quando sono composte da uno a tre caratteri di testo.

Le favicon non devono essere confuse con i loghi aziendali, anche se a volte loghi e favicon sono simili. 

Il più delle volte, a causa delle dimensioni ridotte e della risoluzione delle favicon, una significativa riduzione del logo potrebbe non essere allettante. 

Potrebbe portare a una favicon molto diversa dal logo originale dell’azienda, al punto da risultare addirittura irriconoscibile.

In origine, la favicon era un file chiamato favicon.ico, inserito nella cartella principale di una directory di un sito web. 

È stato utilizzato per la prima volta nel 1999 da Microsoft in Internet Explorer 5 per contrassegnare gli indirizzi preferiti di ciascun utente (segnalibri).

Fonte : Bjoernsworld

, però, è stato poi adottato da tutti i browser per la navigazione web, tanto da diventare un vero e proprio standard.

Negli ultimi 20 anni, la favicon ha continuato ad evolversi ed è ancora più popolare oggi.

Se non avete ancora capito cos’è una favicon, sicuramente l’avrete incontrata più volte durante la navigazione in Internet.

Ad esempio, quando accediamo a un sito Web da un computer, nella scheda del browser viene visualizzata un’icona (che chiamiamo favicon) che indica il sito Web aperto.

Questa stessa icona viene visualizzata in molti altri luoghi, ad esempio accanto all’indirizzo di un sito Web, nella cronologia di navigazione e nell’elenco dei siti. preferiti, solo per citare alcuni esempi.

Solitamente la favicon viene creata dal logo del sito web o dal marchio associato al sito, anche se non è obbligatorio. 

Una volta creato, questo file (o insieme di file) viene inviato al sito. Il download può essere effettuato in diversi modi e utilizzato dai browser web.

1.2. Quali sono le caratteristiche di una favicon?

Il file favicon è solitamente un file .ico da 16×16, 32×32 o 48×48 pixel. Se lo si desidera, è anche possibile utilizzare un file .gif o .png, ma non è garantita la piena compatibilità con alcune versioni precedenti di Internet Explorer.

È anche possibile utilizzare una favicon animata (questa è una gif animata comune). Tuttavia, per una piena compatibilità, è consigliabile utilizzare un file .ico, png e non una gif animata.

1.2.1. Dimensioni ideali delle favicon

Le immagini per le favicon dovrebbero essere 16×16 pixel. Puoi ridimensionare una foto esistente o creare una piccola immagine specificatamente da utilizzare come favicon. 

Quando ridimensioni una foto più grande per renderla così piccola, spesso perderai dettagli importanti o finirai con un’immagine sfocata. 

Per evitare ciò, dovresti probabilmente apportare alcune modifiche dopo aver ridimensionato la foto più grande. Dove, inizia con una tela 16×16 per evitare del tutto problemi di ridimensionamento.

La dimensione della favicon varia molto, soprattutto considerando il gran numero di schermi, sistemi operativi e dispositivi su cui viene visualizzata.

Indipendentemente dalle dimensioni, vale la pena ricordare che la favicon è sempre un’immagine quadrata.

Un formato comunemente usato è 16×16 pixel, ma si consiglia di rendere disponibili diverse dimensioni in modo che la favicon possa essere utilizzata su quanti più supporti possibili. 

Ad esempio, i display Retina disponibili su alcuni iPad, iPhone e computer Apple richiedono immagini con più pixel.

Fonte : Appleinsider

Richiedono immagini con più pixel rispetto ai normali desktop e laptop. Lo stesso vale per gli smartphone Android.

Infatti, sebbene l’icona non sia necessariamente visualizzata in grandi dimensioni, alcuni schermi hanno una densità di pixel per pollice maggiore. Pertanto, la creazione di una favicon con meno pixel disponibili potrebbe far apparire l’icona meno chiara.

Sebbene ci siano molte forme e dimensioni per la favicon, non è necessario diventare un maestro in Photoshop o Illustrator per avere questa icona personalizzata sul tuo sito web. 

L’inserimento di una favicon è abbastanza semplice nella maggior parte dei casi e di solito vengono fornite le dimensioni.

1.2.2.file immagine Favicon

In passato, la favicon doveva essere un file con estensione .ICO, ma attualmente è possibile utilizzare diversi formati. 

D’altra parte, ogni browser supporta una certa varietà di formati di file da utilizzare come favicon, il che finisce per limitare le opzioni.

Poiché l’elenco dei formati e dei browser è molto lungo, menzionerò le opzioni più comuni, così non ti senti perso quando crei una favicon. 

Per questo prenderò in considerazione i browser più diffusi:

• Google Chrome;
• bordo;
• Firefox;
• Safari;
• Internet Explorer;
• Musica lirica.

 Quindi, i principali formati di file supportati da questi browser:

• formato .ICO;
• formato .PNG;
• Formato .GIF.

Tuttavia, ci sono browser che supportano anche:

• Il formato .JPEG;
• E il formato .SVG. 

È anche possibile utilizzare altri tipi di file, ma con il rischio che l’immagine non venga visualizzata in uno o più browser. Lo stesso vale con le versioni precedenti dei browser, che offrono un supporto limitato.

Per evitare problemi nella visualizzazione della favicon del tuo sito web, ti consiglio di utilizzare un formato comune, come ad esempio:

• formato .ICO;
• E il formato .PNG o .GIF.

1.2.3. Cosa rende efficace una Favicon?

Una favicon efficace è quella che riflette gli stessi colori del tuo sito web o del tuo logo. È come l’ultimo pezzo di un puzzle.

Una pratica comune è ridimensionare il tuo logo fino alla dimensione ideale utilizzata per la favicon. Tuttavia, alcuni loghi non sono adatti per la visualizzazione in dimensioni così ridotte. 

Se questo è il tuo caso, puoi scegliere di far passare attraverso una favicon solo alcune delle caratteristiche dell’identità visiva del tuo brand, come forme e colori.

Puoi, ad esempio, prendere una singola lettera dal tuo logo e trasformarla in una favicon. Questo è esattamente ciò che stanno facendo Amazon e Facebook.

1.3. Dove viene visualizzata la favicon?

Le favicon si trovano accanto a tutto ciò che identifica il nostro sito web.

Le posizioni in cui viene visualizzata la favicon possono variare a seconda del browser e del dispositivo utilizzato dall’utente per accedere a un determinato sito Web. 

Sui computer e nei principali browser, la favicon può essere visualizzata in:

• La scheda del browser;
• L’elenco dei segnalibri; 
• La barra dei collegamenti;
• Il collegamento sul desktop; 
• cronologia di navigazione;
• L’elenco di navigazione della barra degli indirizzi; 
• Applicazioni della barra degli strumenti;
• Barre di ricerca.

Potrei aver dimenticato di citarne alcuni, ma puoi farti una buona idea.

La favicon viene visualizzata anche sui dispositivi mobili, quali:

• Smartphone;
• Le compresse;

Ciascun sistema operativo supporta e visualizza l’icona in modo diverso. 

Uno sguardo alle immagini qui sotto chiarirà tutto meglio di mille parole. Ecco alcuni esempi dettagliati di dove viene visualizzata la favicon:

1.3.1. Nella scheda del browser 

Ciascun browser visualizza la favicon in modo diverso. In questo esempio di Google Chrome, possiamo vedere la favicon utilizzata per identificare le pagine aperte nel browser.

Ciascuna scheda contiene l’icona corrispondente al sito Web in questione. Quando ci sono poche schede aperte, è visibile anche il nome della pagina, come nel caso seguente:

1.3.2. Nella barra degli indirizzi del browser

In quest’altro esempio abbiamo il browser Safari, accessibile da un computer. Quando fai clic sulla barra degli indirizzi, Safari mostra l’icona del sito Web accanto all’URL, cosa che Chrome non fa.

Durante la visualizzazione dell’elenco dei siti preferiti, il browser visualizza anche le icone, come mostrato nell’immagine in basso (a sinistra).

Google Chrome non mostra la favicon prima dell’URL della pagina, anche quando clicchiamo sulla barra degli indirizzi. 

Chrome indica invece se il sito è sicuro, visualizzando un lucchetto.

Cosa fa anche Safari. Per questo, il sito Web deve disporre di un certificato di sicurezza SSL correttamente installato su di esso.

Inoltre, attualmente è essenziale disporre di un certificato di sicurezza SSL su qualsiasi sito web.

Oltre a garantire lo scambio di informazioni tra l’utente e il sito Web, SSL contribuisce anche a un migliore posizionamento del sito Web sul motore di ricerca di Google. Se non l’hai già fatto, dai un’occhiata a questo articolo per scoprirlo. perché e come passare da http a https. 

Sebbene Chrome non mostri la favicon nell’URL, Chrome mostra l’icona nell’elenco di ricerca durante la digitazione di un indirizzo.

Questo elenco contiene le pagine che abbiamo già visitato e suggerimenti per le ricerche su Google. La stessa cosa accade quando accediamo alla cronologia di navigazione. Vedi un esempio nell’immagine qui sotto.

1.3.3. Nella sezione dei preferiti

È normale che gli utenti aggiungano i propri siti preferiti a una sezione dei preferiti, nota anche come “segnalibri”. Ogni browser organizza e visualizza i segnalibri in modo diverso, ma il funzionamento è simile. 

Nell’esempio seguente abbiamo la sezione dei segnalibri di Chrome, quando vi si accede dal computer. Tieni presente che visualizzano anche icone accanto ai loro indirizzi preferiti.

Nonostante il diverso aspetto, è possibile accedere alla maggior parte di queste informazioni anche tramite telefono cellulare. E in alcuni casi mostra anche l’icona del sito web (favicon). 

1.3.4. Nella schermata iniziale del browser

Quando apriamo una nuova finestra o scheda del browser, è comune vedere una schermata iniziale, da cui abbiamo iniziato a navigare. 

Di solito contiene collegamenti a siti Web preferiti o visitati di recente, a seconda della configurazione di ciascun utente.

In Chrome è possibile personalizzare questo aspetto, e le pagine aggiunte in questa sezione avranno una scorciatoia, la cui immagine viene caricata dalla favicon del sito web selezionato.

Internet è in continua evoluzione, così come i browser. La cosa più importante quindi non è avere l’elenco esatto dei luoghi in cui appare la favicon, ma conoscere l’importanza di avere una favicon sul tuo sito web. 

Questo mi porta al Capitolo 2 di questo articolo.

Capitolo 2: Perché dovresti aggiungere una Favicon al tuo sito?

Includere una favicon nel tuo sito è più importante di quanto potresti pensare a prima vista. Alla fine di questo capitolo, saprai:

• L’importanza di aggiungere una favicon al tuo sito web;
• L’impatto della favicon sulla SEO;
• Aggiornamento dei risultati di ricerca di Google per includere le favicon.

2.1. Quanto è importante la favicon per un sito web?

Hai bisogno di una favicon? La risposta è si. Ogni sito web deve essere associato ad una favicon. 

A causa del fatto che ogni browser richiede questo file, vedrai un errore 404 se non è presente. 

Favicon.ico risiede nella root del server, quindi ogni volta che il browser richiede questo file, vengono inviati dei cookie per la root del server.

Le favicon sono molto importanti per il marketing visivo e per connettersi con i visitatori del tuo sito web.

L’importanza della favicon, quindi, non è solo estetica, ma anche funzionale.

Svolge un altro ruolo molto importante sul tuo sito: 

• aiuta a rafforzare il marchio del sito;
• Migliora l’esperienza dell’utente;
• Ti permette di acquisire credibilità e fiducia con gli utenti di Internet;
• Facilita il monitoraggio dei visitatori; 
• Risparmia tempo per l’utente;
• Semplifica la ricerca nell’elenco dei preferiti.

Ecco maggiori dettagli sui vantaggi che troverai aggiungendo favicon al tuo sito web.

2.1.1. Aiuta a rafforzare il marchio del sito

Sappiamo tutti l’importanza dei loghi. È ciò che ci collega visivamente a un’azienda specifica. 

Cosa sarebbe McDonald’s senza i fiocchi d’oro?

Oppure, Twitter senza l’uccellino azzurro?

Che sia derivata dal logo della tua azienda o da una rappresentazione visiva completamente nuova, la favicon funzionerà come un logo in miniatura. 

Integrando l’icona di un sito web, puoi aumentare significativamente il valore di riconoscimento del tuo sito web. 

Soprattutto quando un utente desidera salvare il tuo sito Web sulla schermata iniziale del proprio dispositivo mobile o impostare un segnalibro. 

Quando si inserisce la favicon, il marchio viene visualizzato ogni volta che l’utente accede o favorisce il sito in questione. 

Poiché la favicon viene visualizzata in diversi punti del browser, il visitatore del sito Web potrebbe visualizzare il contrassegno più volte. 

Può essere: 

• Nelle schede; 
• Nella barra degli indirizzi; 
• Nella cronologia di navigazione; 
• In tutti gli altri posti che ho già menzionato. 

2.1.2. Aiuta l’utente a identificare il sito

Quando un utente ha più schede/schede aperte, la favicon rende più facile distinguere tra diversi siti. Se un sito Web non utilizza una favicon, verrà visualizzata semplicemente un’icona a forma di globo accanto al nome del sito Web.

Come utenti di Internet, sappiamo che è comune avere più schede aperte contemporaneamente su un browser. A volte al punto che non vedi altro che le icone sulle pagine. 

A questo punto, avere una favicon è essenziale per il visitatore del sito Web per identificare la pagina, tra molte altre. Altrimenti, potrebbe non finire quando torna alla pagina.

Allo stesso modo, inserendo un indirizzo visualizzato in precedenza o cercando una pagina tra i preferiti, l’utente può identificare rapidamente un sito web, se dotato di favicon. 

Una singola immagine viene solitamente percepita e riconosciuta dall’utente molto più velocemente di un semplice link testuale o di un’icona standard.

2.1.3. Credibilità e fiducia

Come abbiamo detto prima, se il tuo sito non ha una favicon, il browser web visualizzerà, per impostazione predefinita, un’icona sotto forma di un foglio bianco nella scheda del browser. 

Qualcosa del genere sembrerà incoscienza e porterà facilmente alla perdita di credibilità. In particolare, quando gli utenti ti confrontano con i tuoi concorrenti.

I clienti oggi giudicano i marchi in base all’aspetto professionale di un sito web. 

Quindi una favicon può avere un grande impatto sulla prima impressione, soprattutto se tutti i tuoi concorrenti hanno implementato favicon sul loro sito.

Un sito web con favicon trasmette professionalità e fiducia agli utenti che lo visitano.

Nell’esempio sopra, i siti senza favicon risaltano e non in senso positivo.

2.1.4. Visite di follow-up

Diciamo, ad esempio, che il visitatore del tuo sito aveva fretta la prima volta che ha visitato il tuo sito e ha scelto di aggiungerlo ai segnalibri per una visita successiva. 

Ora, è risaputo che le persone rispondono meglio alle immagini che al testo. 

Diciamo che alla fine decidono di recensire il tuo sito e per questo passano attraverso il segnalibro. Sarebbe fortunato per te se avessi una favicon riconoscibile come Google. 

Se non hai una favicon, potresti anche essere rimosso dall’elenco dei siti preferiti.

2.1.5. Risparmio di tempo per l’utente Le

favicon fanno risparmiare tempo agli utenti nell’identificazione di un sito Web da segnalibri, cronologia e altri luoghi in cui un browser inserisce quella favicon per una rapida identificazione.

Rende solo la vita più facile per il tuo utente.

2.1.6. Preferiti

Basti pensare ai bookmark, ovvero ai cosiddetti preferiti che l’utente memorizza nel browser per accedere facilmente alle risorse che ritiene meritevoli di essere visitate frequentemente. 

In questo caso, l’importanza della favicon è ovvia: un’immagine posizionata accanto al tuo URL aumenta notevolmente la possibilità che l’utente visiti regolarmente il tuo sito. 

Se dimentichi la favicon, il tuo sito non sarà legale! 

2.2. Favicon – SEO: I vantaggi di una favicon per la SEO

Se pensi che avere una favicon non abbia vantaggi SEO per il tuo sito web, hai ragione nel senso più stretto del termine. Non ci sono effetti SEO diretti per avere favicon. 

Tuttavia, ci sono effetti indiretti per la referenziazione delle tue pagine:

2.2.1. I siti Web intuitivi portano a un maggiore utilizzo

Avere un sito Web facile da usare migliora indirettamente il posizionamento nei motori di ricerca. 

Avere una favicon visibile nelle schede del browser, nei segnalibri, negli archivi cronologici e simili semplifica notevolmente la navigazione degli utenti.

Questo li aiuta a risparmiare tempo nel riconoscimento del sito, consentendo loro di identificare e navigare nel tuo sito web senza ulteriori difficoltà. Aumenta anche la probabilità di interazione.

Con una buona soddisfazione degli utenti, puoi beneficiare di una permanenza più lunga sul tuo sito web di tanto in tanto. 

Questo segnala agli algoritmi di Google che stai andando bene e stai dando alle persone le risposte giuste alle loro domande.

Un buon segno che sicuramente i motori di ricerca afferreranno, migliorando il tuo posizionamento SEO.

2.2.2. Evidenzia il marchio nella pagina dei risultati di Google (SERP)

Questo elemento è di grande importanza, in quanto ha a che fare con la visibilità dei siti sul motore di ricerca di Google.

Alcune settimane fa, la favicon è stata visualizzata su alcune pagine dei risultati dei motori di ricerca, dando più risalto ai siti che hanno questa icona personalizzata.

Fonte: Woorank

Google potrebbe ripristinarlo in un secondo momento. 

Tieni presente che la favicon è una bandiera, la rappresentazione visiva del tuo sito web e della tua attività. Pertanto, gli utenti nel tempo possono identificare il tuo marchio in base alla favicon che utilizzi.

Parte della SEO si concentra sul branding e più il tuo sito web è riconoscibile, più è probabile che gli utenti facciano clic su di esso e si ricordino di te.

2.2.3. L’influenza della favicon sul tempo di caricamento di un sito Web

Quando un sito Web viene chiamato a caricare, il browser cerca una favicon predefinita. Se non ne hai uno salvato, può potenzialmente aumentare il tempo di caricamento della pagina. In casi estremi, una favicon mancante può persino portare a un messaggio di errore 404.

2.2.4. Svantaggi delle favicon

Ma le favicon non sono prive di problemi.

In particolare, i burloni si divertono molto ad aggiungere favicon che, ad esempio, consentono loro di fingere che i loro risultati organici siano un annuncio di Google o impersonare un’altra azienda.

Nella maggior parte dei casi, queste favicon scherzose sono relativamente innocue. 

Tuttavia, è diventato immediatamente chiaro che i truffatori possono utilizzare questa funzione come un modo per segnalare fiducia e indurre gli utenti a fare clic su siti non affidabili.

Inoltre, i gruppi di odio si sono affrettati ad aggiungere una favicon con la svastica al loro sito web. Questo ha subito segnalato a Google che dovevano imporre alcune regole e regolamenti.

2.3. Favicon per dispositivi mobili: l’importanza delle favicon per

dispositivi mobili Un sito Web ottimizzato per dispositivi mobili necessita anche di una favicon? Perché è ancora importante? Dopotutto, le favicon di solito non vengono visualizzate nella finestra del browser di uno smartphone.

Se, invece, si tratta di un dispositivo con uno schermo più grande, come un tablet, la favicon sarà nuovamente visibile. Pertanto, dovresti assolutamente includere una favicon quando progetti un sito Web ottimizzato per dispositivi mobili.

Ma c’è un altro motivo: smartphone e tablet hanno bisogno di una favicon.

Ad esempio, se desideri salvare un determinato sito Web sulla schermata iniziale del tuo dispositivo mobile.

La home page del sito Web corrispondente viene quindi visualizzata sotto forma di un’icona touch.

A causa dell’elevato numero di sistemi diversi, è necessario fornire quattro diversi tipi di favicon:

• Per i browser attuali, è necessario salvare la favicon come grafica di rete portatile (favicon.png);
• I browser meno recenti necessitano della classica favicon come file ico (favicon.ico);
• I browser per dispositivi mobili basati su Android Chrome e iOS Safari utilizzano l’icona Apple touch;
• Per Internet Explorer ed Edge, è necessario fornire la grafica per i riquadri (riquadri di Windows 8).

Le icone Apple Touch e i riquadri di Windows (riquadri di Windows 8), in particolare, richiedono una grafica a risoluzione più elevata.

A seconda del dispositivo e della versione, le icone sono disponibili nelle seguenti dimensioni:

• 57 × 57 px;
• 60×60px;
• 72×72px;
• 76×76px;
• 114×114px
• 120×120px;
• 128×128px;
• 144×144px;
• 152×152px.

Per i riquadri di Windows 8, sono necessari grafici delle dimensioni:

• 70 × 70 px;
• 144×144px;
• 150×150px;
• 310×150px;
• 310×310px.

Con un generatore di favicon, puoi creare le diverse versioni in modo rapido e semplice.

2.3.1. Google aggiorna i risultati di ricerca mobile per includere le

favicon Maggio 2019, Google ha annunciato un nuovo design di ricerca mobile che mostra la favicon negli snippet di ricerca.

Il design aggiornato rende i risultati di ricerca mobili di Google più simili a un newsfeed.

Ciò significa che quando un utente inserisce una query di ricerca, vede un’anteprima dei post di vari editori di notizie su un determinato argomento.

Google ora offre favicon nei risultati di ricerca mobile:

Fonte: Le Favicon Resoneo

sono fondamentali qui, poiché Google si sforza di enfatizzare la fonte delle notizie promosse nei suoi risultati di ricerca organici.

L’idea è che i siti Web possano controllare il proprio nome e icona, ma quelli con il riconoscimento del marchio come un collegamento alla BBC o al New York Times possono distinguersi da un sito Web senza alcuna reale influenza.

Il che è fantastico, perché offre ai SEO un altro modo per creare il riconoscimento del marchio nelle SERP mobili e gli utenti avranno più difficoltà a identificare i contenuti dei loro siti Web preferiti dai loro telefoni.

Capitolo 4: Primi passi prima di progettare e creare una favicon 

Ci sono molte cose da considerare quando si progetta e si crea una favicon. Sebbene sia un’icona piccola e semplice, richiede alcune conoscenze per crearla. 

Alla fine di questo capitolo, avrai conoscenza delle nozioni di base essenziali durante la prima progettazione e costruzione di una favicon.

4.1.una favicon

Quello che segue è un breve elenco di cose da tenere a mente prima di creare la favicon del tuo sito.

4.1.1. Saggezza nell’uso dello spazio

A volte una favicon non può essere solo una versione più piccola del logo della tua azienda o del tuo progetto.

Va ricordato che la forma dell’icona è quella di un quadrato di 16 px per lato, in quanto questo è il formato accettato da tutti i browser (le eccezioni saranno trattate in seguito).

4.1.2. Semplicità richiesta

Sebbene la favicon sia l’aspetto visivo del tuo marchio, date le dimensioni di base, è necessario rendere il design il più semplice possibile. Le migliori favicon sono le più semplici. 

Grazie alle ridotte dimensioni della favicon e alla semplicità delle forme utilizzate, i colori sono fondamentali per attirare l’attenzione dei potenziali consumatori e per distinguersi. Troppi dettagli renderanno la favicon un segno disordinato e confuso.

4.1.3. Corporate Identity (Brand Identity)

La favicon è la rappresentazione visiva del sito Web, quindi dovrebbe dire visivamente agli utenti cosa rappresenta la tua azienda, qual è il tuo marchio e in generale cosa stavi facendo. 

Anche se tutto questo non è facile da ottenere con un design così piccolo e semplice, devi cercare di essere creativo. Gli esempi seguenti dimostrano la potenza di alcune di queste piccole ma creative icone.

A colpo d’occhio ea prima vista, è possibile identificare di cosa tratta il marchio e cosa rappresenta.

4.1.4. Scorciatoia per trovare il riepilogo giusto

Trovare la grafica perfetta per ciò che fa la tua attività potrebbe non essere fattibile.

Una soluzione comune a questo problema consiste nell’utilizzare le prime lettere del “nome dell’azienda” per creare un acronimo per la propria azienda.

Prendo l’esempio di Facebook e Wikipedia:

se l’azienda è già conosciuta grazie a una sigla del nome, è preferibile utilizzarla. Giocando con diverse varianti, è possibile scegliere la sigla più adatta a te.

Fonte : Questioni di Internet

4.1.5. Coordinamento colore favicon

Anche la scelta dei colori deve entrare in gioco: i colori contrastanti consentono all’occhio di riconoscere facilmente le forme e il punto focale della favicon.

A causa delle sue ridotte dimensioni e della necessità di rappresentare chiaramente la tua attività, l’uso del colore può diventare fondamentale. 

Infine, tieni presente che i browser sono progettati in modo diverso l’uno dall’altro. Ad esempio, alcuni posizionano la favicon su uno sfondo grigio, nero o bianco e non è possibile modificare questo parametro.

Prendiamo l’esempio del browser Chrome con sfondo grigio:

E quello di Firefox con sfondo nero:

4.1.6. Risoluzione dell’immagine

Le immagini Favicon funzionano meglio su tutti i browser se ridimensionate tra 100px x 100px e 300px x 300px, sebbene vengano visualizzate a 16px x 16px. 

Queste sono le dimensioni standard della favicon. Sebbene alcuni browser siano compatibili con file favicon più grandi, altri potrebbero no.

4.2. Favicon: Spiegazione della dimensione necessaria per ciascun browser

Come accennato in precedenza, generalmente si consiglia di creare favicon di dimensioni standard, poiché sono rappresentate da tutti i browser. 

Tuttavia, se invece vuoi creare una favicon per ogni possibile tipo di utilizzo, allora potrebbe essere utile seguire le linee guida seguenti:

• 16px: Per uso generico in tutti i browser, visualizzati agevolmente nella barra degli indirizzi, nelle schede o negli elenchi di segnalibri… ;
• 24px: sito bloccato in Internet Explorer 9;
• 32px: Nuova scheda in Internet Explorer, pulsante della barra delle applicazioni in Windows 7 e barra laterale “Leggi dopo” in Safari;
• 57px: schermata iniziale iOS standard (iPod Touch, iPhone di prima generazione a 3G);
• 72px: icona della schermata iniziale dell’iPad;
• 96px: Favicon utilizzata dalla piattaforma Google TV (icona di collegamento sul desktop);
• 114px: icona della schermata iniziale di iPhone 4+ (il doppio delle dimensioni del display Retina standard);
• 128px: icona Chrome Web Store;
• 195px: composizione rapida del browser Opera;

4.3. Favicon: spiegazione di ogni formato grafico utilizzabile 

A differenza del passato, quando una favicon doveva essere obbligatoria nel formato ICO di Windows, ora ci sono diverse opzioni di formattazione. 

Ecco una panoramica di ciascuno di essi in modo più dettagliato:

• Il file ICO : questo è di gran lunga il file più ampiamente supportato. I vantaggi dell’ICO sono che può contenere più risoluzioni e profondità di bit, che funziona molto bene ed è particolarmente utile per Windows. ICO offre anche un’icona da 32 pixel che è utile per la barra delle applicazioni di Internet Explorer di Windows 7. È anche l’unico formato che non utilizza l’elemento <link>.
• Il file ICO : questo è di gran lunga il file più ampiamente supportato. I vantaggi dell’ICO sono che può contenere più risoluzioni e profondità di bit, che funziona molto bene ed è particolarmente utile per Windows. ICO offre anche un’icona da 32 pixel che è utile per la barra delle applicazioni di Internet Explorer di Windows 7. È anche l’unico formato che non utilizza l’elemento <link>.
• PNG : il formato PNG è utile per diversi motivi. Non è necessario un software speciale per creare un file PNG, il che già lo rende molto più facile da usare. Consente la dimensione del file più piccola possibile e supporta la trasparenza alfa. Tuttavia, un grande svantaggio di questo stile è che Internet Explorer non supporta i file PNG, solo i file ICO.

• SVG : Questo formato può essere utilizzato anche ed è particolarmente supportato dai browser Opera.
• GIF : Questo formato grafico non offre alcun vantaggio al di fuori dell’utilizzo su browser meno recenti. Mentre attirano l’attenzione di più utenti, tendono anche a irritare i surfisti. L’opinione generale è che non siano in alcun modo un vantaggio.
• JPG : sebbene questo formato possa essere utilizzato, non è comunemente usato e non offre la stessa qualità di risoluzione di PNG. Inoltre, a causa delle ridotte dimensioni della favicon, JPEG perde tutti i suoi vantaggi.
• APNG : questa è la versione animata di PNG e sebbene possa essere supportata dai browser Firefox e Opera, presenta gli stessi problemi della GIF animata.

4.4. Cosa scegliere tra il formato favicon.ico e il formato favicon.png?

PNG è il formato previsto dalla maggior parte dei moderni sistemi operativi e browser. 

Di solito, ha anche una dimensione del file più piccola perché un file ICO è composto da più immagini. Forse il più grande vantaggio è l’accessibilità di PNG. 

È risaputo e può essere eseguito con qualsiasi strumento di immagine. Anche i PNG trasparenti, a differenza degli ICO trasparenti, sono regolati in questo modo. 

Ma il formato ICO continua a servire a uno scopo. A differenza di Edge e Internet Explorer 11, le versioni da 6 a 10 di Internet Explorer non supportano le favicon PNG. 

Per queste versioni del browser, dovrai inserire un file ICO chiamato favicon.ico nella cartella principale del tuo sito web. 

Per evitare problemi con Google Chrome e Safari, non è consigliabile fare riferimento a questo file tramite un tag di collegamento nella <head> del documento HTML.

Da Microsoft, queste versioni precedenti non supportano più un file ICO superfluo.

Ma poiché quasi tutti i browser supportano ancora questo vecchio formato e talvolta lo richiedono anche attivamente, è consigliabile includerlo sempre nella cartella principale.

Capitolo 5: Come creare una favicon professionale?

Questo capitolo spiega i diversi modi di creare una favicon, dai siti Web con un generatore di favicon online (gratuito ea pagamento), agli editor grafici professionisti.

Esistono diversi modi per creare una favicon:

• utilizzare un sito Web con un generatore di favicon online;
• Generatore di favicon con un plugin per WordPress;
• Disegna da zero utilizzando editor grafici professionali, come Photoshop, Illustrator o Inkscape.

Di seguito è riportato un elenco dei migliori servizi online che puoi trovare per creare la tua favicon perfetta in pochi minuti!

5.1. I migliori siti Web con un generatore di favicon online

Creare una favicon per il tuo sito Web può essere abbastanza semplice. Non è necessario assumere un designer o uno sviluppatore (se non sei uno dei due). 

Naturalmente, se puoi ottenere un aiuto professionale, è molto meglio. Tuttavia, voglio sottolineare che è un processo molto semplice e diretto che chiunque può eseguire in pochi minuti.

Di seguito elencherò alcuni siti Web che ti consentono di creare favicon semplicemente caricando un’immagine, come il logo della tua azienda, il progetto o il marchio personale. 

Non sono in un ordine particolare, poiché sono tutte ottime opzioni che ti consentono di creare un’icona favicon con pochi clic. Dopo aver creato una favicon con una di queste opzioni online, è possibile scaricarla e utilizzarla gratuitamente.

5.1.1. Favicon.io

Cominciamo con uno dei miei preferiti: Favicon.io. 

Questo è un piccolo strumento che può aiutarti a creare una favicon in pochi passaggi. 

Ti offre tre diverse opzioni per creare una favicon.

• Prima opzione:

icone di testo semplici. Scegli semplicemente una o più lettere. Scegli una determinata forma: circolare o quadrata (possibilmente rettangolare o con angoli arrotondati). 

Il generatore Favicon.io utilizza Google Fonts, che contiene oltre 800 caratteri. Imposta la dimensione del carattere, il colore del carattere, lo sfondo e la tua favicon è pronta. Per finire, scarica semplicemente il file .ico o .png. 

Ideale per startup o micrositi!

• Opzione due:

un’altra opzione disponibile è convertire un’immagine in un file .ico. In alternativa, puoi ovviamente caricare un logo o una grafica e convertirlo in una favicon.

• Terza opzione:

questo generatore di favicon gratuito ti consente di creare emoji. Queste favicon emoji sono molto interessanti. Seleziona un’emoji e incorporala come icona di un sito web nella tua pagina.

Un’altra cosa interessante è che esiste un enorme elenco di emoji, che puoi copiare e incollare per creare una favicon con emoji.

In breve, questo generatore di favicon gratuito ti consente di creare icone di favicon da testo, immagine o emoji. La favicon generata funziona per tutti i browser e le piattaforme.

5.1.2. Generatore di icone di favicon e app

Questo generatore di favicon gratuito è davvero facile da usare e ti dà la possibilità di caricare un file immagine. 

Poi, per scegliere tra la dimensione standard 16×16 px per browser web o una dimensione più grande adatta per Android, Microsoft e iOS.

Hai la possibilità di mantenere la dimensione corrente dell’immagine invece di ridimensionarla a un quadrato. 

Tieni presente che mantenere questa opzione abilitata potrebbe distorcere il risultato finale della tua favicon. Quindi è meglio assicurarsi che l’immagine sia già quasi quadrata.

Se in particolare desideri utilizzare la favicon per un sito web professionale, devi deselezionare la casella “Includi il tuo favicon.ico nella galleria pubblica”. 

Di conseguenza, la dimensione della galleria di icone di Favicon & App Icon è piccola, ma questa non è una barriera.

Lo strumento converte il tuo grafico in una raccolta di favicon nei formati più importanti e crea automaticamente il codice con cui puoi integrarle nel tuo sito web.

Quindi devi solo scaricare entrambi.

5.1.3. Real Favicon Generator.net

Il generatore di favicon reali permette di creare favicon per:

• Tutti i browser;
• Tutte le piattaforme;
• Tutta la tecnologia. 

Lo strumento offre un’ampia gamma di favicon compatibili con i browser e questo è dimostrato dal lungo elenco di versioni testate di icone create da questo strumento. 

In realtà, il generatore di favicon Real funziona su un lato come “Favicon-generator.org”.

Puoi convertire la grafica in favicon e lo strumento genererà anche il codice HTML necessario per inserire la favicon sul tuo sito web o applicazione.

Questo generatore offre anche un’interessante funzione speciale. Ha una sezione di anteprima di un simulatore di browser. 

Questo ti consente di vedere come apparirà la tua icona favicon su vari dispositivi e browser, una volta ridimensionata e convertita.

Ad esempio, se inserisci l’URL del tuo sito web nella casella di controllo, lo strumento controlla se una favicon è già incorporata nella pagina, quanto bene viene visualizzata in diversi browser e quali opzioni di ottimizzazione esistono.

Tuttavia, questo generatore di favicon ha solo la possibilità di selezionare un’immagine da convertire in un’icona di favicon.

 5.1.4. Favicon.CC

Favicon.cc è un creatore e generatore di favicon gratuito. Puoi usarlo per progettare la tua favicon da zero o per importare un’immagine che verrà convertita in una favicon.

Hai la possibilità di scegliere i colori da usare con un selettore colore e cambiare la trasparenza dell’icona.

C’è anche un’opzione per creare queste favicon con l’animazione. Sono inoltre disponibili parametri come l’animazione in loop, la modifica e l’eliminazione di immagini.

Inoltre, offrono un elenco di favicon creato di recente attraverso il loro sistema e anche un elenco delle favicon più votate per aiutarti a trarre ispirazione.

Questo generatore di favicon ha anche una modalità di anteprima in modo da poter vedere come apparirà la tua favicon una volta pronta.

5.1.5. FaviconGenerator.com

Questo è un semplice generatore di favicon gratuito in cui puoi caricare un’immagine e quindi scegliere il formato che desideri. Il suo utilizzo è molto semplice e facile per l’utente. Questa è una buona opzione se vuoi creare rapidamente un’icona senza dover affrontare il problema delle impostazioni.

Con questo generatore, puoi anche creare favicon retina che funzionano con i dispositivi touch Apple. Ci vuole lavoro extra, ma tutte le istruzioni sono sulla loro pagina web.

5.1.6. Favicomatic

Il sito web Favicomatic è un altro generatore di favicon gratuito molto facile da usare. Genera favicon, sia ICO che PNG (anche trasparenti).

Questo ti dà due diverse opzioni.

• Variante 1: carichi un’immagine o una grafica e la converti in un normale file .ico;
• Variante 2: crei una favicon per tutte le piattaforme comuni, incluse le app iOS e Android.

Ci sono anche impostazioni avanzate che puoi usare per specificare individualmente quali formati favicon vuoi usare. Hai anche la possibilità di scegliere e modificare il colore di sfondo e alcune opzioni di compatibilità avanzate.

Con Favicomatic puoi anche verificare rapidamente quanto bene la favicon è integrata nel tuo sito e quale potenziale di ottimizzazione c’è. 

5.1.7. Generatore di favicon Ionos

Il generatore di favicon Ionos ti consente di disegnare un’icona di favicon, utilizzare le iniziali o caricare un’immagine che desideri utilizzare per creare una favicon.

Il risultato è una favicon che funziona su tutti i browser e dispositivi. Ha anche una bella area di anteprima in cui puoi vedere rapidamente come apparirà la tua favicon live.

5.1.8. WebSite Planet

Molto facile da usare, questo generatore di favicon gratuito offre la possibilità di caricare un’immagine (JPG, PNG o GIF), o di scegliere da una galleria gratuita di favicon premade. Tutto quello che devi fare è caricare un’immagine in primo piano. 

Lo strumento converte qualsiasi JPEG, GIF o PNG in un file ICO. Quest’ultimo è supportato da tutti i browser web inclusi Chrome, Firefox, Internet Explorer e Safari.  

Potrebbe essere importante notare che se stai cercando icone favicon per la tua attività, probabilmente vorrai creare una favicon con il tuo logo o simili. Questo aiuta a creare un look molto coeso e più accattivante.

La scelta di una delle immagini predefinite potrebbe non essere adatta, soprattutto perché altri siti potrebbero utilizzare esattamente le stesse che hai scelto.

5.1.9. Generatore di favicon RedKetchup

Per questo generatore, c’è un’opzione per caricare un’immagine o crearne una con il testo.

Quando crei icone favicon con testo, ci sono tonnellate di impostazioni. Tra questi ultimi c’è la possibilità di modificare la famiglia di caratteri, la dimensione del carattere, il colore di sfondo, il colore del testo.

Inoltre, c’è una scala regolabile per cambiare il confine tra un quadrato e un cerchio. Quindi puoi ridimensionare il bordo per avere bordi arrotondati con rotondità diverse.

Ci sono anche altre opzioni di compatibilità tra i dispositivi.

5.1.10. Genfavicon

Creare icone favicon è facile con il generatore di favicon gratuito dal sito web Genfavicon.

Questo generatore di favicon gratuito è davvero impressionante. Quando carichi un’immagine, hai la possibilità di ritagliarla per farne una favicon.

C’è anche una finestra di anteprima per vedere come apparirà la tua nuova icona favicon nel browser di un utente.

Lo strumento funziona in modo abbastanza semplice. Puoi selezionare un’immagine da un computer o online e scegliere la dimensione della Favicon.

Sono disponibili 5 dimensioni delle icone. Puoi scegliere tra le opzioni di formato: 

• 16×16;
• 32×32;
• 48×48;
• 64×64;
• 128×128 pixel.

Ritaglia l’immagine se necessario e carica la tua favicon in formato .ico o png.

5.1.11. Favicon.pro

Crea icone favicon con il generatore di favicon gratuito dal sito Web Favicon.pro.

Ecco un’altra rapida opzione quando si tratta di un generatore di favicon gratuito. Quando carichi un’immagine per creare una favicon, puoi scegliere il formato immagine che desideri utilizzare: 

• 16×16;
• 32×32;
• 48×48;
• 64×64;
• 128×128 pixel.

FavIcon ti consente di convertire il tipo di file JPG, GIF, PNG in ICO e puoi usarlo per convertire le icone delle applicazioni, le icone del desktop e le favicon nei tuoi siti web.

5.1.12. Faviconr

Faviconr è un sito Web con un generatore di favicon per creare icone favicon gratuitamente.

Come Favicon.pro, Faviconr è un’altra opzione facile e veloce per un generatore di favicon gratuito.

Carica un file JPG, PNG o GIF e scegli se vuoi uno sfondo trasparente. Certo, puoi creare favicon trasparenti solo se il tuo file sorgente è anche un PNG o GIF trasparente. 

Fare clic sul pulsante, salvare il file e il gioco è fatto.

5.1.13. ICOConvert

Questo generatore di favicon gratuito è piuttosto unico perché dopo aver caricato un’immagine che desideri utilizzare per creare una favicon, puoi ritagliarla e modellarla.

Ci sono opzioni per modellare il bordo in una varietà di forme. Ciò include quadrato, forma del cuore, quadrato centrale, cerchio, forma del cuore angolato e un’opzione per scegliere un bordo bianco.

Puoi anche scegliere di scaricare la favicon come file ICO o PNG con diverse opzioni di formato, tra cui: 

• 16×16;
• 24×24;
• 32×32;
• 48×48;
• 64×64;
• 96×96;
• 128×128;
• 192×192;
• 256×256 pixel.

C’è anche un’opzione per creare icone favicon per computer Windows 7, 8, Vista e XP.

Inoltre, presenta opzioni per la compressione e la conversione di file PNG in SVG.

5.1.14. Generatore di favicon Wizlogo

Wizlogo è un’altra opzione facile per un generatore di favicon gratuito. Tutto quello che devi fare è selezionare un’immagine da caricare e quindi selezionare un file ICO 32×32 o un’icona favicon per Web, iOS, Windows e Android. E hai finito.

Wizlogo può essere utilizzato anche come creatore di loghi gratuito.

5.1.15. FavICO

FavICO è un’ultima opzione di base per un generatore di favicon gratuito. 

Carica un’immagine che desideri utilizzare per creare una favicon. 

Quindi, scegli tra una dimensione di 16 × 16 o 32 × 32 pixel e fai clic su Crea. 

E questo è tutto !

5.1.16. Dynamic Drive

Questo strumento consente di creare icone in formato .ico, .png e .gif. Puoi aggiungere trasparenza alle tue icone usando questo strumento (solo formati .gif e .pnf). 

Il sito offre anche ulteriori strumenti gratuiti come il generatore di gif animate. Questi strumenti possono essere utili se desideri icone gif animate per le favicon del tuo sito web.

5.1.17. Generatore di favicon DeGraeve

Ecco un altro generatore di favicon online veloce che ti offre varie opzioni di personalizzazione. 

Lo strumento supporta anche la trasparenza alfa. Il sito offre anche molti altri strumenti, ma non sono legati alla generazione di favicon. 

5.1.18. X-Icon Editor

X-Icon Editor è un’applicazione HTML5 che consente la creazione di icone ad alta risoluzione che faranno brillare il tuo sito web quando si accede con i browser.

Il servizio funziona così: puoi caricare un’immagine e scaricare la favicon già pronta (in sole 4 dimensioni: 16px, 24px, 32px, 64px) oppure puoi disegnare un’icona da zero. 

Molte opzioni di modifica sono disponibili mentre disegni. Puoi usare un pennello, una matita, un secchio di vernice, forme, ecc.

Nota: riceverai il tuo file solo in formato .ico.

5.1.19. Prodraw

Prodraw ha un generatore di favicon gratuito che supporta il caricamento di immagini nei formati JPG, PNG, GIF, BMP, TIF e TIFF. Scegli la tua immagine dal tuo computer e Prodraw la convertirà in un file .ico.

Le dimensioni dell’output vanno dalla dimensione dell’icona 16x16px più piccola alla dimensione dell’icona di Windows Vista 128x128px e tutto il resto. Puoi scaricare il file .ico e caricarlo sul tuo sito web.

5.1.20. Favikon

Lo strumento più semplice con l’opzione più piccola dell’intero elenco. Basta caricare un’immagine, ritagliarla e caricare la tua favicon in formato ico o png. 

Non ci sono opzioni di modifica oltre al ritaglio, ma se tutto ciò che devi fare è convertire un’immagine in un file .ico, questo strumento gratuito e facile da usare andrà benissimo.

Inoltre non puoi scegliere la taglia, riceverai la favicon nella taglia più piccola, che è l’impostazione predefinita.

5.1.21. Logaster

Il Logaster è un servizio online che può aiutarti a creare non solo la favicon del tuo sito, ma anche il logo. Ciò significa che puoi creare tutto in un unico posto in pochi minuti.

Se non hai competenze di progettazione o non sai come creare una favicon, prova a crearla utilizzando un software online, come Logaster:

• vai su Logaster  e clicca su “Crea una favicon”.
• Crea un logo. Logaster è un generatore di loghi online, che è anche un generatore di favicon. Quindi devi prima creare un logo e poi creare la favicon. Logaster ti fornirà la favicon di cui hai bisogno in base al tuo logo. Ma non preoccuparti, non ci vuole molto tempo o fatica.
• Inserisci il nome del tuo sito web, scegli il tipo di attività e scegli il logo che preferisci. Logaster genererà dozzine di loghi. Tuttavia, dovresti capire che il logo servirà come base per la tua favicon. L’obiettivo è creare una favicon, quindi non dedicare troppo tempo al logo, poiché può essere modificato in seguito. 
• Crea una favicon. Quando hai un logo, tocca “Crea una favicon con questo logo” nella pagina del logo.
• Scegli il design della favicon desiderato. Logaster genera dozzine di bellissime favicon pronte per l’uso. Scegli il design più adatto a te. L’anteprima ti consente di vedere come apparirà la tua favicon sul sito.
• Scarica la favicon e installala sul tuo sito web. A seconda del tema o della piattaforma che utilizzi, la tecnica di installazione potrebbe essere diversa.

Al termine, riceverai la favicon in formato .ico e PNG in varie dimensioni (16×16, 32×32, 96×96, 192×192). Sarà disponibile anche l’icona Apple Touch.

5.2. Il generatore di favicon con il plugin di WordPress

Se lavori con WordPress, puoi ovviamente anche installare un generatore di favicon come plug-in. Un plugin molto popolare per questo è, ad esempio: Favicon di Real Favicon Generator.

5.2.1. Favicon di Real Favicon Generator

Favicon di Real Favicon Generator permette di creare favicon adattabili a tutte le piattaforme. In pochi secondi, puoi configurare una favicon che funzioni bene con una varietà di sistemi operativi e browser.

Il generatore non solo crea copie di immagini con risoluzioni diverse, ma crea anche le dimensioni specifiche richieste per ciascuna piattaforma.

Ciò significa che non dovrai capire le ultime linee guida di compatibilità per ogni dispositivo su cui potresti voler visualizzare la tua favicon.

5.2.2. Heroic Favicon Generator

Heroic Favicon Generator converte le immagini dalla tua libreria multimediale in favicon compatibili su molti dispositivi. Va notato che questo plugin non è stato testato con le tre versioni più recenti di WordPress. Quindi devi testarlo attentamente.

Detto questo, questa è una soluzione praticabile per cambiare le tue favicon su siti Web che utilizzano versioni precedenti di WordPress, dove il personalizzatore del tema non è disponibile. 

Come puoi vedere, lo scopo principale di questi strumenti è creare una favicon. L’unica differenza è il percorso della creazione.

Hanno tutti il ​​loro stile. Quindi non ti resta che trovare quello più adatto a te in base ai tuoi gusti e ai tuoi obiettivi.

Se vuoi ispirazione, dai un’occhiata  questo sito che contiene una galleria di oltre 400 favicon.

5.3. Come creare un’icona favicon in Photoshop ?

Con così tanti strumenti disponibili per aiutarti a creare la tua favicon, perché vorresti intraprendere la strada difficile e crearla in Photoshop? 

Bene, se sei un designer e vuoi ottenere il massimo dalla tua favicon, questo è sicuramente il modo professionale per farlo. 

Essendo un designer, potresti anche essere più veloce con Photoshop che con uno qualsiasi dei generatori di favicon sopra elencati.

Ora il programma non supporta i file “ico”, ma puoi farlo scarica questo plugin da Telegraphics per portare a termine il lavoro.

Assicurati di installarlo prima di seguire il tutorial qui sotto. Photoshop non funziona senza di essa.

Fonte : Odwebdesign

Cerca l’opzione “ICO” nella casella “Salva con nome” di Photoshop per confermare che il plug-in è installato.

Una volta che la tua estensione è a posto, crea la tua favicon seguendo questo breve elenco di passaggi:

• Crea un nuovo documento in Photoshop selezionando la voce di menu “File” e l’opzione successiva “Nuovo”;
• Quindi, imposta la tela su 64 × 64 pixel o superiore. Questo per lasciare spazio sufficiente nel caso in cui l’icona cambi e per garantire che dopo la regolazione della dimensione del file di Google, la versione 16×16 rimanga il più chiara possibile;
• Quindi incolla il tuo logo nel documento e apporta le modifiche necessarie;
• Al termine, seleziona semplicemente dall’elenco a discesa il menu “Immagine” e l’opzione successiva “Dimensione immagine”. Quindi ridimensiona l’immagine a 16 × 16 pixel;
• Non dimenticare di fare clic su “Ricampiona immagine” e scegliere “Bicubic Sharper” per assicurarti che il logo non sia sfocato dopo la modifica;
• Se non ti piace il risultato finale, annulla le modifiche nel fango con “AltCtrl / AltCmd + Z” e continua a lavorare finché non sei soddisfatto;
• Per completare la tua favicon, non devi fare altro che cliccare sul menu “File” e cliccare sull’opzione successiva “Salva con nome”. Quindi ricorderai il file come “favicon.ico”. 

Ancora una volta, lavoro fatto!

5.4. Alcuni suggerimenti per creare una favicon impressionante

Quando si crea un’icona favicon, è importante seguire anche queste migliori pratiche:

• Design per abbinare l’aspetto generale del tuo sito web;
• È meglio utilizzare la stessa combinazione di colori utilizzata sul tuo sito web;
• In un pizzico, scegli uno o due colori per la combinazione di colori, non più di tre colori al massimo;
• Non utilizzare mai un’immagine casuale o un’immagine pixelata come favicon;
• Mantieni il design semplice: evita ombre, texture e parole;
• Usa linee e forme minimaliste, poiché questo è il modo migliore per creare una favicon chiara ed efficace;

• Dovrebbero essere semplici e non troppo eleganti per essere facilmente visibili in piccole dimensioni;
• Le icone delle favicon devono essere a colori a 8 o 24 bit;
• Il design delle icone delle favicon non dovrebbe contenere molte lettere;
• Sebbene tu possa avere uno sfondo trasparente, è importante notare che i dispositivi Apple non lo consentono;
• Le icone delle favicon dovrebbero corrispondere al tuo marchio e logo esistenti;
• Quando crei una favicon per il tuo logo, cerca sempre di utilizzare i vettori in modo da non perdere la qualità;
• Un consiglio interessante qui è quello di utilizzare la parte del tuo logo o marchio che riceve più attenzione. Nel caso di Google, ad esempio, è la prima “G”. Nel caso di Twaino, è il nostro piccolo albero simbolo. 

5.5. Le nuove linee guida di Google per le favicon

Secondo Google, i siti web devono seguire queste linee guida per visualizzare una favicon personalizzata:

• La home page e il file della favicon devono essere scansionabili da Google. Ciò significa che non possono essere bloccati;
• La tua favicon dovrebbe essere una rappresentazione visiva del tuo marchio, poiché lo scopo di una favicon è aiutare gli utenti a identificare il tuo sito Web durante la visualizzazione delle SERP;
• La tua favicon dovrebbe essere un multiplo di un quadrato di 48 pixel. Ciò significa 48 x 48 px, 96 x 96 px o 144 x 144 px o più, se lo desideri. Puoi anche inviare un file SVG;
• Qualsiasi file favicon valido è accettabile, purché soddisfi le specifiche di dimensionamento sopra descritte. Google si occuperà di questo ridimensionando la tua immagine a 16 x 16 pixel. La tua responsabilità è garantire che il tuo file sia corretto in qualsiasi risoluzione;
• L’URL della favicon deve essere stabile, il che significa che non è possibile modificare frequentemente l’URL;
• Google non visualizzerà favicon contenenti immagini inappropriate come simboli di odio e pornografia;
• Se Google trova la tua favicon inappropriata, sostituirà l’icona con una favicon predefinita.

In che modo Google emetterà sanzioni per aver violato le sue regole?

Sebbene le istruzioni siano abbastanza semplici, rimangono alcune domande riguardanti il come Google avviserà coloro che infrangono le regole.

Sulla base di ciò che abbiamo visto finora, sembra che Google stia apportando modifiche alla politica della favicon su base touch.

Coloro che violano le nuove regole perdono la possibilità di visualizzare una favicon personalizzata, ma non sembra avere un impatto sulle classifiche SERP.

Inoltre, non è chiaro quanto durerà la sanzione o come venga emessa.

Successivamente, possiamo probabilmente aspettarci che la penalità della favicon venga inclusa nel nuovo rapporto sulle azioni manuali di Google Search Console. Tuttavia, al momento non ci sono informazioni in merito.

Allo stato attuale, il processo di revisione delle favicon di Google si sta evolvendo. Attualmente si stanno avvicinando al processo come se fosse un’azione manuale di rich snippet. Tuttavia, ciò potrebbe cambiare presto.

Capitolo 6: Come aggiungere una favicon a un sito web?

Una volta che hai il tuo file favicon, installalo o aggiungilo semplicemente al tuo sito web. Per questo è necessario avere accesso ai file HTML del proprio sito web o della propria area amministrativa, nel caso di WordPress o di altri gestori di contenuti.

Alla fine di questo capitolo saprai:

• Installare la favicon sui siti personalizzati;
• Diversi metodi di installazione delle favicon sui siti WordPress;
• Installazione della favicon su Wix ;
• L’installazione della favicon su Shopify.

6.1. Installare la favicon su siti personalizzati o non WordPress

Dopo aver progettato la tua favicon, dovrai installarla in modo che possa essere visualizzata sul tuo sito web. Ancora una volta, è un processo molto semplice. 

Tutto ciò di cui hai bisogno per iniziare è la cartella principale del tuo sito web e uno strumento di modifica del testo che ti consente di modificare il codice HTML del tuo sito web.

Seguendo le linee guida di Google, ecco come impostarlo:

ora dovrai modificare il codice HTML del tuo sito Web in modo che i browser Web possano trovare la tua immagine favicon. Torna alla tua scheda FTP e carica il file “index.html” o “header.php” dal tuo server.

Se il tuo sito web è puro testo HTML, aggiungi il seguente codice nella sezione HEAD del file “index.html”:

<link rel=”shortcut icon” type=”image/x-icon” href=”[url favicon]” >

Può essere una delle seguenti stringhe:

• Icona di collegamento;
• Icona;
• Icona tocco mela;
• Apple-touch-icon-precomposto.

href rappresenta l’URL della favicon. Questo può essere inviato come percorso relativo (/example.ico) o come percorso assoluto (https://website.com/example.ico). 

Non dimenticare di salvare il file.

Nella maggior parte dei casi, i generatori di favicon gratuiti sopra elencati genereranno anche il codice di cui hai bisogno. Oltre al codice specifico per le impostazioni che hai scelto, ad esempio per le animazioni o la compatibilità. 

Quindi, se questo codice non funziona, puoi fare riferimento al generatore di favicon che hai utilizzato per creare una favicon per il tuo sito web.

Per qualsiasi altra modifica che potresti apportare al tuo sito Web, hai due opzioni:

• attendere che Google esegua automaticamente la scansione del sito Web;
• Invia una richiesta di indicizzazione per un aggiornamento più rapido.

6.2. Come aggiungere una favicon al tuo wordpress?

Se stai cercando un modo per aggiungere un’icona favicon al tuo sito WordPress, ci sono diverse opzioni:

• usalo Personalizzatore di WordPress. È molto facile da aggiungere favicon che passano attraverso il personalizzatore fintanto che il tema del tuo sito Web su questa opzione. Vai semplicemente su Aspetto > Personalizza nella dashboard del tuo sito, quindi vai su Identità del sito > Icona del sito.
• Carica una favicon attraverso la pagina delle opzioni del tema. Naturalmente, non tutti i temi hanno un pannello delle opzioni integrato. Tuttavia, se il tuo lo fa, allora hai un’altra opzione. Per trovare l’opzione di download, dovresti controllare la documentazione del tema o visitare la sua pagina delle impostazioni.
• Uso di un plugin. Se il tema che stai utilizzando non ti permette di inserire le favicon tramite il “Personalizzatore” o non ha un pannello delle opzioni integrato, puoi aggiungere queste favicon dai plugin. 

Questo metodo garantisce che l’icona del tuo sito Web sia del tipo di file corretto e soddisfi vari standard specifici del dispositivo. 

Diamo un’occhiata più da vicino a come aggiungere icone preferite usando questi tre metodi:

6.2.1. Utilizzo del Customizer di WordPress

Come accennato in precedenza, se il tuo tema supporta le favicon, puoi navigare facilmente in WordPress seguendo questa procedura: 

Aspetto > Personalizza > Identità del sito > Icona del sito:

Fonte : wpengine

Qui troverai suggerimenti per la dimensione delle icone preferite del tuo sito web. È davvero meglio creare l’immagine che si desidera utilizzare in anticipo e assicurarsi che sia della dimensione giusta.

Una volta terminato, puoi fare clic sull’opzione “Seleziona” e quindi scaricare il file:

Fonte: wpengine

Dopo averlo inserito nella libreria multimediale, otterrai un’anteprima di come apparirà la tua favicon nella scheda del browser o come icona di un’app mobile. 

Se necessario, puoi seguire gli stessi passaggi per cambiare nuovamente la tua icona preferita in un secondo momento.

6.2.2. Scarica tramite la pagina delle opzioni del tuo tema

Questo metodo dipende fortemente dal singolo tema che hai. Nelle versioni recenti di WordPress, i temi sono generalmente gestiti tramite un personalizzatore.

È vero che possono verificarsi alcune eccezioni, come i temi premium che hanno la propria pagina delle opzioni. Tuttavia, potresti essere indirizzato al personalizzatore anche se il tuo tema ha una pagina delle opzioni separata.

Ad esempio, il tema WordPress Twenty Nineteen non ha una pagina di opzioni separata, e quindi gestisce le favicon tramite il personalizzatore. 

in ogni caso, il Il tema Avada che è un tema WordPress premium, implementa una nuova voce di menu e ha una pagina delle opzioni del tema che ti consente di aggiungere direttamente una favicon:

Fonte : wpengine

Questa opzione fornisce anche funzioni di download specifiche per iPhone e iPad. Quindi tieni presente che non tutti i temi sono uguali. Ti consiglio di consultare la documentazione o di contattare lo sviluppatore in caso di dubbi.

6.2.3. Usare un plugin

Usare un plugin può essere uno dei modi più efficaci per gestire le favicon, qualunque sia il tuo tema.

Ciò è particolarmente vero se desideri fornire un’esperienza più personalizzata in base al dispositivo dell’utente.

Uno dei plugin più popolari per questo è Favicon Tutto In Uno :

La versione gratuita disponibile in La directory dei plugin di WordPress è abbastanza robusta.

Fornisce agli utenti opzioni di front-end e back-end, nonché impostazioni generali: 

questo plug-in ha anche un’interfaccia utente di facile navigazione in cui è possibile caricare le immagini. All In One Favicon accetta tre tipi di immagini favicon, inclusi i formati GIF, ICO e PNG. 

6.2.4. Perché la favicon non viene visualizzata?

Se la tua favicon non viene visualizzata sul tuo sito Web WordPress dopo averla aggiunta, è probabile che tu abbia commesso uno di questi errori comuni:

• Hai utilizzato il formato immagine sbagliato

La maggior parte dei browser moderni supporta le favicon in formato GIF o PNG. Tuttavia, alcuni browser meno recenti non lo faranno. 

La maggior parte di questi browser moderni cercherà prima il file favicon.ico nella radice del tuo dominio.

Quindi è meglio attenersi al formato di file ICO per evitare errori di visualizzazione.

• tua favicon non si ridimensiona correttamente

Il formato file ICO memorizza più versioni di un’immagine in diverse dimensioni e risoluzioni, per consentire agli utenti di visualizzarle su dispositivi diversi.

Tuttavia, in genere si consiglia di scaricarne diversi dimensioni favicon.ico. Ciò contribuirà a garantire la migliore esperienza utente indipendentemente dal dispositivo utilizzato. 

Ricorda: se stai utilizzando un plug-in builder e continui ad avere problemi, verifica che sia aggiornato e compatibile con il tuo tema e la versione attuali di WordPress.

6.3. Come aggiungere una favicon al tuo Wix?

Hai anche la possibilità di aggiungere la tua favicon al tuo sito Wix andando su GESTISCI SITO WEB e poi su Favicon:

Fonte: Seoptimer

Clicca sul pulsante Carica Favicon e seleziona o carica la tua immagine. Non esiste un pulsante di salvataggio, ma stai certo che la tua favicon verrà automaticamente salvata dal sistema.

Fonte : Se Optimer

6.4. Come aggiungere una favicon al tuo shopify?

Se vuoi aggiungere una favicon al tuo sito Shopify, quello che devi fare è andare su: ”Negozio online” (il tuo negozio online):

Fonte: Seoptimer

Fare clic su ”Personalizza”:

Fare clic su ”Impostazioni del tema” quindi su ”Favicon”:

 Fonte: Seoptimer

Puoi selezionare un’immagine dalla tua libreria multimediale o caricare una nuova immagine:

Fonte: Seoptimer

In sintesi 

Nonostante la favicon sia un piccolo elemento, non è meno importante del logo di un brand, 

questa icona aiuta a rafforzare l’immagine del marchio e ad aumentare la visibilità del sito web sul web.

Daranno al tuo sito il valore aggiunto necessario per renderlo professionale e distinguersi in particolare nei browser degli utenti Internet.

È quindi importante pensare di aggiungerlo al tuo sito web, soprattutto perché il suo design è molto semplice poiché deriva principalmente dal logo. 

Spero che questa guida abbia chiarito il mistero dietro quelle piccole icone e abbia reso facile aggiungerle ai tuoi siti!

A presto!