Program pentru crearea faviconului online. O modalitate universală de a crea favicon-uri. Favicon dintr-o imagine finalizată

Bună ziua, dragi cititori ai site-ului blogului. Conversația din articolul de astăzi se va concentra pe așa-numitele pictograme Favicon.ico. Ne vom da seama ce este un favicon, de ce trebuie să îl instalați pe site-ul dvs. web și cum să creați singur o pictogramă de dimensiunea necesară.

În principiu, pentru a crea un favicon, nu este deloc necesar să folosiți niciun generator online special, deși este destul de convenabil și simplu. Puteți încerca să o faceți în Photoshop, dar implicit, din păcate, nu poate salva imagini în format ICO. Prin urmare, pentru a învăța Photoshop să lucreze cu ICO, va trebui să instalați un plugin special.

Dar dacă nu vă simțiți confortabil cu Photoshop (la fel ca și cu acesta), atunci vă va fi mult mai convenabil să utilizați unul dintre numeroasele servicii online enumerate mai jos. Mai mult, în unele dintre ele vei putea desena o nouă pictogramă complet de la zero, iar în altele vei putea converti o imagine pe care o ai deja (care ți se potrivește) într-un format favicon.

Ei bine, cea mai ușoară opțiune este să descărcați colecția Favicon dintr-o galerie sau catalog online. Citiți mai jos despre unde le puteți obține.

Cum să creați un Favicon online și de unde puteți descărca o colecție a acestora

Permiteți-mi să dau mai întâi exemple de servicii (așa-numitele generator de favicon), unde puteți, fără abilități speciale, să creați un mini-logo complet decent pentru site-ul dvs. sau cel puțin să convertiți automat o imagine potrivită în formatul necesar pentru încărcarea unui favicon pe site.

Faviсon.cc— un generator de favicon online destul de convenabil. Folosind-o, puteți, de exemplu, să vă creați propria pictogramă de la zero (complet exclusivă), desenând-o pixel cu pixel. Pentru a face acest lucru, va trebui să faceți clic pe butonul „Creare New Favcon” din partea stângă a ferestrei de servicii.
În centrul paginii generatorului există o zonă în care fiecare pătrat este un pixel al viitorului tău favicon. Sarcina ta este să pictezi aceste pătrate cu culori diferite. Pentru a picta un pătrat cu o culoare, trebuie să bifați caseta din partea dreaptă a ferestrei de serviciu în câmpul „Color Picker”, selectați culoarea dorită din paleta situată acolo și faceți clic pe pătratul dorit. Pentru a elimina umbrirea incorectă, bifați caseta „transparentă” și faceți clic pe pătrat, în urma căruia acesta va deveni incolor (transparent).
Pentru a muta un pixel pe panza generatorului, va trebui să bifați caseta „mutare”. Puteți vedea rezultatul muncii dvs. la scară reală în zona „Previzualizare” de sub pânză. Dacă Favicon-ul pe care l-ați creat vi se potrivește, faceți clic pe butonul „Descărcare” pentru a-l salva pe computer. Ca urmare, veți primi un fișier grafic pe care apoi îl puteți descărca și încărca pe serverul de găzduire.
Acum știi cum să faci un mini logo pentru site-ul tău de la zero. Dar dacă nu ai talente grafice, atunci poți folosi serviciul generator online încărcați orice imagine pentru viitoarea favicon, care va servi ca un gol. Imaginea poate avea absolut orice dimensiune și format. Pentru a încărca fișierul cu pictogramă în serviciul online, va trebui să faceți clic pe butonul „Importare imagine” din partea stângă a ferestrei serviciului.
În fereastra care se deschide, faceți clic pe butonul „Răsfoiți” și găsiți o imagine potrivită pe computer. Apoi alegeți ce să faceți cu raportul de aspect al imaginii când o convertiți la 16 pe 16 (pătrat). Acest lucru este adevărat dacă imaginea pe care o încărcați nu este pătrată. În acest caz, sunt posibile două opțiuni: lăsați raportul de aspect neschimbat (Păstrați dimensiunile) sau convertiți imaginea într-o vizualizare pătrată (pictograma Reducere la pătrat). În al doilea caz, imaginea viitorului favicon va fi distorsionată de-a lungul uneia dintre axe.
Pentru a încărca în generatorul online și a vă converti imaginea, va trebui să faceți clic pe butonul „Încărcare”. Favicon.ico creat din acesta va fi editabil în același mod ca cel pe care l-ați desenat. Când ați terminat de lucrat la capodopera dvs., faceți clic pe butonul „Descărcare” pentru a o descărca pe computer.
Acest serviciu online are și posibilitatea de a utiliza colecții de favicon-uri create de alți utilizatori și puse la dispoziția publicului. Pentru a vizualiza exponatele disponibile în galerie, va trebui să faceți clic în partea stângă a ferestrei fie pe butonul „Ultimele Favicons” pentru a vizualiza colecțiile sortate după data creării, fie pe butonul „Top Rated Favicons” pentru a vizualiza galerii sortate după rating.
Favicon.ru- cândva acest serviciu a fost mult mai simplu decât generatorul online descris mai sus, dar recent a devenit aproape analogul său, dar numai în rusă. Favicon.ru nu numai că vă permite să convertiți orice imagine pe care o aveți (pe computer sau pe Internet) în formatul ICO cu o dimensiune de 16 pe 16 pixeli, dar face și posibil să o desenați de la zero, pixel cu pixel.
Această versiune a generatorului de favicon online este notabilă, poate, doar pentru că este domestică. De aceea a ajuns în acest articol. Deci, pentru a lucra cu el, trebuie să faceți clic pe butonul „Selectați fișierul” din partea de sus a paginii principale și să specificați calea către imaginea dorită pe computer. Imaginea descărcată și convertită în formatul Favicon.ico poate fi corectată și apoi salvată pe computer. Totul este simplu și convenabil.
Logaster.ru este un generator de logo online, dar pe lângă logo-uri, creează și o favicon. Spre deosebire de toate celelalte servicii, nu trebuie să desenați un design favicon sau să îl convertiți dintr-un logo.
Pentru a crea un favicon, trebuie mai întâi să introduceți numele site-ului sau al companiei și să selectați tipul de activitate. Serviciul va oferi câteva zeci de șabloane favicon gata de utilizare. Puteți citi mai multe despre cum să creați o favicon. După ce ați creat Favicon.ico, puteți descărca fișierul pe computer în format ICO sau PNG.

După aceea, tot ce trebuie să faceți este să faceți clic pe butonul „Creați”. Pe pagina care se deschide, veți vedea un link pentru a descărca favicon-ul rezultat.

O selecție de generatoare online, colecții și galerii de faviconuri

Dacă dintr-un motiv oarecare nu v-a plăcut generatorul de favicon descris mai sus, atunci vă pot sugera să vă încercați norocul la una dintre următoarele servicii online gratuite:

FaviconGenerator - vă permite să convertiți orice imagine descărcată de pe computer în formatul favicon dorit (puteți încărca imagini).
AntiFavicon este un generator de Favicon destul de interesant. Pe el poți creați un favicon cu o inscripție. Va trebui să introduceți textul inscripției în câmpurile „Text de sus” și „Tex de jos” și să ajustați schema de culori în zona „Culori”.
FavIcon din Pics este un alt serviciu online simplu - specificați calea către imagine pe computer, convertiți și descărcați fișierul rezultat în format ICO și GIF.
Iconj - ceea ce este remarcabil este că puteți fie să descărcați pictograma creată, fie să o lăsați în serviciu și să primiți un link către acest fișier
DeGraeve este un generator de Favicon destul de puternic, similar ca funcționalitate cu Favicon.cc revizuit anterior. Și aici puteți face totul fie de la zero, fie încărcați o imagine, care ulterior poate fi ajustată și descărcată în format ICO de o dimensiune adecvată.
Generator - vă permite atât să generați o favicon dintr-o imagine încărcată, cât și să o creați de la zero într-un editor special.
Editor de pictograme online favicon.ico - ei bine, face totul - creând favicon-uri de la zero și modificând o imagine existentă.
Favicon online este un instrument foarte funcțional pentru crearea și editarea mini-logo-urilor
Generator Favicon gratuit - în cazul în care nimic din lista de mai sus nu vi se potrivește.
Generator de favicon - simplu și de bun gust...

Dacă nu îți pasă de exclusivitatea mini-logo-ului tău pentru site și nu poți să te chinui cu editorii și generatorii, atunci poți alege o pictogramă potrivită pentru tine pe site-urile în care acestea sunt un ban pe duzină. La urma urmei, de fapt, absolut orice pictogramă care măsoară 16 pe 16 pixeli, pe care o poți descărca de pe Internet sau o poți găsi în adâncul computerului tău, ni se va potrivi.

Dar trebuie să rețineți că favicon-ul trebuie să atragă în primul rând atenția utilizatorilor. În mod ideal, un utilizator ar putea să vă recunoască site-ul doar uitându-se la Favicon, deci este mai bine dacă este unic, dar puteți căuta și ceva ieșit din comun pe internet.

Dacă nu ai dorința sau oportunitatea (nu ești artist și nu ai fost niciodată), atunci cel mai simplu mod ar fi să încerci să cauți în galerii cu colecții de favicon-uri gratuite:

Iconj este o colecție destul de mare de icoane concepute de alți oameni și puse la dispoziția publicului
Favicon.cc - 55 de mii de opțiuni diferite pentru toate ocaziile. Există, de asemenea, favicon-uri animate, care vor fi vizibile doar în browserul FireFox.
Galeria Favicon - încă câteva pictograme care se potrivesc dimensiunii

Dacă cunoașteți alte resurse similare, voi adăuga link-urile dvs. la această listă.

Cum să instalați un Favicon pe un site web și să specificați calea către acesta

Browserul dvs. și robotul de căutare Yandex vor căutați faviconul în primul rând în folderul rădăcină al site-ului dvs. Prin urmare, vă puteți conecta pur și simplu la site prin FTP și încărcați fișierul Favicon.ico în directorul său rădăcină (de obicei folderele public_htm sau htdocs) (este mai bine să îi scrieți numele cu litere mici). Acum deschideți resursa într-un browser și vedeți dacă pictograma de pe filă s-a schimbat. S-a schimbat? Nu? Ei bine, e în regulă.

Dacă nu ați reușit să plasați un favicon în acest fel, atunci poate fi necesar, deoarece... Se întâmplă adesea ca o versiune veche să fie încărcată din cache. Puteți încerca, pentru mine răspunde cel mai bine la modificările făcute fără a șterge memoria cache. Dacă problema nu se află în memoria cache a browserului, atunci aceasta înseamnă că site-ul dvs. are o locație diferită pentru favicon, diferit de folderul rădăcină. Cum pot verifica asta?

Deschideți codul sursă al oricărei pagini de pe site-ul dvs. Pentru a vedea codul sursă, faceți clic dreapta pe pagină și selectați elementul corespunzător din meniul contextual (de exemplu, „Codul sursă” în vechea Opera sau „Codul sursă paginii” în Mazila Firefox sau „Vizualizare codul paginii” în Google Chrome sau „Vizualizați codul HTML” în IE) sau apăsați comanda rapidă de la tastatură Ctrl+U. Acum uitați-vă în partea de sus a codului paginii pentru o linie care specifică calea către favicon.ico.

Ar putea arăta cam așa:

Acum, cunoscând această cale, vă puteți conecta din nou prin FTP și vă puteți încărca favicon-ul folosind calea specificată, înlocuind-o pe cea deja pe site. Dacă nu au mai avut loc modificări în bara de adrese a browserului, încercați din nou să ștergeți memoria cache a browserului.

ÎN Joomla Favicon se află de obicei în folderul cu șablonul pe care îl utilizați (calea către acesta în Joomla 1.5 a fost scrisă în fișierul index.php din directorul aceluiași șablon, dar în Joomla 3 totul a devenit puțin mai complicat). Acestea. Pentru a schimba favicon-ul în Joomla, tot ce trebuie să faceți este să urmați această cale și să încărcați fișierul favicon.ico acolo și să răspundeți afirmativ la întrebarea despre înlocuire:

/templates/folder_with_the_design_template/favicon.ico

Fișierul Favicon în WordPressîn mod implicit, poate fi și în folderul cu tema pe care o utilizați (calea către aceasta este, de asemenea, setată acolo):

/wp-content/themes/Folder_with_theme_you_are_using/favicon.ico

În general, dacă vrei setați sau modificați calea către favicon, care ar fi înțeles atât de browsere, cât și de robotul de căutare Yandex, atunci va trebui să îl scrieți în fișierul șablon corespunzător pentru Joomla, WordPress sau orice alt motor, între etichetele de deschidere și de închidere CAP, următoarele linii de cod:

În ce fișier șablon trebuie să scrieți aceste rânduri depinde de motorul site-ului dvs. De exemplu, în în WordPress trebuie să deschideți fișierul header.php pentru editare: wp-content/themes/Folder_with_your_theme_design. Deschideți header.php în editor și găsiți la început eticheta Html HEAD de deschidere. În orice loc după acesta, dar înainte de HEAD de închidere, scrieți una dintre liniile de cod de mai sus indicând calea către fișierul grafic al mini-logo-ului.

Cum să instalați favicon animat? Practic, exact la fel ca unul obișnuit. Singura diferență va fi codul introdus în șablonul site-ului dvs., cu care indicați browserelor și robotului de căutare Yandex calea către fișierul grafic dorit. Faptul este că Faviconul animat va avea o extensie GIF și, prin urmare, în liniile de cod va trebui să scrieți ceva de genul:

Aceasta este toată diferența dintre favicon-urile animate și cele obișnuite. Dar ar trebui să țineți cont de faptul că pictograma animată va funcționa doar în FireFox în alte browsere va fi statică. Yandex, când încărcați faviconul animat, îl convertește într-un format PNG static. Dar, după părerea mea, nu merită problemele - instalarea unuia animat în loc de un mini-logo obișnuit pentru un site nu are prea mult sens. Dar asta e doar IMHO meu.

Multă baftă! Ne vedem curând pe paginile site-ului blogului

S-ar putea să fiți interesat

Client FTP online Net2ftp și Google Alerts - servicii utile pentru webmasteri
Analiza site-ului web în serviciile online gratuite Pr-cy, Cy-pr, Be1, Xseo și altele
Pictograme, insigne, fundaluri, imagini și logo-uri pentru site (servicii online IconFinder, Freepik, PSDGraphics și altele)
Utilizabilitate - cum să vă faceți site-ul convenabil pentru vizitatori și să încercați să-i lăsați să citească articolele dvs. cât mai mult timp posibil
MegaIndex Tools - un set de instrumente pentru webmasteri și optimizatori
Cum să verificați compatibilitatea între browsere a aspectului unui site web în Browsershots și să configurați trimiterea unui ping când apar materiale noi
Http - ce este, cum să vizualizați anteturile și să verificați codul de răspuns al serverului, ce înseamnă codurile 200, 301, 302, 404 și 500?
Crossposting - ce este și cum se face corect
Cum să promovezi singur un site web și gratuit

Favicon -(Prescurtarea cuvintelor „pictogramă preferată”) are o dimensiune mică a imaginii 16x16 pixeli, pe care îl va vedea un vizitator al site-ului dvs. Apare lângă adresa URL a site-ului în bara de adrese a browserului. În plus, această pictogramă apare lângă numele site-ului dvs. în lista de file deschise, marcaje și rezultate ale căutării, facilitând utilizatorilor să vă găsească rapid site-ul printre alte site-uri.

Implicit ca icoane pe site este afișată o pictogramă de browser. Pentru ca site-ul să fie diferit de restul și să nu se piardă în nenumăratele file gri deschise de utilizator, trebuie să-ți faci propriul favicon original.

Deși multe browsere web moderne acceptă favicon-uri în GIF, PNG sau alte formate de fișiere populare, toate versiunile de Internet Explorer necesită totuși favicon-uri ca fișiere ICO(format Microsoft). În acest format, orice browser va înțelege pictograma dvs.

De ce ai nevoie de un favicon?

Este nevoie de o favicon pentru ca site-ul dvs. să iasă cumva în evidență din mulțime pe pagina cu rezultatele căutării și să fie vizibil în multe file deschise din browser. O pictogramă bună este ca un logo al site-ului tău, care va fi recunoscut și creează o anumită atitudine și evocă un nivel deosebit de încredere.

Desigur, un favicon poate atrage atenția utilizatorului și acesta va citi link-ul titlului articolului tău. Titlul, în combinație cu un fragment bun și o pictogramă frumoasă, va crește rata de clic și, în consecință, traficul către resursă.

Aș dori să remarc imediat că, pentru site-urile care au eticheta „GS”, pictograma în sine nu este capabilă să îmbunătățească impresia resursei. Dar este ca o întâlnire la haine. Un favicon minunat va crea cu siguranță prima impresie a site-ului, invitându-vă să vizitați.

Cum se creează un favicon

Desigur, puteți încerca să găsiți un fișier favicon.ico gata făcut pe site-ul www.iconfinder.com, dar cred că mulți ar dori să-și facă ceva. La urma urmei, este favicon-ul care vă va evidenția site-ul în rezultatele căutării. Acum știi cum să faci asta. Asadar, haideti sa începem.

Logaster este un serviciu online pentru crearea de logo-uri și elemente de identitate corporativă. În acesta, vei primi automat, în doar câteva clicuri, o pictogramă pentru site în format ICO și PNG.

Dar rețineți că niciun generator automat de logo-uri nu poate înlocui creativitatea umană.

Desigur, marile companii nu vor folosi astfel de instrumente. Vor găsi un designer scump care să creeze un logo profesional pentru ei. Dar pentru firmele mici și antreprenorii privați, un astfel de instrument poate fi util.

Cum funcționează procesul de creare a unei pictograme în Logaster?

Pentru a vă asigura că favicon-ul dvs. se potrivește cu logo-ul dvs., vi se va cere mai întâi să creați un logo (este gratuit).
Scrieți un nume și, dacă doriți, un slogan, indicați tipul de activitate, iar Logaster vă va pregăti independent multe opțiuni de logo.
Alegeți un logo potrivit, îl puteți schimba mai târziu.

Iată ce am primit

Acum puteți face clic pe butonul „Descărcați sigla”. În versiunea gratuită va fi un filigran Logaster.com pe ea

Logo-ul poate fi achiziționat. După aceea, veți putea descărca în formatul selectat (PNG, JPEG, PDF, SVG) și dimensiunea (1024 px, 5000 px).

Acum să trecem la crearea unui favicon.

Din nou, alegeți opțiunea care vă place.
Puteți schimba forma să fie pătrată, rotunjită, rotundă sau deloc.
Dacă doriți, adăugați o contur colorat făcând clic pe instrumentul Stroke.
Faceți clic pe butonul „Salvare”.

Așa a ieșit favicon-ul. In principiu, arata bine.

Cum să adăugați o favicon pe site-ul dvs

Cumpărați și activați faviconul.
Descarca-l.
Dezarhivați fișierul descărcat în folderul rădăcină al site-ului dvs.
Lipiți următorul cod pe toate paginile site-ului în etichetă :

Pachet design cu reducere

În plus, puteți achiziționa întregul set de identitate corporativă. Iată o opțiune.

Articol înrudit: Cum se conectează Yandex.Speller la WordPress

Plugin pentru crearea favicon-urilor

Există un număr mare de programe diferite pentru crearea favicon-urilor. Practic, sunt primitive, permițându-vă să creați pictograme folosind 16 culori.

Puteți crea o favicon direct în Photoshop. Pentru a face acest lucru, veți avea nevoie de un plugin care poate fi descărcat de pe www.telegraphics.com.au. Pentru a-l instala, copiați fișierul ICOFormat.8biîn directorul c:Program FilesAdobe Adobe Photoshop CS2Plug-InsFile Formats.

Folosind un plugin ICOFormat.8bi, puteți salva imagini ca „fișiere .ico”.

Cum se instalează pluginul de format ICO (Windows Icon).

Windows pe 64 de biți (Vista/Windows 7):
- Reporniți înainte de instalare;
- Plasați pluginul în folderul C:Program FilesAdobePhotoshopPlug-InsFile Formats, dar am o structură diferită, am acest fișier stocat aici: C:Program FilesAdobe Photoshop CS6 (64 Bit)Plug-in.
- Dacă rulați pe un sistem Windows pe 64 de biți și lansați versiunea pe 64 de biți a Photoshop CS4 sau CS5, descărcați versiunea pe 64 de biți a pluginuluiși puneți-l în folderul Plug-in-uri corespunzător Photoshop pe 64 de biți (adică cel din „Fișiere de program” nu „Fișiere de program (x86)”).
Mutați pluginul în folderul „Formate de fișiere” din dosarul dvs. de pluginuri Photoshop:
- Pentru Windows (32 de biți), ICOFormat.8bi
- Pentru Windows (64 de biți), ICOFormat64.8bi
- Pentru Mac OS X, ICOFormat.plugin(rețineți că sunt furnizate versiuni separate pentru CS2, CS3/4 și CS5)
- Pentru Mac OS X/Classic, icoformat
- Pentru 68K MacOS, icoformat(68K)
Dacă utilizați Corel PSP Photo X2, puneți pluginul în C:Program FilesCorelCorel Paint Shop Pro Photo X2LanguagesENPlugIns
Ieșiți și relansați Photoshop, dacă rulează deja.

Există, de asemenea, un serviciu online www.convertico.com. ConvertICO este un convertor online gratuit de fișiere ICO/PNG. Funcționează rapid și este ușor de utilizat. Este folosit pentru a converti pictogramele desktop, pictogramele aplicațiilor și favicon-urile pentru site-uri web.

Cum să faci singur favicon.ico

Deschide Photoshop.
Creați un document de 32x32 pixeli.
Inserați un obiect inteligent al imaginii finite din Illustrator.
Folosind comanda „Salvați ca”, salvați favicon-ul în format .ICO *.
Încărcați favicon-ul rezultat la rădăcina site-ului și conectați-l printr-o temă WordPress sau înregistrați-l manual în șablonul site-ului. Am scris deja despre cum se conectează favicon-ul mai devreme.

*Dacă nu aveți instalat un plugin special Format ICO (pictogramă Windows)., îl puteți descărca de pe www.telegraphics.com.au/sw/. Există pentru Mac, Windows 32, 64 de biți cu suport pentru toate versiunile de Photoshop, inclusiv CS6.

afișajul favicon

Spre site-ul dvs a afișat o favicon, poate fi plasat pur și simplu la rădăcina site-ului. Browserul și motoarele de căutare vor stabili dacă aveți un fișier favicon.ico și îl vor afișa automat. Această metodă este cea mai simplă și este eficientă în 95% din cazuri. Dar puteți include și în mod explicit o favicon.

Bună ziua, dragi cititori! Articolul de astăzi este despre crearea unui favicon (favicon.ico) pentru site-ul dvs. web. Din această postare veți afla ce este o favicon, ce dimensiuni are această pictogramă și de ce trebuie neapărat să o creați și să o instalați pe blogul dvs. În plus, articolul va oferi generatoare de favicon care vă permit să creați o favicon online în câteva minute, precum și site-uri de unde puteți descărca galerii și colecții de favicon-uri gata făcute.

Mai întâi, să ne dăm seama ce este un Favicon, de ce este nevoie de el, poate ne putem descurca fără el?

1. Ce este un favicon și pentru ce este?

Concept Favicon provine din două cuvinte în engleză Favorites Icon, care pot fi traduse ca pictogramă (imagine mică) pentru „preferate”. „Preferate” este numele dat marcajelor în browserul Internet Explorer de bază. De exemplu, arată astfel în browserul Chrome:

Pentru fiecare resursă există o imagine mică, ceva ca un mini . Sunteți de acord că este mai convenabil să marcați nu adresele URL ale site-urilor, ci siglele lor mici - favicon-uri. Apropo, pe lângă aceasta, favicon-ul este afișat în bara de adrese a browserului imediat înainte de adresa URL a paginii deschise a site-ului sau în titlul marcajului:

Favicon este un fișier mic (16x16 pixeli) cu extensia .ico (această extensie este folosită de sistemele de operare pentru a stoca pictograme). Aproape fiecare site web are Favicon.ico, indiferent pe ce găzduire se află sau ce motor/temă folosește. Generatoarele și galeriile de favicon online vă permit să creați o pictogramă în câteva minute din orice imagine, să o desenați de la zero sau să descărcați una gata făcută, așa că, dacă nu utilizați deja un favicon pe blog, corectați rapid situatia.

Pentru ce este această poză mică? În primul rând, acesta este un mini logo pentru site-ul dvs., vizitatorii dvs. își vor aminti mai bine. Prin urmare, dacă decideți să-l creați, atunci încercați să vă asigurați că favicon-ul atrage atenția vizitatorilor și este ușor de reținut. Și în al doilea rând, cel mai popular motor de căutare din RuNet, Yandex, își plasează favicon-ul lângă fiecare site în rezultatele sale, ceea ce vă permite să vă evidențiați resursa de la altele care nu au o pictogramă. Utilizatorii sunt mai dispuși să viziteze acele site-uri lângă care există o imagine (indiferent de ce), ceea ce înseamnă că favicon-ul permite .

Apropo, Yandex are chiar și un bot special care nu indexează conținutul de pe site, ci doar indexează favicon-urile de resurse. După ce ai creat un favicon și l-a instalat pe site, va trebui să așteptați puțin până când același bot Yandex îl indexează, iar acest proces durează de obicei de la o săptămână la o lună. Există trei moduri de a verifica dacă Yandex a indexat favicon-ul dvs.:

Introdu adresa site-ului tău în caseta de căutare din Yandex (de exemplu, http://site) și vezi dacă există un favicon în apropiere.
Urmați linkul http://favicon.yandex.net/favicon/ site-ul web(unde trebuie să înlocuiți „site” cu adresa URL a site-ului dvs.). Dacă pictograma este indexată, o veți vedea.
Accesați Yandex.Webmaster (http://webmaster.yandex.ru) și verificați prezența favicon.ico

2. Generatoare și galerii Favicon online

Deci, ne-am dat deja seama ce este un favicon, care este atât de necesar pentru un site. Am aflat că ar trebui să fie de 16 pe 16 în pixeli, iar extensia sa ar trebui să fie .ico. Acum există mai multe moduri de a crea favicon.ico:

Descărcați o pictogramă gata făcută din galeriile de favicon.
Creați o favicon de la zero folosind Photoshop sau un generator online.
Faceți un favicon dintr-o imagine finită (dimensiunile imaginii nu sunt importante).

2.1 Colecții și galerii Favicon

http://www.thefavicongallery.com/ — o mică galerie care include pictograme pe o varietate de subiecte. Conține aproximativ 300 de imagini. Pentru a descărca fotografia care vă place, trebuie să faceți clic dreapta pe ea și să selectați „salvare ca”, apoi să salvați favicon-ul pe computer.
http://www.iconj.com/— mai mult de 3 mii de pictograme pentru fiecare gust și culoare. Este posibil să salvați imaginea în format .gif sau .ico. Puteți chiar să luați codul html al pictogramei. Există faviconuri animate. Singurul dezavantaj al colecției este că există doar 30 de pictograme pe o pagină, așa că va trebui să vă uitați prin multe pagini pentru a alege imaginea potrivită.
http://www.favicon.cc/– o colecție uriașă de favicon-uri, dar există doar 20 de piese pe o singură pagină, va dura mult timp pentru a derula.
http://www.favicon.co.uk/- de asemenea, o galerie bună care conține multe favicon-uri. Există 144 de pictograme pe fiecare pagină, ceea ce face navigarea foarte convenabilă. Temele favicon-urilor sunt foarte diferite.
— o mică colecție (84 de bucăți) de mini-imagini pentru site-ul dvs.

2.2 Cum să faci o favicon pentru un site web de la zero

Avantajul creării unui favicon de la zero este că pictograma rezultată va fi unică, iar unicitatea este foarte importantă! Prin urmare, este mai bine să nu fii leneș și să petreci 5-10 minute creându-ți propriul favicon.

Nu ar trebui să fie probleme cu generarea pictogramei, deoarece... totul este clar aici.

2.2.4 Favicon-Generator.org

Un alt generator de favicon online bun. Puteți ajunge la el folosind acest link - http://favicon-generator.org/.

Nici cu acest generator nu ar trebui să fie probleme. Captura de ecran arată funcțiile generatorului de favicon online.

2.3 Cum se creează un Favicon pentru un site web dintr-o imagine existentă

Dacă nu doriți să faceți o favicon pentru site-ul dvs. de la zero, puteți utiliza o imagine care va deveni baza unui mini-logo. În acest caz, va trebui să pregătiți o imagine în avans (de preferință una pătrată, altfel modelul poate fi distorsionat la crearea favicon.ico) și apoi să o utilizați în serviciul online generator de favicon. Să ne uităm la cele mai populare două resurse.

2.3.1 Favicon.ru

Generatorul online este foarte ușor de utilizat, poate converti cu ușurință orice imagine de orice dimensiune într-o pictogramă mică de 16x16 pixeli. Acum veți vedea singur cât de ușor este să lucrați cu acest serviciu.

Există două moduri de a adăuga o imagine:

Folosind butonul „Selectați fișierul”, găsiți imaginea dorită pe computer și încărcați-o.
Introduceți în câmp adresa imaginii de pe Internet (acest fișier poate să nu fie nici pe computerul dvs.), iar serviciul va face totul singur.

După ce fișierul este descărcat, tot ce trebuie să faceți este să faceți clic pe „ Creează favicon.ico!" și așteptați câteva secunde. În continuare, va trebui doar să descărcați favicon-ul pe computer.

2.3.2 Favicon.cc

Acest generator online este mai puternic decât precedentul, dar și mai complex. Pentru a începe, urmați linkul - favicon.cc, apoi faceți clic pe „Importați imaginea” (în fereastra din stânga).

Apoi, faceți clic pe butonul „Selectați fișierul” și încărcați imaginea dorită. Pe baza acestuia, va fi creată o favicon pentru site-ul dvs. În acest caz, va trebui să alegeți ce să faceți cu imaginea atunci când o reduceți:

Păstrați dimensiunile – lăsați neschimbat raportul de aspect al imaginii.
Pictograma Reducere la pătrat – face ca părțile laterale ale imaginii să pară pătrate, dar imaginea poate fi distorsionată.

După ce încărcați fotografia, o puteți edita în generatorul online sau o puteți lăsa neschimbată. Dacă sunteți mulțumit de favicon.ico rezultat, descărcați-l pe computer.

3. Cum se instalează o favicon pe un blog WordPress

Cel mai adesea, favicon-ul se află în folderul rădăcină al site-ului, în plus, este mai convenabil, așa că vom lua în considerare această opțiune. Acest lucru se face în doi pași.

PRIMUL PAS. În primul rând, va trebui să găsiți o linie de cod html în tema care specifică calea către favicon. Pentru un blog WordPress, trebuie să găsiți fișierul header.php (Header) și să găsiți linia, ar trebui să arate cam așa (poate diferi ușor în funcție de temă):

Trebuie să înlocuiți această linie cu următoarele două:

< link rel= "icon" href= "/favicon.ico" type= "image/x-icon" >

< link rel= "shortcut icon" href= "/favicon.ico" type= "image/x-icon" >

IMPORTANT! Aceste linii ar trebui să fie plasate în interiorul etichetelor Și

AL DOILEA PAS. Acum trebuie să adăugați favicon-ul în folderul rădăcină al site-ului. Accesați găzduirea dvs. și plasați un fișier numit favicon.ico(dimensiune 16x16 pixeli).

Dacă ai făcut totul corect, acum site-ul tău are propriul său favicon.

Favicon (în engleză: Pictogramă favorită) este o pictogramă mică (imagine, imagine) într-un format special care este afișată în bara de adrese a browserului atunci când vizualizați un site web, fila browserului sau în marcajele acestuia („Favorite”).

favicon este un decor suplimentar pentru site-ul dvs., mini logo-ul dvs. De asemenea, este afișat atunci când vizualizați o listă de site-uri în căutările Yandex și Google și face site-ul dvs. să iasă în evidență de restul.

De ce ai nevoie de o favicon pentru un site web?

favicon este o marcă comercială a site-ului dvs. Multe companii au astăzi un favicon distinctiv care le diferențiază de concurenții lor. Pentru ca icoana să fie mai bine amintită de utilizatori, companiile ar trebui să-și afișeze logo-ul în ea, care ar trebui să fie și unul dintre elementele antetului site-ului. O altă caracteristică pozitivă a utilizării unui favicon este că atunci când vizualizați un număr mare de site-uri într-un browser, nu vedeți întregul titlu al paginii, ci doar pictograma și puteți identifica imediat și ușor fila în care doriți să mergeți.

Ce este mai bine de afișat pe o favicon?

Pictograma trebuie să corespundă temei site-ului.
brand, dacă site-ul dvs. este asociat cu această marcă. În același timp, diferite mărci pot fi afișate pentru diferite pagini;
Utilizați o favicon pe care doriți să faceți clic, aceasta va crește rata de clic atunci când vizualizați în căutări Yandex și Google;
Creați mai multe modele de favicon pentru diferite secțiuni ale site-ului dvs.
Faceți mai multe modele de favicon pentru diferite evenimente (de exemplu, Anul Nou, Ziua Îndrăgostiților sau Ziua Cosmonauticii, :).

Plasați fișierul rezultat în rădăcina site-ului dvs., unde se află fișierul index principal (index.php). Pentru a indica browserului locația favicon-ului site-ului în secțiunea de cap a paginii, introduceți următorul rând:

Cum să faci o favicon animată?

Formatul ICO nu acceptă animația. Dar browserele moderne vă permit să utilizați formatul GIF pentru miniaturi. Este posibil să specificați un fișier animat (favicon.gif) pentru browserele moderne și altul (favicon.ico) pentru cele vechi, cum ar fi Intertet Explorer. Pentru a face acest lucru, adăugați următoarele două linii la secțiunea de cap:

Desigur, mai întâi trebuie să plasați ambele fișiere în folderul rădăcină al site-ului.

Ce să faci dacă afișarea imaginilor în browser este interzisă?

Dacă faceți un favicon cu o imagine încorporată în codul paginii:

Apoi pictograma va fi afișată în browser chiar și atunci când imaginile sunt dezactivate. .

Cum să obțineți favicon de pe un site web

Nu toți webmasterii plasează favicon.ico la rădăcina site-ului. Pentru a obține adresa favicon, utilizați următorul script:

]*)link([^>]*)(rel="icon"|rel="pictogramă comandă rapidă")([^>]*)>/iU", $html, $out)) ( $link_tag = $out ; if (preg_match("/href([s]*)=([s]*)"([^"]*)"/iU", $link_tag, $out)) ( $favicon = trim($out) ; if (strpos($favicon, "://")===false) $favicon = "/" ltrim($favicon, "/" ) ?>

Motoarele de căutare Google, Yandex și favicon

Roboții motoarelor de căutare memorează în cache pictogramele site-ului web. Pictogramele memorate în cache sunt disponibile pentru următoarele solicitări:

În plus, Yandex vă poate face un „sprite” din pictogramele diferitelor site-uri:

Pictograme pentru iPhone și iPad

Chiar dacă nu specificați un link către poză, iPhone-ul va căuta totuși un fișier numit apple-touch-icon.png în folderul rădăcină al site-ului și dacă îl găsește, va lua poza de pe el, rotund. este în colțuri și i se va aplica automat un evidențiere. Pentru a evita acest lucru, în loc de apple-touch-icon.png ar trebui să scrieți apple-touch-icon-precomposed.png proprietarii de iPhone și iPad-uri, deoarece Pentru ei facem o pictogramă frumoasă de 57x57 (apropo, poate fi mai mare, dar aceasta este dimensiunea standard a pictogramei de pe ecranul de prânz), conectând-o astfel:

Cum se schimbă dinamic favicon?

Dacă încercați să modificați valoarea unei proprietăți de etichetă prin DOM, nu veți obține rezultatul dorit. Pentru a schimba în mod dinamic pictograma paginii, trebuie mai întâi să eliminați eticheta de link cu vechea pictogramă din titlul paginii, apoi să o adăugați cu noul conținut. Acest lucru se face astfel: // Link către noul fișier pictogramă var icon="new_favicon.ico"; var head = document.getElementsByTagName("head"); // Găsiți și eliminați pictograma veche din eticheta HEAD var links = head.getElementsByTagName("link"); pentru (var i = 0; i< links.length; i++) { var lnk = links[i]; if (lnk.rel=="shortcut icon") { head.removeChild(lnk); } } // Добавить новую иконку var link = document.createElement("link"); link.setAttribute("href",icon); link.setAttribute("type","image/x-icon"); link.setAttribute("rel","shortcut icon"); head.appendChild(link);

HTML5 și favicon

Atributul sizes a fost adăugat la HTML5, permițându-vă să declarați mai multe versiuni diferite ale aceleiași pictograme, iar acestea pot fi fișiere PNG:

Cum să declari o țiglă pentru tablete pe Windows 8?

Anunțul pentru Windows 8.0 arată cam așa:

Windows 8.1 și IE 11 se așteaptă la versiuni multiple ale imaginii declarate în browserconfig.xml. De exemplu:

Nu trebuie să îl declarați dacă numele fișierului nu este schimbat:

#2b5797

Sincer, îmi place foarte mult faviconul. Am pentru el o dragoste platonică profundă, la fel de castă. Acest lucru nu înseamnă că le spun colegilor mei webmasteri povești despre cum am schimbat favicon-ul și traficul a crescut cu 10% (deși așteptați... poate că s-a întâmplat), dar înseamnă că atunci când favicon-ul noului meu site apare în Index Yandex, site-ul în sine începe să mi se pară un pic mai SDL.

Ce este un favicon?

Favicon (Favicon – prescurtare de la „pictogramă preferată”) este o imagine care este afișată în bara de adrese a browserului înaintea adresei, în fila corespunzătoare ferestrei cu pagina deschisă a site-ului, precum și la adăugarea unei resurse la filele de favorite. Aceste imagini pot ajuta utilizatorul să-și amintească mai bine marca sau compania și să sporească recunoașterea site-ului. Adesea, o imagine redusă sau ușor modificată a unei companii sau a logo-ului mărcii este folosită ca favicon.

Beneficiile folosirii unui favicon

Folosirea unei favicon aduce beneficii în timp. De exemplu, verificați aceste opțiuni:

Atunci când un utilizator deschide multe file în browser, poate determina imediat pe care dintre ele se află site-ul, chiar dacă textul cu numele nu mai este afișat;
În rezultatele căutării Yandex, favicon-ul este afișat în stânga site-ului sau a paginii sale, ceea ce atrage atenția vizitatorilor și îl distinge de alții;
Imaginea este bine amintită și rămâne în memorie - ca urmare, site-ul devine mai ușor de recunoscut și mai atractiv pentru utilizatori.

Astfel, o favicon face parte din imaginea site-ului, care îndeplinește nu numai o funcție estetică, ci face și mai convenabilă pentru utilizator să caute portalul în marcaje, file și rezultatele căutării.

Caracteristicile Yandex care lucrează cu faviconuri

Motorul de căutare Yandex este unul dintre puținele care evidențiază favicon-urile site-ului și le afișează atunci când construiesc o listă de rezultate de căutare. Pentru a face acest lucru, un bot special indexează periodic site-urile și actualizează informații despre prezența favicon-urilor.

Anterior, actualizările favicon au avut loc o dată la două luni. Acum, în 2018, Yandex le indexează mult mai viguros și pe unele dintre noile mele site-uri favicon-ul apare în câteva zile.

Pentru a verifica dacă Yandex afișează o favicon, vă puteți găsi portalul în lista de căutare și puteți vedea dacă pictograma este vizibilă în stânga acesteia. De asemenea, puteți introduce următoarea construcție în bara de adrese: pentru Yandex - http://favicon.yandex.net/favicon/www.site.ru (unde în loc de www.site.ru trebuie să introduceți domeniul site-ului dvs. ). O Favicon creată corect va fi afișată pe un fundal negru, ceea ce înseamnă că Yandex îl vede.

Dacă favicon-ul nu este vizibil, acest lucru se poate datora următoarelor motive:

Dimensiunea imaginii nu corespunde cu dimensiunea cerută: 16x16 pixeli;
Formatul imaginii nu este același - ar trebui să fie ico, jpeg sau png (prima opțiune este mai de preferat pentru Yandex);
Imaginea este neclară sau nu este unică - uneori din aceste motive motorul de căutare blochează pictogramele;
Yandex actualizează sistemul - apoi, după ceva timp, totul ar trebui să se corecteze;
Site-ul este situat mai departe de a suta poziție în rezultatele căutării - în acest caz, favicon-ul poate să nu fie afișat.

După verificarea imaginii conform acestor criterii, trebuie să corectați deficiențele. Dacă după aceasta pictograma nu este afișată, puteți contacta asistența Yandex.

Pentru ca un favicon să fie afișat în Yandex.Direct, acesta trebuie să fie proiectat corect și amplasat în locul potrivit pe site. Apoi robotul de căutare Yandex îl va indexa și începe să îl arate în rezultatele căutării. Acest lucru se întâmplă de obicei la 2-4 săptămâni după ce site-ul este publicat cu modificări. Nu este nevoie să notificați sau să cereți lui Yandex să publice favicon-ul, acest lucru se va întâmpla automat după ce a trecut un anumit timp după ce apare pe portal.

Cum se creează un favicon

Dacă doriți să creați un fișier ico dintr-o imagine mare într-un format, de exemplu, png, atunci ar fi o idee bună să instalați mai întâi Adobe Photoshop. Apoi este instalat pluginul ICO pentru Photoshop (căutați pluginul pentru versiunea dvs. de FS într-un motor de căutare). Când este instalat, copiem fișierul dorit ICOFormat.8bi (pentru 32 de biți) sau ICOFormat64.8bi (pentru 64 de biți) pe una dintre următoarele căi:

C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-in-uri\File Formats
C:\Program Files (x86)\Adobe\Adobe Photoshop CS6\Plug-ins\File Formats

Dacă nu există un folder „Plug-in-uri” sau „Formate de fișiere”, atunci trebuie să îl creați. Acum, în dialogul de salvare, puteți selecta formatul ico. Dimensiunile pictogramelor create pot fi multipli de 8 (16×16, 24×24, 32×32 și așa mai departe, dar cel mai sigur este să alegeți 16×16).

Imaginea care urmează să devină favicon este apoi deschisă în Photoshop. Faceți clic pe „Imagine – Dimensiune imagine” și dimensiunea imaginii se schimbă la 16x16 pixeli. Apoi apăsați „Fișier – Salvați ca” și selectați formatul ICO (numele fișierului ar trebui să fie favicon.ico).

Eu însumi am convertit recent imaginile în format ico fără Photoshop. Utilizarea serviciului https://realfavicongenerator.net/.

< link rel = ”shortcut icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ >

< link rel = ”icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ >

După ceva timp, favicon-ul va apărea pe site.

Unii oameni inteligenți fac un favicon sub forma unei săgeți, a unui triunghi și adaugă elemente roșii, astfel încât utilizatorul să facă clic. Acest lucru, desigur, se poate face, dar pentru aceasta site-ul poate fi coborât artificial.

Yandex îi sperie pe tocilarii favicon

Când proiectați o pictogramă, rețineți că imaginea trebuie să fie clară și vizibilă, în ciuda formatului mic. Prin urmare, este mai bine să folosiți cât mai puține obiecte individuale și nu prea multe culori. Puteți să vă uitați la faviconurile concurenților și să vă gândiți cum vă puteți evidenția dintre ele.

Servicii

Există, de asemenea, programe și resurse speciale pentru crearea pictogramelor, printre care sunt populare următoarele:

favicon.cc - cel mai simplu editor vă va permite să creați o imagine simplă, principiul de funcționare este un pic ca Paint. De asemenea, sunt selectate culori și se realizează un desen făcând clic pe pătratele de pixeli care trebuie pictate. Există un instrument de remediere. Imaginea creată poate fi salvată și pe computer ca imagine favicon finală. Pe măsură ce lucrați, în partea de jos a ecranului puteți vedea rezultatul preliminar în forma în care va fi afișat în browser. Resursa oferă, de asemenea, o selecție largă de pictograme gata făcute;
favicon.ru – aici este mai bine să creați favicon-uri din imagini gata făcute. Imaginea este descărcată de pe computer, procesată de sistem și convertită într-un fișier favicon.ico, care poate fi apoi descărcat;
iconj și audit4web sunt baze de date în care puteți găsi favicon-uri gata făcute.

Există și un astfel de serviciu:

Puteți apela la un designer pentru a dezvolta imaginea, dar aceasta va costa mult mai mult.

Un alt aspect este că imaginea pentru pictogramă nu poate fi animată, este întotdeauna nemișcată, chiar dacă a fost folosită ca bază o imagine cu efecte non-statice.