Oggi toccheremo un argomento molto interessante. Quando lavori sul tuo sito, prima o poi dovrai creare una favicon. In termini semplici, una favicon è un'icona per il tuo sito che appare in una scheda nel tuo browser. Inoltre, può essere visualizzato nell'area di accesso rapido del browser se il tuo sito è stato aggiunto ai Preferiti.
Favicon dei siti più popolari
Penso che non abbia senso dire che la favicon dovrebbe essere di buona qualità, perché in qualche modo è il volto del tuo sito. In questo articolo impareremo come creare favicon che soddisfano le nostre esigenze, oltre a conoscere un servizio per convertirle. Leggi di più di seguito.
Versione video:
Quale dovrebbe essere una favicon
Prima di procedere con la creazione della favicon stessa, sarebbe bello soffermarsi su quello che idealmente dovrebbero essere. Quindi la favicon ideale è:
- È chiaro e comprensibile
- Prodotto di buona qualità
- Trasmette il significato del tuo sito
- Ha uno stile comune con il tuo sito
- Si distingue dalle altre icone del sito web
I parametri di cui sopra possono essere attribuiti alla favicon ideale. E dobbiamo creare proprio un'icona del genere per il nostro sito. Tuttavia, c'è polemica su cosa esattamente dovrebbe essere raffigurato sulla favicon. Credo che in questa materia sia necessario procedere dallo stile generale e dal tema del tuo sito. Può contenere un'immagine o un testo. Se il testo è posizionato sulla favicon, non dovrebbe essere composto da più di 2 lettere. Altrimenti, nessuno sarà in grado di distinguere tale testo, perché la dimensione della favicon è principalmente di 16 * 16 pixel.
Quali sono le dimensioni delle icone del sito
Come sai, ora esiste un'enorme varietà di browser, monitor e dispositivi. E i requisiti di dimensione per le favicon sono diversi. Ci sono le seguenti opzioni di dimensione da considerare:
- 16 * 16px: dimensioni favicon standard adatte alla maggior parte dei browser e dei dispositivi
- 32 * 32px - utilizzato in alcuni casi in Internet Explorer e Safari
- 57 * 57px: utilizzato se visualizzato su i phone
- 72 * 72 px: utilizzato durante la visualizzazione iPad
- 114 * 114 px: utilizzato durante la visualizzazione su schermi retina (57 * 2 \u003d 114)
- 144 * 144px: utilizzato durante la visualizzazione su schermi retina iPad (72*2=144)
Quale formato dovrebbero essere le favicon
In precedenza, i browser accettavano solo favicon nel formato "ico"... Ora hanno imparato a capire altri formati, incluso "png"... Nel nostro caso, uccideremo 2 piccioni con una fava. Innanzitutto, creeremo una favicon nel formato "png"e poi convertirlo in "ico".
Diversi modi per creare favicon
Oggi ci sono due modi principali per creare favicon:
- Attraverso speciali servizi online
- Crea te stesso attraverso programmi speciali come Photoshop e Adobe Illustrator
Ogni metodo ha le sue caratteristiche. Il vantaggio di creare una favicon tramite servizi online è che non è necessario avere competenze speciali per questo. Devi solo caricare l'immagine richiesta, modificarla e scaricare la favicon finita. Oppure lavora semplicemente con il testo e disegna un'icona utilizzando gli strumenti del servizio online. In generale, il vantaggio principale di questo metodo è la sua semplicità. Tuttavia, il rovescio della medaglia è che la qualità di tali icone del sito lascia molto a desiderare. Non otterrai una favicon unica per il semplice motivo che la galleria di icone dei servizi online non è illimitata. E quando si utilizzano le proprie immagini, non è così facile creare un prodotto di qualità utilizzando gli strumenti di servizio. Nel caso di disegnare un'icona manualmente tramite gli strumenti del servizio online, si scopre "qualcosa di inimmaginabile".
Pertanto, scegliamo la seconda soluzione, più complessa ma di maggior successo. Per creare una favicon, useremo il programma Photoshop... Se non hai esperienza con questo programma, allora va bene. Seguendo le mie istruzioni, puoi affrontare facilmente il compito.
Crea una favicon
Come ho già detto, una favicon può essere creata usando un'immagine o solo lettere. Nel nostro caso, userò un qualche tipo di immagine. Ad esempio, supponiamo di avere un sito automobilistico. Quindi, dobbiamo trovare un'immagine dall'area auto. Propongo di creare un'icona per il nostro sito sotto forma di una ruota.
Selezioniamo l'immagine
Puoi scattare immagini da qualsiasi luogo. Ad esempio, attraverso lo stesso immagini yandex... La condizione principale è che l'immagine sia semplice, senza ombre e volumi. Ciò è dovuto al fatto che quando viene ridotto a 16 pixel, non avrà molti dettagli. Volumi e ombre eccessivi possono offuscare l'immagine.
Trovo un'immagine adatta usando la ricerca googlea richiesta "ruota". Devo solo salvarlo facendo clic con il tasto destro e selezionando la funzione "Salva immagine con nome".
Immagine adatta nelle immagini di Google Successivamente, apriamo questa immagine con Photoshop... È molto importante che la favicon abbia uno sfondo trasparente. Questo non è il caso nel nostro caso. Usiamo lo strumento Bacchetta magica per rimuovere lo sfondo. L'essenza del suo lavoro è molto semplice. Con questo strumento, possiamo selezionare aree nell'immagine dello stesso colore. Poiché lo sfondo della nostra immagine contrasta chiaramente con la ruota stessa, questo sarà molto facile da fare. Facendo clic una volta, selezioniamo un'area monocromatica. Premendo la scorciatoia da tastiera CTRL + CANC stiamo eliminando quest'area.
Rimuovere lo sfondo della nostra ruota Lo facciamo con tutte le parti dello sfondo dell'immagine. Quindi, nella nostra immagine, la ruota si trova su uno sfondo trasparente, che è quello che dovevamo fare. Quindi, il modello per l'icona del nostro sito Web è pronto.
Crea una favicon in 2 diverse dimensioni
Suggerisco di creare 2 favicon, 64px e 16px. Per prima cosa dobbiamo creare un'icona più grande (64px). Per fare ciò, premiamo la scorciatoia da tastiera CTRL + N... Nella finestra che appare, selezioniamo l'altezza e la larghezza dell'immagine a 64px.
Impostazione delle dimensioni della futura favicon Successivamente, dobbiamo spostare la nostra ruota nell'area dell'immagine appena creata. Per fare ciò, torniamo all'immagine con la rotella e selezioniamo lo strumento "Sposta". Il passaggio successivo consiste nel fare clic sull'immagine della ruota e, tenendo premuto il pulsante sinistro del mouse, spostarla nell'area della nuova immagine. Assicurati che il livello ruota sia selezionato durante il trascinamento. In caso contrario, il trasferimento fallirà.
Trasferimento della ruota in una nuova immagine Dopo aver spostato le ruote su una nuova immagine, vediamo che non si adattano alle dimensioni. Dobbiamo ridurre la ruota fino a 64 px. Per fare ciò, teniamo premuto il tasto CAMBIOe cliccando sul punto diagonale dell'immagine lo riduciamo. Quindi abbiamo creato la prima favicon per il nostro sito. Ti ricordo che ce l'abbiamo nella dimensione 64 * 64px. Ora non ci resta che salvarlo selezionando la funzione "Salva per Web" nella scheda "File". Scegliamo il formato PNG-24 e cartella immagini... La favicon stessa è anche chiamata, solo in lettere latine - "favicon".
Salva la favicon Bene. Ora tutto ciò che dobbiamo fare è creare una favicon più piccola. Per fare ciò, fare clic sulla scheda "Immagine" e selezionare la funzione "Dimensione immagine". Qui impostiamo la larghezza e l'altezza su 16px. Ora dobbiamo solo salvare questa immagine per il web. Possiamo chiamarlo "favicon-2".
Quindi, qui abbiamo creato 2 favicon per il nostro sito nel formato "png"... Per prima cosa abbiamo creato una versione da 64px in modo da poterla ridimensionare facilmente fino a 16px. Se crei prima una variante con 16px, aumentarla a 64px senza perdere qualità non funzionerà. Pertanto, tienilo a mente per non fare il doppio lavoro.
Installazione della favicon sul sito
Per installare una favicon su un sito all'interno di un tag prescriviamo:
Nel caso avessimo una favicon nel formato " ico " quindi invece di " png " prescrivere " ico "... Per esempio:
Come puoi vedere, l'icona del sito viene visualizzata come previsto.
Conversione dell'icona del sito nel formato "ico"
I browser moderni possono riconoscere e visualizzare facilmente le favicon nel formato "png"... Tuttavia, potrebbe essere necessario convertirlo in "ico"... Uno dei vantaggi di questo formato è la memorizzazione di favicon di tutte le dimensioni in un unico file. D'accordo che questo è molto conveniente. Quindi, per convertire le nostre icone, useremo un servizio interessante: xiconeditor.com. È molto facile lavorare con lui. Tutto avviene in 4 passaggi:
1. Innanzitutto, dobbiamo scaricare le nostre favicon. Per fare ciò, facciamo clic sul pulsante "Importare".
Scarica le favicon da xiconeditor.com 
3. Se lo desideri, puoi fare clic sul pulsante "Anteprima" e vedere come verranno visualizzati. Per scaricare le nostre favicon nel formato "ico" clicchiamo sul pulsante "Esportare".
Quindi, qui abbiamo imparato come creare favicon in "png" e convertirli in formato "ico"... Non ho considerato specificamente l'elaborazione dettagliata dell'immagine in Photoshop, poiché per molti sarà eccessiva. Se necessario, puoi, ovviamente, migliorare ulteriormente la qualità della favicon lavorando con i pixel in Photoshop. Ho cercato di presentare tutti gli elementi essenziali in una forma semplificata. E questo è tutto per me. Spero che questo tutorial ti sia stato utile. Se è così:
- Ripubblica questo articolo sui social network in modo che più persone possano trarne vantaggio;
- Iscriviti alla mia mailing list per non perdere post di blog utili e interessanti.
Su questo non ti saluto. Grazie per la vostra attenzione e ci vediamo nelle seguenti pubblicazioni!
Voglio oggi per presentarti i servizi per la creazione di una favicon per il tuo sito... Favicon è un'abbreviazione delle parole inglesi favorite e icon. Questa è un'immagine di 16 x 16 pixel chiamata favicon e ha l'estensione ico. Si trova nella cartella principale del tuo sito di hosting. Quando il sito viene caricato, il browser cerca automaticamente questo file, quindi lo aggiunge alla barra degli indirizzi prima dell'URL della pagina e dei segnalibri, assegnandolo al tuo sito. L'icona del sito web non ha alcuna utilità pratica e serve solo a riconoscerla.
Ora qualsiasi web designer che in qualche modo pensa all'unicità e all'originalità della sua risorsa è semplicemente obbligato a creare un'icona speciale per lui. In qualsiasi browser nella barra degli indirizzi, il nome del tuo sito, insieme all'icona, apparirà moderno e pertinente. Si noterà anche nei segnalibri e nei Preferiti, che gli consentiranno di distinguersi dalla massa di siti simili. Puoi prendere un'icona in base all'argomento della tua risorsa e senza iniziare a studiarla, il visitatore sarà immediatamente in grado di capire di cosa sta parlando. Ciò avrà un buon effetto sul riconoscimento del sito e sulla sua formazione come marchio.
Per impostazione predefinita, il sito Web visualizza l'icona fornita per questo nel browser corrente. La maggior parte delle versioni dei browser moderni supporta anche le favicon dei siti personali. E nel motore di ricerca Yandex, che ora domina insieme a Google nello spazio di lingua russa, quando una query di ricerca, i siti classificati appaiono insieme alla loro icona. Pertanto, senza indugio, è imperativo prestare molta attenzione alla sua creazione.
Ci sono molte risorse su Internet che memorizzano icone già pronte. Ce ne sono moltissimi, ma ora siamo interessati alla creazione di una favicon.
Hai bisogno di creare una favicon per il tuo sito web? Considera i servizi per la creazione di favicon online
Il servizio più popolare per la creazione di icone per un sito web. È abbastanza semplice lavorarci e anche un utente inesperto può gestirlo. Carichiamo l'immagine che vogliamo vedere come icona del sito. Lo elabora. Guardiamo l'immagine risultante e, se ci soddisfa, fare clic su Download. Un file con un titolo viene salvato automaticamente. Puoi disegnare pixel per pixel e, se ti piace, salvarlo anche come icona. È importante utilizzare un semplice disegno per creare la favicon. Se ci sono molte cose multicolori, ottieni un punto anonimo.
Il prossimo servizio altrettanto facile da usare è. Il lavoro in esso è approssimativamente simile all'analogo precedente. L'unica cosa è che è in inglese e ci sono più annunci qui. Ma in generale, le azioni di generazione sono abbastanza simili. Carica un'immagine, guarda, modifica e salva.
Ora quasi tutte le risorse che forniscono servizi per promuovere siti o raccogliere dati analitici su di essi hanno un'opzione aggiuntiva per la creazione di favicon. Ad esempio, servizi noti che hanno anche questa opzione aggiuntiva:
Ma mi piacciono i servizi su misura direttamente per la creazione. Ecco un altro simpatico strumento online per generare icone di varie dimensioni e formati. Modestamente e con gusto. Caricato il nostro file. Abbiamo scelto la taglia. Visualizza l'anteprima e salva sul tuo computer.
Potresti, ovviamente, usare il Photoshop preferito da tutti per creare un'icona. Ma non salva le immagini con l'estensione ico. Piuttosto, salva, ma per questo è necessario decomprimere un plugin speciale - icoformat.8bi e installarlo nella cartella Plug-Ins \\ File Formats nella cartella Photoshop. Questo salverà i file con la nostra estensione desiderata. Per me questo è piuttosto fastidioso.
Propongo questa opzione. In Photoshop, creiamo un'immagine che vogliamo vedere come un'icona, la salviamo con qualsiasi estensione e la inviamo a uno dei servizi di cui sopra, dove otterremo quella che ci serve da queste immagini.
È inoltre possibile utilizzare convertitori online di immagini grafiche da un formato all'altro. Ad esempio qui o. Con loro, puoi cambiare qualsiasi estensione del file grafico in ico.
Come fare in modo che l'icona diventi una favicon del sito?
Sono necessari i seguenti passaggi:
1 Assicurati che il file abbia un nome.
2 Utilizzando Filezilla, posizionalo nella cartella principale del nostro sito. In teoria, queste azioni sono sufficienti e il browser determinerà automaticamente dove si trova. Ma giochiamo sul sicuro e scriviamo il percorso di questo file con codice html.
3 Per fare ciò, prendi il file del nostro tema header.php (puoi modificarlo nel pannello di amministrazione direttamente in WordPress, oppure puoi scaricarlo dal server), aprilo e scrivilo prima del tag di chiusura codice seguente:
/favicon.ico "/\u003e
/favicon.ico "/\u003e |
4 Salvare il file e trasferirlo di nuovo sull'hosting.
5 Svuotiamo la cache del browser corrente e il gioco è fatto. Abbiamo ottenuto il risultato desiderato.
A proposito, non è necessario che la favicon si trovi alla radice. L'attributo href specifica direttamente il percorso ad esso. Risulta così:
|
|
Inoltre, non è necessario che l'icona abbia l'estensione ico. Possono essere utilizzate anche le estensioni png e gif. A tale scopo, il tipo di file di output viene modificato nel codice.
Cioè, cambiamo il tipo da image / x-icon a image / png o gif.
A proposito, puoi aggiungere qualcos'altro. Abbiamo creato e installato una favicon per il sito e nel pannello di amministrazione di WordPress la favicon standard è rimasta di default. Per cambiarlo ovunque, è necessario inserire il seguente codice php nel file function.php del nostro tema:
funzione sp_set_favicon () (echo " ";) add_action (" admin_head "," sp_set_favicon "); add_action (" login_head "," sp_set_favicon "); add_action (" wp_head "," sp_set_favicon ");
funzione sp_set_favicon () ( eco ".get_bloginfo ("template_url") /\u003e " ; add_action ("admin_head", "sp_set_favicon"); add_action ("login_head", "sp_set_favicon"); add_action ("wp_head", "sp_set_favicon"); |
Ora si rifletterà in tutte le intestazioni.
Su questo, in generale, è tutto. Oggi abbiamo discusso del motivo per cui è necessario creare una favicon per un sito e abbiamo esaminato i servizi online per creare una favicon per un sito e le sottigliezze della sua installazione. Non dimenticare di iscriverti agli aggiornamenti del blog. A presto!
Guarda il video su come creare un favicon.ico e ospitarlo:
Ciao!
In questo articolo ti mostrerò come installare una favicon su un sito web. Questo può essere fatto utilizzando la directory principale del sito o utilizzando la funzionalità del modello. Analizzeremo tutte le opzioni e determineremo quale sarà la migliore per questo o quel caso.
Ma prima parleremo di come questa favicon possa essere disegnata. Successivamente, vediamo che dimensione dovrebbe avere il logo, alla fine ti dirò come inserire nel sito l'icona creata.
Una favicon è un'icona del sito web 16 x 16 (o 32 x 32, ma non più grande). Viene visualizzato nella scheda del browser. Assomiglia a questo:
L'icona viene visualizzata anche nei risultati di ricerca e, se il tuo sito non dispone di una propria favicon, è improbabile che gli utenti prestino attenzione. Soprattutto i più esperti che apprezzano davvero ogni piccola cosa.
In Yandex Webmaster, l'assenza di una favicon è classificata come un errore che deve essere urgentemente corretto. Ciò è dovuto non solo al fatto che le persone in un motore di ricerca potrebbero non fidarsi di un sito senza un'icona, ma anche di determinati algoritmi di ricerca. I robot vedono tali difetti tecnici e molto spesso riducono la risorsa nei risultati di ricerca. Un triste fenomeno che può influenzare tutte le promozioni SEO.
Riassumiamo un po ':
- Favicon influenza i fattori comportamentali e le percentuali di clic.
- I robot di ricerca possono anche tenere conto della presenza o dell'assenza di una favicon.
- Un tale difetto tecnico può portare a un calo del traffico.
In altre parole, se hai anche una domanda: aggiungi o meno una favicon, la risposta è ovvia: assicurati di aggiungere.
Ora scopriamo come disegnare proprio questa icona. Questo può essere fatto utilizzando vari servizi online, editor.
Dove scaricare la versione finale
Lontano dalla scelta migliore, ma qualcuno lo usa. Puoi scaricare una favicon già pronta da Internet e non preoccuparti troppo di crearne una tua. Tutti sono presentati in formati e dimensioni convenienti.
Basta inserire la query richiesta nel motore di ricerca, qualcosa come "Scarica una favicon già pronta", dopodiché ti verrà presentato un numero enorme di varianti molto diverse.
Scarichiamo l'immagine sul nostro PC e poi la installiamo sul sito. È semplice. Sono disponibili in modo assolutamente gratuito, nessuno ti sgriderà. Sebbene se parliamo di un'azienda, anche piccola, quando viene trovato il logo di qualcun altro, possono verificarsi spiacevoli incidenti.
Puoi cercare opzioni già pronte su vari siti. Di norma, ci sono intere raccolte di tutti i tipi di loghi tematici che potrebbero piacere ad alcuni webmaster.
Ma ripeto ancora una volta che sarebbe meglio creare una favicon da soli.
Creazione di una favicon
Servizi online
Puoi disegnare una favicon nei servizi online. Basta inserire la query corrispondente nel motore di ricerca, dopodiché alla tua attenzione verrà presentato un intero elenco di siti che possono aiutarti a realizzare i tuoi piani.
Questo corso tratterà le caratteristiche più importanti della creazione competente di progetti di informazione, l'interazione con un team e altri aspetti utili di cui avrai sicuramente bisogno quando sviluppi la tua attività.
Nella lezione di oggi te ne parlerò icone Favicon (favicon). ti mostrerò come creare un favicon.ico per un sito web (o per un blog, non fa differenza) e mostrarti come puoi inserisci favicon.
Sicuramente molti ancora non sanno di quale "miracolo" parlo. In poche parole, una favicon è un'immagine (icona) che si trova davanti all'indirizzo del sito Web nel browser. Mostrerò chiaramente la Favicon del mio blog:
Questa icona è una specie di logo per il tuo blog. Pertanto, la creazione di una favicon deve essere presa con piena responsabilità. Ricorda, può far risaltare il tuo blog dagli altri.
Piano della lezione:
- Costruire una Favicon da zero.
- Creazione di una favicon da un'immagine finita.
- Servizi con icone già pronte per il sito.
- Collegamento dell'icona risultante al sito.
Come creare una favicon da zero
C'è un servizio molto conveniente. Ha un indirizzo favicon.cc. Questo servizio per la creazione di favicon ha questo aspetto:
Per disegna favicon scegli un colore e dipingi. Se hai disegnato qualcosa, da qualche parte sbagliato, per eliminare un frammento dell'immagine, seleziona lo strumento trasparente (seleziona la casella) e "colpisci" i pixel ("quadrati") che devono essere rimossi:
Ho disegnato la seguente favicon:
Quello che mi è piaciuto di più di favicon.cc è che puoi vedere immediatamente il risultato del tuo lavoro nella sua dimensione originale. Per fare ciò, devi andare un po 'alla sezione Previw:
In alternativa, puoi visualizzare il risultato del lavoro direttamente nel browser (Opera, Firefox, Internet Explorer, ecc.):
Creazione di una favicon da un'immagine già pronta
Supponiamo che tu non voglia creare un'icona per il tuo sito da zero, ma vuoi farlo da un'immagine già pronta. In questo caso, il servizio per la creazione di favicon.ru sarà conveniente per te.
Il servizio è in russo, quindi non dovresti avere problemi. Indica semplicemente l'immagine che desideri visualizzare come icona del tuo sito (il pulsante "Sfoglia"), quindi fai clic su " Crea favicon.ico", E poi già" Scarica favicon.ico”.
In questa lezione viene considerata la creazione di una Favicon, scoprirai a cosa serve questa icona e riceverai consigli su come migliorarne l'aspetto e l'attrattiva.
Inoltre, esamineremo il processo di creazione e aggiunta di una favicon per il sito.
Favicon - questa è una piccola icona che puoi vedere nella barra degli indirizzi del browser e nelle schede delle pagine aperte, così come quando aggiungi un sito ai segnalibri del browser, questa icona viene aggiunta anche lì.
Inoltre, il motore di ricerca Yandex mostra l'icona Favicon nei risultati di ricerca accanto al tuo sito. Il tuo compito è far risaltare questa icona, ricordarla, catturare l'attenzione sullo sfondo di altre icone nei risultati di ricerca e avere anche alcune associazioni con il tuo sito. Un Favicon ben realizzato e accattivante può aumentare significativamente il numero di visite al tuo sito rispetto a quelle che non lo hanno installato o sembrano poco attraenti.
Ecco alcune linee guida da tenere a mente quando si crea una Favicon.
# 1. Il badge dovrebbe essere facilmente riconoscibile e avere associazioni con il tuo sito o con la nicchia a cui appartiene il tuo sito. Come icona, puoi utilizzare un logo o un simbolo associato al tuo sito. Inoltre, puoi utilizzare la combinazione di colori in cui è stato creato il tuo sito web o logo.
# 2. Non utilizzare icone standard. Molti, dopo aver creato un sito su uno o un altro CMS, lasciano l'icona, nulla, senza cambiare. Di conseguenza, i risultati del motore di ricerca potrebbero contenere non un sito con tale icona, ma molti. Questo non farà risaltare il tuo sito, quindi usa solo le icone Favicon uniche create appositamente per il tuo sito. Ciò include anche la situazione in cui vengono utilizzate icone di varie raccolte o elementi dell'interfaccia di altri siti. Ricorda, per distinguerti, hai bisogno di una favicon unica.
# 3. Cerca di usare colori più luminosi e più chiari quando crei la tua icona, di regola attirano più attenzione.
# 4. Non utilizzare icone animate. In primo luogo, l'animazione non è supportata da tutti i browser e, in secondo luogo, l'attenzione del visitatore dovrebbe essere focalizzata sul contenuto e non sull'icona.
Ora esaminiamo direttamente il processo di creazione di una Favicon. Ci sono molti servizi per questo. Tuttavia, sono più adatti a coloro che hanno già un'icona già pronta che hanno strappato da qualche parte o preso da qualche collezione. Ma come ho detto sopra, l'icona deve essere unica, quindi qui prenderò in considerazione il processo di creazione utilizzando Photoshop, utilizzando l'esempio del sito del sito.
Crea un predefinito Favicon in Photoshop
# 1. Crea un nuovo documento in Photoshop, dimensione 64 * 64px, per questo vai nel menu "File" \u003e\u003e "Nuovo ..." o premi la scorciatoia da tastiera Ctrl + N. In generale, l'icona stessa dovrebbe essere 16 * 16px, ma è meglio crearla prima della stessa dimensione e poi ridurla alla dimensione richiesta.
# 2. Nel mio caso non ho nessun logo per il sito, quindi ho deciso di utilizzare il simbolo "W" con cui inizia l'indirizzo del sito, così come i colori che prevalgono nella parte superiore del sito sono il blu e il giallo. Quindi ho impostato il valore del colore su # 6A91D0 e utilizzando lo strumento Riempi (G) ho impostato il documento precedentemente creato su blu.
# 3. Successivamente ho selezionato lo strumento testo (T) e ho aggiunto una W e gli ho dato il seguente valore di colore # FAC31D.
Per far risaltare maggiormente il simbolo sullo sfondo blu, ho aggiunto un tratto nero di 2px. Per fare ciò, vai alla voce di menu Livello \u003e\u003e Stile livello \u003e\u003e Tratto, scegli un colore e una dimensione per il tratto.
Dopodiché, devi unire i livelli, per questo devi andare alla voce di menu "Livello" \u003e\u003e "Unisci elementi visibili" oppure premere la combinazione di tasti Maiusc + Ctrl + E.
Per rendere le linee morbide e sans serif, ho aggiunto una sfocatura. Per fare ciò, vai alla voce di menu "Filtro" \u003e\u003e "Sfocatura" \u003e\u003e "Sfocatura gaussiana ..." e imposta il raggio a 0,3 pixel.
Posiziona il tuo simbolo o immagine in modo che occupi più spazio possibile, perché se è piccolo, non sarà visibile con una dimensione dell'icona di 16 * 16.
# 4. Ora devi ridimensionare l'icona. Per fare ciò, vai al menu Immagine \u003e\u003e Dimensione immaginee imposta la dimensione su 16 * 16 px.
#cinque. Resta da salvare l'icona. La Favicon deve avere il nome favicon e l'estensione .ico. Il fatto è che per impostazione predefinita Photoshop non salva le immagini nel formato .ico. Salvatelo quindi in formato .png, per questo andate alla voce di menù "File" \u003e\u003e "Salva con nome ..." e dall'elenco a tendina selezionate la voce PNG.
Conversione di un'immagine in formato .ICO
Successivamente, lo convertiamo nel formato .ico utilizzando il servizio. Vai a questo servizio e utilizza il pulsante "Sfoglia" per selezionare il file PNG salvato in precedenza, quindi fai clic sul pulsante "Crea favicon.ico".
Dopodiché, nella pagina caricata apparirà il link "Scarica favicon.ico!". cliccando su cui puoi salvare l'icona Favicon finita sul tuo computer.
Ora è il momento di aggiungere la Favicon al tuo sito in modo che appaia per tutte le sue pagine. Per fare ciò, posiziona l'icona nella cartella principale del tuo sito. Se il tuo sito è già ospitato, questa cartella è solitamente chiamata "public_html". Quindi, in ogni pagina del tuo sito, prima del tag di chiusura aggiungi le seguenti righe:
Ma queste righe devono essere aggiunte a ogni pagina se hai un sito HTML. Ma poiché, molto probabilmente, il tuo sito è stato creato sulla base di alcuni CMS, ti basterà aggiungere queste righe al file principale del tuo tema, che utilizzi per il sito.
Se stai usando WordPress, vai su wp-content / themes / folder-with-your-theme / find in esso e apri il file header.php, quindi incolla le righe richieste e salva il file.
Se stai usando Joomla, vai su templates / cartella-con-tuo-tema / e apri il file index.php, inserisci le righe necessarie e salva.
Alcuni temi in WordPress e Joomla potrebbero già avere i propri percorsi al file favicon.ico, in questo caso cancellali e sostituiscili con i tuoi.
Se usi un altro CMS, fai tutto per analogia.
Nelle schede delle pagine e nella barra degli indirizzi del browser, la tua icona verrà visualizzata immediatamente, come per i risultati di ricerca Yandex, qui ci vuole tempo perché uno speciale robot di ricerca Yandex trovi la tua icona, dopodiché apparirà nei risultati della ricerca.
Materiale preparato dal progetto:
