Program pentru crearea favicon. O modalitate universală de a crea favicon-uri. O selecție de generatoare online, colecții și galerii de faviconuri

O zi bună, dragi cititori. Uneori, un lucru mic poate face diferența. Astăzi vom vorbi despre astfel de gadgeturi aproape invizibile care aduc beneficii semnificative site-ului.

Din acest articol veți afla de ce sunt necesare favicon-urile, unde să le căutați și cum să faceți o pictogramă în format ico simplu și rapid.

Un element invizibil care se depune în subconștientul fiecăruia

Un favicon este o imagine mică. În Yandex, acesta apare lângă numele portalului deja în căutare și este, de asemenea, afișat în mod necesar în browser de îndată ce deschideți resursa.

Probabil le-ați acordat atenție. Exact pentru asta sunt folosite. Icoanele contribuie la memorarea unei anumite resurse, deoarece informațiile vizuale sunt absorbite mult mai repede și pătrund în subconștientul însuși. Puteți să vedeți o persoană o dată, să discutați cu el timp de trei ore și să-i alegeți memoria pentru o perioadă foarte lungă de timp; merită să o întâlniți a doua oară. Informația vizuală (fața) este gravată în memorie mult mai profund decât oricare alta.

Dacă vezi pictograma de două sau trei ori, aceasta va fi depusă la nivel subconștient, vei avea încredere în portal și vei fi mai dispus să o alegi din mulțime.

Dacă căutați informații despre o anumită interogare și deschideți mai multe file, atunci vă veți uita mai întâi la cele ale căror favicon-uri vă sunt familiare și, cel mai probabil, veți închide restul dacă sunteți mulțumit de informațiile primite din primele surse.

Vă voi spune o poveste despre cum o pictogramă pentru un site web mi-a jucat o glumă crudă. Trebuia să descarc o carte. Am văzut un favicon familiar și nici aceasta nu era prima dată când vedeam designul. Super, am mai fost aici! Am dat clic pe descărcare aproape fără să mă gândesc. Înainte să am timp să salvez, software-ul antivirus a început să țipe nebun, iar computerul nu a mai putut fi salvat, a trebuit să reinstalez sistemul. Abia în acel moment mi-am amintit de unde cunoșteam acest site și mi-am amintit bine de el. Exact aceeași situație s-a întâmplat acum aproximativ un an, pe aceeași resursă.

Cum să creezi o favicon în doar 2 minute

Pictograma pentru site-ul dvs. poate fi în format png sau ico, cu dimensiunea de 16 x 16 pixeli.

Puteți utiliza convertorul și puteți crea o favicon din orice imagine. De exemplu, aici https://www.icoconverter.com/ . Alege fișierul.

De exemplu, am pregătit deja un desen. Cel mai bine este să alegeți formatul png, apoi marginile vor fi transparente.

Selectați 16 pixeli. Unii oameni preferă imagini de 8 biți (adâncime de biți). Apoi imaginea se va încărca mai repede. Mi se pare că acest lucru nu mai este deosebit de relevant. Folosește lucruri frumoase și de înaltă calitate. Va fi mult mai util.

Deci, s-ar părea că asta este. Totuși, primesc o eroare. Faptul este că dimensiunea imaginii depășește standardele permise. Imaginea nu trebuie să depășească 3 MB.

Puteți comprima și sau vopsiți, dar vă voi arăta o altă opțiune. Dacă ați descărcat imaginea în Google, găsiți-o din nou și apoi rulați „Căutare după imagine”.

Acum selectați „Mic”.

Descărcați aceeași fotografie, dar într-o dimensiune mai mică.

Să ne convertim din nou.

Unde să cauți pictograme gata făcute

O modalitate mai simplă și mai sinceră de a găsi o pictogramă este să o descărcați dintr-un serviciu online https://www.iconsearch.ru/ . Utilizarea acestor imagini este permisă de administrație și nu se pedepsește prin lege. . Introdu orice nume în bara de căutare și ai terminat.

Găsiți o imagine în format png și ico, descărcați-o și instalați-o pe site-ul dvs.

Dar dacă vrei să-l creezi singur? Nu e nimic complicat în asta.

Muncă creativă pentru profesioniști și cei dornici să devină specialiști

Orice afacere este bună. Este grozav dacă ești atras de cunoștințe noi și ești gata să faci tot felul de lucruri mărunte pentru a-ți dezvolta abilitățile. Dacă doriți să veniți cu ceva interesant pentru portal, atunci veți avea nevoie de un serviciu gratuit: https://favicon.ru/ .

Alegeți o culoare.

Desenați în câmpul prevăzut pentru aceasta.

În același timp, monitorizați rezultatele. Apoi descărcați și gata.

Poate că veți fi inspirat de folosirea desenelor gata făcute. Selectați un fișier de pe computer.

Și fotografia ta se va transforma într-o favicon de 8 biți. Utilizați transparența pentru a scăpa de fundal.

Acesta este rezultatul pe care îl veți obține. Nu știu despre tine, dar sincer vorbind, nu-mi place în mod deosebit de el.

Aș fi foarte bucuros să folosesc Photoshop () pentru această lucrare. Aș crea o pictogramă, aș salva-o ca PNG și apoi aș converti folosind-o https://www.icoconverter.com . Da, este mult mai mult de lucru, dar rezultatul va fi mai interesant și mai frumos. Deși, depinde de tine să alegi.

Urmărește videoclipul în care un tip creează o pictogramă uimitoare în puțin peste 9 minute.

Dacă ți-a plăcut acest videoclip și vrei să studiezi Photoshop mai în profunzime, îți recomand cursul lui Zinaida Lukyanenko ( Photoshop de la zero în format video VIP 3.0 ). În doar câteva săptămâni veți stăpâni toate abilitățile de care aveți nevoie pentru a lucra cu acest program.

Nu mă voi plictisi să repet că latura tehnică nu este o astfel de problemă. Este important să-ți perfecționezi abilitățile, să înveți să creezi proiecte interesante care să funcționeze. Și acest lucru se poate face doar în practică. După ce obțineți toate cunoștințele de bază referitoare la tehnologie.

Urmează experiența și practica. La început, o imagine durează câteva ore, dar în timp devine evident pentru tine ce culori sunt combinate, tehnicile care sunt cel mai bine folosite în acest sau acel caz. Nimic nu este mai plăcut decât să privești lucrând pe designeri profesioniști. Acest lucru este cu adevărat uimitor.

Nu pierde timpul cu înțelegerea fără sens, dezvoltă-ți propriul talent. Nu ar trebui să fii ca tăietorul de lemne din basm, care până la sfârșitul vieții a încercat să găsească cel mai rapid mod de a lucra cu un topor, dar a trăit până la bătrânețe și nu a tăiat niciun copac. Și-a dedicat tot timpul conversațiilor, raționamentelor, cărților și altor căutări pentru un răspuns la întrebarea care îl preocupa. Până la sfârșitul vieții, nu a mai avut puterea să verifice dacă cea mai bună opțiune a funcționat - doar fă-o.

Faceți totul în timp util. Foarte curând veți înțelege cu siguranță cum puteți lucra mai ușor, mai rapid și în cel mai bun mod. În această etapă, finalizați sarcinile, cel puțin cumva, și cu siguranță veți putea ajunge la final cu o cantitate incredibilă de cunoștințe.

Dacă ți-a plăcut acest articol, abonează-te la newsletter. Vei putea primi informații de actualitate care te vor ajuta să te regăsești pe Internet și să câștigi bani frumoși făcând ceea ce îți place: proiectarea, scrierea textelor, aspectul și chiar gestionarea tuturor acestor procese. Există ceva pentru toată lumea.

Mult succes in demersurile tale. Pana data viitoare.

Această lecție acoperă crearea unui Favicon, vei afla de ce este necesară această pictogramă și vei primi recomandări pentru îmbunătățirea aspectului și atractivității acesteia.

În plus, vom analiza procesul de creare și adăugare a unui Favicon pentru un site.

Favicon- aceasta este o pictogramă mică pe care o puteți vedea în bara de adrese a browserului dvs. și în filele paginilor deschise, iar atunci când adăugați un site la marcajele browserului, această pictogramă este adăugată și acolo.

În plus, motorul de căutare Yandex afișează o pictogramă Favicon în rezultatele căutării de lângă site-ul dvs. Sarcina ta este să scoți această pictogramă în evidență, să fie amintită, să atragi atenția pe fundalul altor pictograme din rezultatele căutării și, de asemenea, să ai unele asocieri cu site-ul tău. Un Favicon frumos conceput și atrăgător poate crește semnificativ numărul de vizite pe site-ul dvs. în comparație cu cele care nu îl au instalat sau au un aspect neatractiv.

Iată câteva îndrumări de luat în considerare atunci când creați un Favicon.

#1. Pictograma ar trebui să fie ușor de recunoscut și să aibă asocieri cu site-ul dvs. sau cu nișa căreia îi aparține site-ul dvs. Ca pictogramă, puteți utiliza un logo sau un simbol care evocă o asociere cu site-ul dvs. În plus, puteți utiliza schema de culori în care site-ul sau logo-ul dvs. a fost creat.

#2. Nu utilizați pictograme standard. Mulți oameni, după ce creează un site web pe unul sau altul CMS, părăsesc pictograma fără a schimba nimic. Drept urmare, rezultatele motorului de căutare pot conține nu un site cu o astfel de pictogramă, ci multe. Acest lucru nu va scoate în evidență site-ul dvs., așa că utilizați numai Favicon-uri unice create special pentru site-ul dvs. Aceasta include și situația în care sunt folosite pictograme din diferite colecții sau elemente de interfață ale altor site-uri. Amintiți-vă, pentru a ieși în evidență aveți nevoie de un Favicon unic.

#3. Când creați o pictogramă, încercați să utilizați culori mai luminoase și mai deschise; de ​​regulă, acestea atrag mai multă atenție.

#4. Nu utilizați pictograme animate. În primul rând, animația nu este acceptată de toate browserele și, în al doilea rând, atenția vizitatorului ar trebui să se concentreze asupra conținutului, și nu asupra pictogramei.

Acum să ne uităm direct la procesul de creare a unui Favicon. Există multe servicii pentru asta. Cu toate acestea, sunt mai potrivite pentru cei care au deja o pictogramă gata făcută pe care au furat-o undeva sau au luat-o dintr-o colecție. Dar, așa cum am spus mai sus, pictograma trebuie să fie unică, așa că aici mă voi uita la procesul de creare a acesteia folosind Photoshop, folosind exemplul unui site web.

Crearea unui Favicon presetat în Photoshop

#1. Creați un document nou în Photoshop care măsoară 64*64px, pentru a face acest lucru, accesați meniul „Fișier” >> „Nou...” sau apăsați comanda rapidă de la tastatură Ctrl+N. În general, pictograma în sine ar trebui să aibă 16*16px, dar este mai bine să o creați mai întâi cu aceeași dimensiune, apoi să o reduceți la dimensiunea necesară.

#2. În cazul meu, nu am niciun logo pentru site, așa că am decis să folosesc simbolul „W” cu care începe adresa site-ului, precum și culorile care predomină în partea de sus a site-ului: albastru și galben. Așa că am setat culoarea la #6A91D0 și am folosit Bucket Tool (G) pentru a da documentului creat anterior o culoare albastră.

#3. După aceea, am selectat Instrumentul de tip (T), am adăugat un simbol „W” și i-am dat următoarea valoare de culoare #FAC31D.

Pentru ca simbolul să iasă mai mult în evidență pe fundalul albastru, i-am adăugat o contur negru de 2px. Pentru a face acest lucru, trebuie să accesați elementul de meniu „Layer” >> „Layer Style” >> „Stroke”, selectați culoarea și dimensiunea conturului.

După aceasta, trebuie să îmbinați straturile, pentru a face acest lucru trebuie să mergeți la elementul de meniu „Layer” >> „Merge Visible” sau apăsați combinația de taste Shift + Ctrl + E.

Pentru a face liniile netede, fără serif, am adăugat o estompare. Pentru a face acest lucru, trebuie să accesați elementul de meniu „Filtrare” >> „Neclară” >> „Neclară gaussiană...”și setați raza la 0,3 pixeli.

Așezați simbolul sau imaginea astfel încât să ocupe spațiu maxim, deoarece dacă este mic, atunci cu o dimensiune a pictogramei de 16*16 nu va fi vizibil.

#4. Acum trebuie să modificați dimensiunea pictogramei. Pentru a face acest lucru, trebuie să mergeți la meniu „Imagine” >> „Dimensiunea imaginii”și setați dimensiunea la 16*16px.

#5. Tot ce rămâne este să salvezi pictograma. Pictograma Favicon trebuie să aibă numele favicon și extensia .ico. Chestia este că, implicit, Photoshop nu salvează imaginile în format .ico. Prin urmare, salvați-l în format .png, pentru a face acest lucru, mergeți la elementul de meniu „Fișier” >> „Salvare ca...” și selectați PNG din lista derulantă.

Conversia unei imagini în format .ICO

După aceea, îl convertim în format .ico folosind . Accesați acest serviciu și utilizați butonul „Răsfoiți” pentru a selecta un fișier salvat anterior în format PNG și apoi faceți clic pe butonul „Creați favicon.ico”.

După aceasta, linkul „Descărcați favicon.ico!” va apărea pe pagina încărcată. făcând clic pe care puteți salva pictograma Favicon finalizată pe computer.

Acum este timpul să adăugați o Favicon pe site-ul dvs., astfel încât să apară pe toate paginile sale. Pentru a face acest lucru, plasați pictograma în folderul rădăcină al site-ului dvs. Dacă site-ul dvs. este deja găzduit, acest folder se numește de obicei „public_html”. Apoi, pe fiecare pagină a site-ului dvs., înainte de eticheta de închidere adăugați următoarele rânduri:

Dar aceste rânduri trebuie adăugate la fiecare pagină dacă aveți un site HTML. Dar, din moment ce, cel mai probabil, site-ul dvs. este creat pe baza unui fel de CMS, atunci va trebui doar să adăugați aceste linii la fișierul principal al temei pe care îl utilizați pentru site.

Dacă utilizați WordPress, atunci accesați folderul wp-content/themes/folder-with-your-theme/, găsiți și deschideți fișierul header.php, apoi lipiți liniile necesare și salvați fișierul.

Dacă utilizați Joomla, atunci mergeți la șabloane/dosarul-tema-voastră/ și deschideți fișierul index.php, lipiți liniile necesare și salvați.

Este posibil ca unele teme WordPress și Joomla să aibă deja propriile căi către fișierul favicon.ico, caz în care ștergeți-le și înlocuiți-le cu ale dvs.

Dacă utilizați orice alt CMS, atunci faceți totul prin analogie.

Pe filele paginii și în bara de adrese a browserului, pictograma dvs. va fi afișată imediat, ca și pentru rezultatele căutării Yandex, aici aveți nevoie de timp pentru a trece și de un robot special de căutare Yandex pentru a vă găsi pictograma, după care va apărea în rezultatele căutării.

Material pregătit de proiect:

Astăzi vom aborda un subiect foarte interesant. Când lucrați pe site-ul dvs. web, mai devreme sau mai târziu va trebui să creați o favicon. În termeni simpli, un favicon este o pictogramă a site-ului dvs. care apare într-o filă din browser. De asemenea, îl puteți vedea în zona de acces rapid a browserului dvs. dacă site-ul dvs. a fost adăugat la Favorite.

Favicon-urile celor mai populare site-uri

Cred că nu are rost să spunem că favicon-ul ar trebui să fie de bună calitate, pentru că este, într-o oarecare măsură, fața site-ului tău. În acest articol vom învăța cum să creăm favicon-uri care să răspundă nevoilor noastre și, de asemenea, vom face cunoștință cu un serviciu de conversie a acestora. Citiți mai multe mai jos.

Versiunea video:

Cum ar trebui să fie un favicon?

Înainte de a începe să creați favicon-ul în sine, ar fi bine să ne oprim asupra a ceea ce ar trebui să fie în mod ideal. Deci, faviconul ideal:

• Este clar și de înțeles
• Fabricat de bună calitate
• Transmite semnificația site-ului dvs
• Are un stil comun cu site-ul dvs
• Se evidențiază de pictogramele altor site-uri

Parametrii de mai sus pot fi clasificați ca un favicon ideal. Și trebuie să creăm doar o astfel de pictogramă pentru site-ul nostru. Cu toate acestea, există o dezbatere despre ce anume ar trebui să fie reprezentat pe favicon. Cred că în această chestiune trebuie să porniți de la stilul și tema generală a site-ului dvs. Poate conține o imagine sau un text. Dacă textul este plasat pe favicon, acesta nu trebuie să conțină mai mult de 2 litere. În caz contrar, nimeni nu va putea citi un astfel de text, deoarece dimensiunile favicon-ului sunt în general de 16*16 pixeli.

Ce dimensiuni au pictogramele site-ului?

După cum știți, acum există o mare varietate de browsere, monitoare și dispozitive. Și cerințele lor pentru dimensiunile favicon-urilor sunt diferite. Există următoarele opțiuni de dimensiune de luat în considerare:

• 16*16px - dimensiuni standard favicon, potrivite pentru majoritatea browserelor și dispozitivelor
• 32*32px - folosit în unele cazuri în Internet ExplorerȘi Safari
• 57*57px - folosit când se afișează iPhone
• 72*72px - folosit când se afișează iPad
• 114*114px - folosit la afișarea pe ecrane retină (57*2=114)
• 144*144px - folosit la afișarea pe ecrane retină iPad (72*2=144)

Ce format ar trebui să fie favicon-urile?

Anterior, browserele acceptau doar favicon-uri în format "ico". Acum au învățat să înțeleagă alte formate, inclusiv "png". În cazul nostru, vom ucide 2 păsări dintr-o singură lovitură. Mai întâi vom crea o favicon în format "png", apoi convertiți-l în "ico".

Mai multe moduri de a crea favicon-uri

Astăzi există două moduri principale de a crea favicon-uri:

1. Prin servicii speciale online
2. Creați-l singur folosind programe speciale, cum ar fi Photoshop și Adobe Illustrator

Fiecare metodă are propriile sale caracteristici. Avantajul creării unui favicon prin intermediul serviciilor online este că nu trebuie să aveți abilități speciale pentru a face acest lucru. Pur și simplu încărcați imaginea necesară, o modificați și descărcați favicon-ul finalizat. Sau pur și simplu lucrați cu text și desenați o pictogramă folosind instrumentele serviciului online. În general, principalul avantaj al acestei metode este simplitatea ei. Cu toate acestea, cealaltă față a monedei este că calitatea unor astfel de pictograme site-uri web lasă mult de dorit. Nu veți primi un favicon unic din simplul motiv că galeria de icoane pentru serviciile online nu este nelimitată. Și când folosiți propriile imagini, folosind instrumentele serviciului, nu este atât de ușor să creați un produs de înaltă calitate. În cazul desenului manual al unei pictograme folosind instrumentele unui serviciu online, rezultatul este „ceva de neimaginat”.

Prin urmare, alegem a doua soluție, mai complexă, dar de succes. Pentru a crea o favicon vom folosi programul Photoshop. Dacă nu aveți experiență cu acest program, atunci este în regulă. Urmând instrucțiunile mele, vei finaliza cu ușurință sarcina.

Crearea unui favicon

După cum am menționat deja, o favicon poate fi creată folosind o imagine sau doar litere. În cazul nostru, voi folosi un fel de imagine. De exemplu, să ne imaginăm că avem un site web auto. Prin urmare, trebuie să găsim o imagine din zona auto. Vă sugerez să faceți pictograma site-ului nostru sub forma unei roți.

Selectarea unei imagini

Puteți face imagini de oriunde. De exemplu, prin aceeași poze Yandex. Condiția principală este ca imaginea să fie simplă, fără umbre sau volume. Acest lucru se datorează faptului că atunci când este redus la 16 pixeli, nu va avea prea multe detalii. Din cauza volumelor și umbrelor în exces, imaginea poate deveni neclară.

Găsesc o imagine potrivită folosind căutarea Google la cerere „roată”. Tot ce trebuie să fac este să-l salvez făcând clic dreapta și selectând „Salvare imagine ca”.

Imagine relevantă pe google images

Apoi, deschidem această imagine folosind Photoshop. Este foarte important ca favicon-ul să aibă un fundal transparent. În cazul nostru nu este cazul. Pentru a elimina fundalul folosim instrumentul Magic Wand. Esența muncii ei este foarte simplă. Cu acest instrument putem selecta zone de aceeași culoare dintr-o imagine. Deoarece fundalul imaginii noastre contrastează clar cu roata în sine, acest lucru va fi foarte ușor de realizat. Făcând clic o dată, selectăm o zonă cu o singură culoare. Prin apăsarea comenzii rapide de la tastatură CTRL+Șterge eliminam aceasta zona.

Îndepărtând fundalul roții noastre

Facem acest lucru cu toate părțile fundalului imaginii. Astfel, în poza noastră roata se află pe un fundal transparent, ceea ce trebuia să facem. Deci, șablonul pentru pictograma site-ului nostru este gata.

Creați o favicon în 2 dimensiuni diferite

Vă sugerez să faceți 2 favicon-uri cu dimensiuni de 64px și 16px. Mai întâi trebuie să creăm o pictogramă mai mare (64px). Pentru a face acest lucru, apăsăm comanda rapidă de la tastatură CTRL+N. În fereastra care apare, selectăm înălțimea și lățimea imaginii să fie de 64px.

Setarea dimensiunilor viitoarei favicon

Apoi, trebuie să ne mutăm roata în zona imaginii nou create. Pentru a face acest lucru, revenim la imaginea cu roata și selectăm instrumentul „Mutare”. Următorul pas este să faceți clic pe imaginea roții și, în timp ce țineți apăsat butonul stâng al mouse-ului, mutați-l în zona noii imagini. Asigurați-vă că stratul cu roata este selectat atunci când vă deplasați. În caz contrar, transferul va eșua.

Mutarea roții la o nouă imagine

După ce mutam roțile la o nouă imagine, vedem că nu se potrivesc. Trebuie să reducem roata la 64 px. Pentru a face acest lucru, ținem apăsată tasta SCHIMB iar făcând clic pe punctul diagonal al imaginii o reducem. Așa că am creat primul favicon pentru site-ul nostru. Permiteți-mi să vă reamintesc că dimensiunea noastră este de 64*64px. Acum trebuie doar să-l salvăm selectând funcția „Salvare pentru Web” din fila „Fișier”. Noi alegem formatul PNG-24și folder imagini. Numim și favicon-ul în sine, doar cu litere latine - "favicon".

Salvați faviconul

Grozav. Acum tot ce trebuie să facem este să creăm o favicon mai mică. Pentru a face acest lucru, facem clic pe fila „Imagine” și selectăm funcția „Dimensiunea imaginii”. Aici setăm lățimea și înălțimea la 16px. Acum tot ce trebuie să facem este să salvăm această imagine pentru web. Îl putem numi „favicon-2”.

Așadar, iată-ne, creând 2 favicon-uri pentru site-ul nostru în format "png". Am creat mai întâi o opțiune cu o dimensiune de 64px pentru a o reduce apoi cu ușurință la 16px. Dacă creați mai întâi o opțiune cu 16px, atunci nu o veți putea crește la 64px fără a pierde calitatea. Prin urmare, țineți cont de acest lucru pentru a nu face o muncă dublă.

Instalarea unui favicon pe site

Pentru a instala o favicon pe un site în interiorul unei etichete noi scriem:

Dacă avem un favicon în formatul " ico" atunci noi in schimb" png" scrie " ico". De exemplu:

După cum puteți vedea, pictograma site-ului este afișată așa cum ne-am propus.

Convertirea pictogramei pentru site în formatul „ico”.

Browserele moderne pot recunoaște și afișa cu ușurință favicon-urile în format "png". Cu toate acestea, poate fi necesar să-l convertiți în "ico". Unul dintre avantajele acestui format este stocarea favicon-urilor de toate dimensiunile într-un singur fișier. Sunt de acord că acest lucru este foarte convenabil. Deci, pentru a ne converti pictogramele vom folosi un serviciu cool - xiconeditor.com. Este foarte ușor să lucrezi cu el. Totul se întâmplă în 4 pași:
1. În primul rând, trebuie să ne încărcăm favicon-urile. Pentru a face acest lucru facem clic pe butonul "Import".

Încărcarea favicon-urilor în serviciul xiconeditor.com

3. Dacă doriți, puteți face clic pe butonul "Previzualizare"și vezi cum vor fi afișate. Pentru a descărca favicon-urile noastre în format "ico" facem clic pe buton "Export".

Deci, iată-ne, învățăm cum să creați favicon-uri în "png"și convertiți-le în format "ico". Nu am luat în considerare procesarea detaliată a imaginii în Photoshop, deoarece pentru mulți ar fi inutilă. Dacă este necesar, puteți, desigur, să îmbunătățiți și mai mult calitatea faviconului lucrând cu pixeli în Photoshop. Am încercat să prezint toate elementele esențiale într-o formă simplificată. Și asta e tot pentru mine. Sper că această lecție ți-a fost de folos. Daca este adevarat:

1. Repostează acest articol pe rețelele de socializare pentru ca mai mulți oameni să beneficieze de el;
2. Abonează-te la newsletter-ul meu pentru a nu pierde postări utile și interesante pe blog.

Aici nu-mi iau rămas bun de la tine. Vă mulțumim pentru atenție și ne vedem în următoarele publicații!

Ce este un favicon?

Pentru cei care nu știu ce este un favicon, vă vom oferi câteva informații care vă vor ajuta să vă actualizați. Un favicon este o pictogramă mică care măsoară 16x16 sau 32x32 pixeli, care conține de obicei un logo, prima literă a unei mărci sau o imagine caracteristică care reflectă tipul de afacere sau tema site-ului.

De ce este important un favicon?

Favicon-ul îndeplinește următoarele funcții:

Branding.

Identificarea site-ului de către utilizator (ușurință în utilizare).

Oferă site-ului un aspect profesional.

Să aruncăm o privire mai atentă la principalele avantaje ale utilizării favicon-urilor.

Recunoașterea mărcii

Favicon este ca o mică identitate a site-ului. După cum sa menționat în partea introductivă, o favicon ajută utilizatorul să-și amintească site-ul dvs. printre multele site-uri pe care le-au vizualizat. Fie că este vorba despre istoricul dvs. de navigare, rezultatele căutării Google sau lista browserului dvs. de site-uri marcate, favicon-urile ajută utilizatorii să vă recunoască și să acceseze cu ușurință site-ul dvs.

Încredere

Utilizatorii tind să judece vânzătorii online de bunuri și servicii în funcție de cât de profesional este site-ul lor. Neatenția sub forma lipsei unui favicon (motoarele de căutare afișează un site fără favicon ca o pictogramă a unui document gol) poate duce cu ușurință la o pierdere a încrederii, mai ales atunci când utilizatorii te compară cu concurenții tăi.

Vizite repetate

Se știe că oamenii răspund mai bine la imagini decât la text. Acum să presupunem că un vizitator al site-ului dvs. s-a grăbit când l-a vizitat pentru prima dată și a decis să îl marcheze ca să poată reveni mai târziu. Să presupunem că această persoană decide ulterior să vă viziteze din nou site-ul și apelează la marcajele sale. Ai noroc dacă ai o favicon care poate fi recunoscută, cum ar fi G proeminent și unic de la Google, iar utilizatorii te vor găsi. Dacă nu aveți o favicon, este posibil să fiți chiar eliminat din lista de marcaje.

Economisește timp utilizatorului

Favicon-urile economisesc utilizatorului timpul petrecut identificând un site în marcaje, istoric sau alte locuri în care browserul plasează un favicon pentru o identificare rapidă. Pur și simplu face viața mai ușoară pentru vizitatorul mediu al site-ului dvs.

Beneficii SEO

Dacă site-ul dvs. are o favicon, veți fi mai vizibil în rezultatele căutării decât site-urile care nu au una și, prin urmare, puteți atrage mai mulți vizitatori.

Cum se creează un favicon?

Există multe instrumente care vă permit să creați o favicon în câteva minute. Dacă nu aveți abilități de proiectare sau nu știți cum să o faceți, puteți încerca să generați un favicon folosind Logaster.

Pentru a face acest lucru, urmați instrucțiunile pas cu pas:

Pasul 5: Creați o favicon

Acum că aveți o siglă, faceți clic pe „Creați o favicon cu acest logo” pe pagina de logo.

Pasul 6. Selectați designul faviconului dorit

Ca și în cazul logo-ului, Logaster va genera câteva zeci de favicon-uri frumoase și gata de utilizare. Alege designul tău preferat. Previzualizarea vă va permite să vedeți cum va arăta favicon-ul dvs. pe site.

Dacă trebuie să schimbați favicon-ul, puteți face acest lucru prin editarea siglei, la fel cum favicon-urile sunt create pe baza designului logo-ului. Deci, dacă doriți, de exemplu, o culoare diferită a favicon-ului, trebuie să vă întoarceți la pagina logo-ului, să-i schimbați culoarea și apoi să creați din nou favicon-ul.

Puteți găsi inspirație pentru favicon-uri pe următoarele site-uri:

Pasul 7. Descărcați faviconul

Puteți achiziționa favicon-ul separat pentru 9,99 USD sau puteți cumpăra un pachet de design care include nu numai favicon-ul, ci și o siglă, carte de vizită, plic și antet. Puteți afla cum să cumpărați un pachet de design.

După plată, puteți descărca favicon-ul în formatele ico și png.

Unde pot folosi o favicon?

Puteți folosi favicon:

Pe site;

Dispozitive mobile. Utilizatorul poate adăuga o favicon pe ecranul de start al dispozitivului său (ceva ca un marcaj) - Android, IOS, Windows Phone etc.;

Programe și aplicații pentru PC/Mac.

Cum se instalează o favicon pe un site web?

Odată ce ați primit favicon-ul, instalarea acestuia pe server nu va dura mai mult de câteva minute și este finalizată în două etape. Pentru a face acest lucru, veți avea nevoie de acces la directorul rădăcină al site-ului dvs. și de un editor de text pentru a modifica codul HTML al site-ului.

Pasul 1. Trebuie să încărcați fișierul favicon.ico pe server. Pentru a face acest lucru, trebuie să descărcați și să instalați un client ftp, cum ar fi FileZilla. Apoi introduceți numele de utilizator și parola și descărcați fișierul. Puteți citi instrucțiuni mai detaliate despre cum să încărcați un fișier favicon.

Pasul 2. Acum trebuie să editați pagina HTML a site-ului dvs. pentru a ajuta browserele să vă găsească imaginea favicon. Cu fereastra FTP deschisă, găsiți și descărcați fișierul index.html sau header.php de pe server.

Deschideți fișierul index.html într-un editor de text - Notepad, Notepad++, Sublime Text.

Dacă site-ul dvs. conține HTML pur, inserați codul special în zona HEAD a fișierului index.html.

Codul poate fi copiat pe pagina favicon de pe site-ul Logaster.

Dacă utilizați WordPress, inserați codul de mai jos în zona HEAD a fișierului dvs. header.php.

După ce ați făcut acest lucru, descărcați fișierul înapoi de unde l-ați luat. Gata! Reîncărcați pagina site-ului pentru a vedea favicon-ul.

Majoritatea browserelor moderne sunt suficient de inteligente pentru a găsi fișierul favicon chiar și fără un astfel de cod, dar numai dacă favicon-ul are o imagine de 16x16 pixeli, numele favicon.ico, și este salvat în directorul rădăcină al site-ului tău.

Sperăm că acest articol v-a oferit câteva informații utile care să vă ajute să creați o favicon care vă va face site-ul mai de succes și mai atractiv.

Mulți oameni nu iau în serios editorii de pictograme online, dar, de fapt, astfel de instrumente facilitează foarte mult fluxul de lucru. Doar câteva clicuri vă pot economisi ore de căutare, de navigare sau de dezvoltare. În plus, nu are rost să folosim cele cu drepturi depline atunci când există servicii speciale cu funcții personalizate pentru aceste sarcini specifice.

Site-urile editorului de pictograme ca acestea sunt foarte eficiente. Acestea vă permit:

• creați ușor și rapid materiale noi;
• oferiți dezvoltărilor existente un aspect finit;
• salvați rezultatul în diferite formate (SVG, ICO și PNG);
• creați pictograme pentru .

În acest articol, am selectat cele mai bune cinci editori de pictograme gratuite online și, pentru comparație, am încercat să creăm un set în fiecare dintre ele.

IconsFlow

IconsFlow.com - pictograme vectoriale + editor care vă permite să creați seturi personalizate și să le exportați la calitate bună (SVG, ICO & PNG). Principalul avantaj al serviciului este prezența a doi editori:

• cea principală, în care sunt selectate paleta, stilul, efectele;
• Editor de formulare, unde puteți modifica forma curentă sau puteți desena una nouă.

Dacă ați creat deja pictograme în Illustrator, pur și simplu descărcați fișierele SVG și experimentați cu diferite fundaluri. IconsFlow are anumite restricții atunci când îl utilizați gratuit, așa că asigurați-vă că le citiți înainte de a începe. Există lecții și o secțiune de ajutor pentru utilizatorii începători și, de asemenea, este posibil să lucrați în editorul de pictograme în limba rusă.

Vedere a editorului de vectori IconsFlow:

Exemple de lucru:

FlatIcons

Cu FlatIcons.net vă puteți crea propria pictogramă plată (stil plat) pe baza șabloanelor gata făcute. Setați dimensiunile, alegeți un model și fundalul principal (cercuri, inele, dreptunghiuri), schimbați culoarea. Acest editor de pictograme este gratuit, dar are două dezavantaje:

• În primul rând, puteți descărca fișiere numai în format PNG.
• În al doilea rând, va trebui să creați fiecare obiect separat, deoarece... Este imposibil să dezvoltați un întreg set deodată.

În ciuda faptului că vârful popularității a trecut deja, mulți oameni le folosesc în design-ul lor. De exemplu, dezvoltatorii vă permit să descărcați un set gratuit de pictograme sociale plate. Rezultatul lucrului în editorul FlatIcons:

Launcher Icon Generator

Proiectul Launcher Icon Generator este gratuit și credem că este mai potrivit pentru utilizatorii avansați. Acest editor de pictograme online vă permite să încărcați imagini/cliparturi și să adăugați text. Puteți descărca câte o pictogramă odată în 5 dimensiuni (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).

Clipart de bază este un set de grafice în stil Material Design de la GitHub. Serviciul conține setări precum: indentări, formă, culoare de fundal sau transparență, scalare + efecte suplimentare. Rezultat:

Android Material Icon Generator este un alt instrument pentru crearea pictogramelor plate. Punctul culminant al serviciului este cu siguranță efectul sub forma unei umbre lungi. Dacă aveți nevoie de soluții similare, acest editor de pictograme va fi o opțiune ideală.

Începeți prin a selecta o imagine din galerie, apoi determinați culoarea, forma fundalului (cerc sau pătrat), lungimea umbrei, saturația, atenuarea - și pictograma dvs. este gata. Totul este extrem de simplu. Site-ul este complet gratuit pentru uz personal.

După descărcare, în fișierul de arhivă veți găsi 6 PNG-uri de diferite dimensiuni și un fișier vectorial SVG. Pictograma SVG va fi neclară în Illustrator, dar, din fericire, arată bine în browser. Rezultatul final este ceva de genul:

Site-ul Simunity este un generator HTML5 unde puteți crea o pictogramă și apoi copiați codul pentru a-l afișa în proiectele dvs. web. Pictogramele din Font Awesome sunt folosite ca materiale sursă, pentru care sunt selectați diferiți parametri: culoare, cadru, dimensiune și stil de umbre.

Acest serviciu este util dacă trebuie să creați rapid pictograme simple și originale pentru site-ul dvs. web. Rezultatul utilizării Simunity:

Total. Editorii de pictograme online discutați mai sus sunt instrumente excelente pentru optimizarea muncii designerilor. Nu are rost să descărcați programe când totul se poate face ușor și rapid online. Din această selecție, poate, se poate distinge IconsFlow. Conține cel mai mare număr posibil de funcții: galerie de pictograme, descărcare SVG, cod încorporat, previzualizare, creați propriile șabloane, exportați PNG, ICO și SVG, adaptați dimensiunea, stiluri de modă și editor de vectori încorporat. În plus, acesta este singurul editor gratuit de pictograme în limba rusă, dacă acest lucru este important pentru dvs.

Dacă cunoașteți alte servicii similare, trimiteți opțiuni în comentarii.