Nel web design, come probabilmente saprai, ogni dettaglio conta. Una persona che è passata alla tua risorsa non vede ciascuno degli elementi separatamente, ma percepisce l'intera immagine come un pacchetto composto da altri piccoli dettagli. Pertanto, se ti manca qualcosa nel processo di sviluppo della tua risorsa, questo dettaglio può in seguito rovinare l'intero complesso, l'intera composizione.
Una sciocchezza del genere può essere, ad esempio, lo sfondo di un pulsante, un carattere scelto in modo errato di un piccolo elemento e persino una favicon. In effetti, guarda tu stesso: i siti grandi e famosi hanno un'icona individuale che lo indica nella sezione "Segnalibri" del browser dell'utente. Senza di essa, gli sviluppatori della risorsa non sarebbero stati in grado di creare la composizione per cui stavano originariamente lottando.
Pertanto, quando crei un design per il tuo sito, dovresti prenderti cura di un dettaglio come la favicon. In questo articolo parleremo di come abbinarlo allo stile generale della risorsa e delle dimensioni che dovrebbe avere questa immagine.
Icona del sito
Per prima cosa, definiamo cos'è questo elemento. In questo momento, dai un'occhiata al titolo della scheda del tuo browser. Come puoi vedere, c'è una piccola immagine alla sua sinistra, che indica una versione semplificata del logo della risorsa. La stessa immagine è anche vicino al nome del sito visualizzato nei risultati della ricerca. Questo è ciò che guida l'utente quando vede il titolo.
Molti webmaster capiscono che un'immagine del genere è necessaria, ma poche persone sanno quale dimensione della favicon per il sito sarà più appropriata. Pertanto, in questo articolo non solo forniremo informazioni su come creare un'icona del genere e su come installarla sulla tua risorsa, ma parleremo anche delle dimensioni dell'immagine.
Lo scopo della favicon
Quindi, l'immagine vicino all'intestazione del sito viene utilizzata per l'identificazione. Questo è il suo scopo originario: esprimere il sito di cui vediamo il nome, e farlo ris altare agli occhi del resto. Ciò avviene nel modo più semplice possibile attraverso l'uso della grafica: percepiamo intuitivamente le informazioni nelle immagini molto più velocemente e facilmente rispetto al formato testo. Le favicon ci aiutano a fare proprio questo. Ma non dimenticare che la dimensione della favicon è minima agli occhi dell'utente. Non si tratta di un logo presente nell'“intestazione” del sito, che può contenere informazioni aggiuntive sotto forma di iscrizioni, alcuni chiarimenti o informazioni di contatto. Tutto ciò che può essere visualizzato nell'icona accanto al nome dovrebbe adattarsi il più possibile alle dimensioni della favicon. E lui, come già indicato, è semplicemente in miniatura (solo 16 x 16 pixel).
Come sceglierefavicon?
Quindi come può un webmaster progettare un'icona per il suo sito? Va notato che la semplice compressione del logo del sito, molto spesso, non funzionerà. Sugli emblemi che vengono messi sotto forma di logo di una particolare risorsa, sono spesso visibili vari elementi, che non saranno sempre visualizzati correttamente in una forma in miniatura. È meglio abbandonare immediatamente tale impresa.
Certo, la dimensione della favicon non permette di parlare di inserire semplicemente una scritta lì. Qualsiasi testo sarà semplicemente invisibile a questa risoluzione. Abbiamo bisogno di sviluppare una nuova icona che trasmetta lo stile del sito. Per trovare soluzioni, ancora una volta, rivolgiamoci ai siti più grandi.
Molte persone usano la prima lettera stilizzata del nome del servizio come favicon. Questo è il modo, ad esempio, Bing, Yahoo, Yandex, Wikipedia, Google. C'è un altro approccio: se hai un nome di sito breve, puoi impostarlo come sfondo della tua icona. Affinché la dimensione della favicon (in pixel raggiunge, ripeto, 16 per 16 pixel) per visualizzare correttamente questa scritta, non dovrebbe essere più lunga di 3 lettere. Questo è ciò che fa, ad esempio, il servizio Aol.
Come creare una favicon?
Ci sono diversi modi per creare un'icona per il nome del sito. Naturalmente, il modo più semplice è lavorare con diverse soluzioni già pronte. Possiamo parlare di alcuni servizi o programmi che consentono di creare un'icona da un'immagine a tutti gli effetti riducendola. Tuttavia, consiglierei di sviluppare un tale logo da solo. Questo in primo luogo daràl'opportunità di imparare qualcosa; e in secondo luogo, fornirà più strumenti. Tutto ciò che devi sapere per questo è cosa disegnare e sapere anche quale dimensione dovrebbe essere la favicon nella versione finale. Parleremo delle dimensioni dell'icona per il sito un po 'più tardi, ma per ora noteremo alcune sottigliezze del lavoro con tali immagini. In particolare, senza citare le dimensioni della favicon del sito, è opportuno chiarire il formato di tale immagine. Come notano i designer esperti, l'immagine deve essere salvata come file-p.webp
Puoi salvare l'immagine, ad esempio, utilizzando Photoshop, dove verrà disegnato l'emblema.
Dimensioni favicon
Quindi, ora parliamo di quanto dovrebbe essere grande l'immagine che vediamo accanto al nome del sito nei risultati di ricerca. Di default, come già accennato, la sua dimensione è di soli 16 pixel (su ciascun lato). Tuttavia, se provi a modificare questa immagine in Photoshop, vedrai di persona quanto sia scomodo. Pertanto, consigliamo di lavorare con un'immagine ingrandita, che in futuro potrà essere semplicemente compressa lungo i bordi e salvata nel formato richiesto.
Multipiattaforma
Tuttavia, parlando di quanto dovrebbe essere grande la favicon sul tuo sito, c'è un' altra cosa da tenere a mente. Non tutte le piattaforme visualizzano un'immagine della risorsa allo stesso modo. Ad esempio, i dispositivi con display Retina "vedono" la tua favicon a 32 per 32 pixel. E in Safari e sulla nuova piattaforma Windows, e del tutto, queste icone raggiungono una dimensione di 64pixel.
Pertanto, ti consigliamo di salvare diverse versioni dell'icona e di provvedere semplicemente alla sua modifica in base alla piattaforma dell'utente in futuro. Un altro punto interessante: puoi provare a caricare l'icona nel formato più grande, contando sul fatto che si "rimpicciolirà" a seconda del browser.
Editori esterni
Ovviamente va bene se sei bravo con Photoshop e sai quale dovrebbe essere la dimensione della favicon e come ottenerla salvando la tua immagine. Tuttavia, ci sono molti principianti che non si sono imbattuti in editor grafici così da vicino prima, quindi non possono disegnare l'immagine desiderata così facilmente. Per aiutare tali webmaster, ci sono vari servizi che ti permettono di creare automaticamente l'icona che ti interessa. Molti di loro sono addirittura gratuiti, il che non richiede alcun investimento da parte dell'utente.
A volte devi solo registrarti per lavorare, ma, come capisci, questo viene fatto una volta sola - dopotutto, le aziende non cambiano la loro favicon così spesso. Dai un'occhiata a Google, che cambia il logo ogni giorno, ma non tocca l'icona.
Come si installa una favicon?
In generale, impostare il tuo sito in modo che visualizzi correttamente l'immagine di cui hai bisogno è molto semplice. È sufficiente eseguire una serie di semplici passaggi che consentiranno ai motori di ricerca, oltre che ai semplici browser, di leggere le informazioni.
Per fare ciò, l'immagine risultante deve essere salvata condenominato favicon.ico e posizionato nella radice della tua risorsa. Ecco fatto, ora la tua immagine verrà riconosciuta automaticamente e dopo un po' verrà collegata al tuo sito.
Oltre a questa rilegatura, puoi aggiungere un' altra riga che "suggerirà" dove si trova la tua icona. Si presenta così:
Installa il codice nell'intestazione del sito.
Conclusioni
Quindi, dopo aver letto il nostro articolo, hai capito che dimensione dovrebbe essere una favicon per un sito e di cosa si tratta. Inoltre, penso che tu abbia capito che trovare l'icona giusta per la tua risorsa è una necessità, perché gioca nelle tue mani sia in termini di crescente riconoscimento che in termini di ulteriore ris alto tra i tuoi concorrenti. Almeno i siti più grandi fanno lo stesso, il che può essere preso come ottimo esempio. E inoltre, non comporta molti sforzi: dopo aver creato una favicon una volta e averla installata correttamente sul tuo sito, puoi dimenticartene per i prossimi mesi.
Pertanto, sentiti libero di sperimentare, inventa qualcosa di nuovo, prova e tutto funzionerà!
