Program pentru crearea faviconului online. Favicon din imaginea finită. Caracteristicile Yandex care lucrează cu favicon-uri

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, în ce dimensiuni vine 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 „favorite”. „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 o pictogramă pe blog, atunci remediați situatie rapid.

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ă o 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 favicon.ico

2. Generatoare și galerii de 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:

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

2.1 Colecții și galerii Favicon

  1. 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.
  2. 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ă.
  3. 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.
  4. 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.
  5. — 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 Micșorare la pătrat – aduceți părțile laterale ale imaginii la un aspect pătrat, 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 trebuie 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-urile sunt foarte mici, dar în niciun caz ultima parte a fiecărui site. Au apărut odată cu nașterea internetului și rămân la cerere până în prezent. Există mai multe moduri de a le crea. Puteți folosi pluginuri pentru programe sau puteți folosi utilitare web speciale. Să vorbim despre ei.

X-Icon-Editor

Spre deosebire de instrumentul anterior, favicon.cc conține mai puține instrumente de desen. Aici puteți desena doar pixeli individuali cu o anumită culoare și transparență. Acest instrument vă permite, de asemenea, să importați imagini, să le editați după cum este necesar și să le exportați ca favicon-uri.

Datorită unui panou special, în timp ce desenați un favion veți vedea imediat cum arată în browserul Internet Explorer.

Antifavicon

Dimensiunea standard a faviconului (16x16) este, desigur, prea mică pentru text. Cu toate acestea, Antifavicon vă permite să încadrați două linii de text în acel spațiu mic. Fontul folosit cu siguranță nu este atât de grozav, dar ce poți face :).

Cadrul dat, desigur, constrânge. Cu toate acestea, după ce te uiți la câteva exemple, poți veni cu ceva destul de interesant.

Faviconist

Ultimul serviciu pe care îl vom analiza este Genfavicon. Aici puteți încărca o imagine, o puteți converti într-o pictogramă și puteți vedea imediat cum va arăta în browser. După aceea, puteți descărca o pictogramă de o anumită dimensiune.

Toate serviciile despre care am discutat astăzi au avantajele și dezavantajele lor. Cu toate acestea, printre ei se numără și cei care pot oferi ceva mai mult decât concurenții lor. Așa că marcați aceste site-uri. Cu siguranță îți vor fi de folos.

O nouă lecție în stil atelier și de data aceasta aflăm secretele faviconului. Favicon - o pictogramă mică care apare în marcaje și în bara browserului. Dacă ai propriul tău site web și vrei să ieși în evidență față de ceilalți chiar și în lucruri mărunte - favicon necesar. Desigur, arată cel mai avantajos printre marcaje, pe fundalul unei liste decolorate de adrese fără nicio identificare grafică. Cu toate acestea, lecția noastră nu este atât despre cum să atașați o favicon la bara browserului, cât despre cum să vă desenați propria favicon în Photoshop.

În ce format ar trebui să salvez favicon-ul?

Totul depinde de browser. Pentru Microsoft Explorer format de pictogramă adecvat ICO. Am întâlnit deja acest format când am făcut cursorul. Pentru alte browsere de la Google Chrome inainte de Apple Safari obișnuit va face GIF sau PNG. Favicon poate fi translucid. Pentru a face acest lucru, trebuie să îl salvați în translucid PNG, apoi convertiți în format ICO. Acest lucru se poate face într-un program bun IcoFX. Cu toate acestea, există o mulțime de site-uri terțe pentru generarea de favicon-uri, iar cel mai evident dintre ele este www.favicon.ru

Cum să plasezi un favicon pe un site web?

Cum să fii sigur că favicon Va funcționa? Trebuie îndeplinite 4 condiții.

  • Fișierul ar trebui să fie numit - favicon.
  • Dimensiunea faviconului 16 pe 16px
  • Locul optim pentru un favicon este folderul rădăcină al site-ului.
  • Scrieți adresa pictogramei în metaetichete hederîn indexul site-ului.

În expresia HTML arată astfel:

Puteți crea mai multe pictograme pentru browsere diferite, de exemplu una în format ICO, iar celălalt în PNG si indica toate acestea prin eticheta legătură . Browserele moderne caută cel mai adesea un fișier în rădăcina site-ului numit favicon, cu toate acestea, pentru a fi sigur, nu strica să indicați linkurile exacte.

Creați o favicon în Photoshop

Crea favicon foarte simplu. Vrei să faci unul ca acesta? favicon ca VKontakte sau Odnoklassniki? Bun favicon nu se poate face prin reducerea imaginilor mari în tot felul de „generatoare” favicon, care sunt pline de ele pe Internet. Favicon-ul este foarte mic. De fapt, suntem oarecum artă cu pixeli, care are propriile sale caracteristici. Nu puteți scrie o scrisoare și doar o reduceți la 16px .

Ca favicon va fi neclară și neclară, deoarece marginile literei se vor suprapune cu câțiva pixeli la redimensionare. Se va dovedi oarecum anti-alias, ceea ce este de obicei bun, dar în cazul pixel art-ului, astfel de tranziții pur și simplu nu sunt necesare. Pe de altă parte, ar trebui să evitați „fărâmarea” excesivă a rotunjirii, altfel veți ajunge cu gif-uri hello 1999.

Creați un fișier de dimensiune 16 X 16px . Vom crea un translucid foarte simplu favicon s sub forma unei scrisori, cu un pic de profunzime. Adâncimea va fi creată prin umbră și gradient.

Desenarea fundalului

De ce în introducerea acestei lecții vezi un uriaș neted și lins favicon? Pentru că l-am mărit pentru introducerea la lecție. Cum am reușit să măresc imaginea calitativ? 16px? Foarte simplu, lucrez întotdeauna în vector dacă este posibil să-l folosesc și dacă are sens. Iar vectorul suportă cu ușurință orice transformare și nu își pierde calitatea.

Selectați un instrument Instrument dreptunghi rotunjit. În panoul de setări, selectați modul, care vă va permite să desenați în vector. În meniul derulant al panoului există o bifă - Snap la pixeli. Acest lucru este necesar pentru ca traseele vectoriale să fie fixate în pixeli și să nu se deseneze „între” ei.

Avem o suprafață favicon, iar marginile translucide vor crea o rotunjime netedă. Acum este timpul să scapi de fundalul alb, nu este nevoie. Opriți vizibilitatea acestuia. Sau faceți dublu clic pe strat, transformându-l într-un strat obișnuit, apoi ștergeți-l.

Bună ziua, dragi cititori ai site-ului blogului. Conversația din articolul de astăzi va fi despre 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 reface o imagine existentă (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.

  1. 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 rezultat, veți primi un fișier grafic pe care îl puteți descărca și încărca apoi 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 drept blanc. Poza poate avea absolut orice dimensiune și format. Pentru a încărca fișierul pictogramă în serviciul online, va trebui să faceți clic pe butonul „Importați imaginea” 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 dvs. 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.

  2. 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 casnică. 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.

  3. 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ă faci este să dai clic pe butonul „Creează”. 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:

  1. FaviconGenerator - vă permite să convertiți orice imagine descărcată de pe computer în formatul favicon dorit (puteți încărca imagini).
  2. 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”.
  3. 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.
  4. 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
  5. 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ă.
  6. 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.
  7. Editor de pictograme online favicon.ico - ei bine, face totul - creând favicon-uri de la zero și modificând o imagine existentă.
  8. Favicon online este un instrument foarte funcțional pentru crearea și editarea mini-logo-urilor
  9. Generator Favicon gratuit - în cazul în care nimic din lista de mai sus nu vi se potrivește.
  10. 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 faviconuri gratuite:

  1. Galerie de pictograme pentru site-ul favicon.ico - peste 15.000 de mini-logo-uri pentru site-ul dvs. pentru orice gust și culoare
  2. Iconj este o colecție destul de mare de icoane concepute de alți oameni și puse la dispoziția publicului
  3. 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.
  4. 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 combinația de taste 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 de 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 inserat î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 vă rugăm să rețineți că pictograma animată va funcționa numai î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

Puteți viziona mai multe videoclipuri accesând
");">

S-ar putea să fiți interesat

Analiza site-ului web în serviciile online gratuite Pr-cy, Cy-pr, Be1, Xseo ș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
Client FTP online Net2ftp și Google Alerts - servicii utile pentru webmasteri
Pictograme, insigne, fundaluri, imagini și logo-uri pentru site (servicii online IconFinder, Freepik, PSDGraphics și altele)

Un element foarte important al designului blogului este favicon-ul - o imagine mică (16x16 pixeli). Dimensiune mică - dar efect uriaș! Acest articol este dedicat modului de a crea o favicon (favicon.ico) pentru un site web online folosind servicii speciale. Veți afla mai multe despre ce este această pictogramă favicon, pentru ce este folosită, ce funcții are, cum să o adăugați pe blogul dvs. și să o creați online. Veți afla și unde descărcați o colecție de ico-uri favicon gata făcute pentru site.

În general, postarea este foarte informativă și interesantă, îi sfătuiesc cu căldură pe cei care nu au încă favicon să o citească.

Mai întâi, să aruncăm o privire mai atentă la ce este un Favicon și pentru ce este folosit.

Favicon este o abreviere a două cuvinte (ICONA FAVORITES în engleză), care se traduce ca o pictogramă (o imagine foarte mică) pentru „Favorite”. Favorite– așa se numesc marcajele în browserul Internet Explorer. Favicon-ul arată cam așa:

Crearea unui favicon pentru un site web a devenit foarte ușoară, așa că acest mini-a câștigat o mare popularitate. În plus, puteți descărca o pictogramă ico favicon gata făcută pentru site, pe care trebuie doar să o adăugați. După ce ai ales-o pe cea potrivită din galerie, poți să-ți decorezi site-ul web cu el și să-l admiri în browser (iată cum arată această mini-imagine în Chrome):

Deci, un favicon este o imagine mică de 16x16 px, cu o extensie .ico (extensie icon). Deoarece Pictograma a câștigat o mare popularitate; aproape fiecare site o are și acesta este un alt motiv pentru a crea o favicon pentru un site online. Nu contează ce fel de găzduire utilizați, pe ce motor rulează blogul dvs. - în orice caz, puteți crea online și apoi instalați un favicon sau descărcați un favicon gata făcut pentru site. Datorită generatoarelor moderne de pictograme, crearea lor nu durează mult timp - unul sau două minute și totul este gata.

Încă nu ai un favicon? Să te faci bine în curând!

La ce se folosește această mini-imagine? În primul rând, o favicon pentru un site web este ca un logo pentru o companie comercială, aceasta este o modalitate de a ieși în evidență din mulțime. Vizitatorii vă vor recunoaște site-ul uitându-se la imaginea favicon. În al doilea rând, Yandex folosește și imagini favicon și le afișează lângă rezultatele căutării, ceea ce permite site-urilor cu favicons să arate mai bine în comparație cu altele. Aceasta înseamnă că utilizatorii vor merge mai des pe site-ul tău, deoarece pictograma îi va „atrage”. Cu alte cuvinte, această mini-imagine vă va ajuta. Iată cum arată:

Ei bine, acum vrei să știi cum să faci un favicon? Citiți mai departe și puteți alege o favicon pentru site-ul dvs. din numeroase colecții.

Apropo, motorul de căutare Yandex are chiar și un robot special care indexează aceste pictograme și le încarcă în baza de date a motorului de căutare. După ce creați un favicon și îl instalați pe site-ul dvs., Yandex îl va indexa după ceva timp (de obicei nu mai mult de o lună) și va începe să îl afișeze în rezultatele căutării. Puteți verifica oricând dacă mini-logo-ul dvs. se află deja în baza de date a motorului de căutare. Puteți face acest lucru într-unul din 3 moduri:

  • Introduceți site-ul dvs. în caseta de căutare Yandex și veți vedea dacă există o favicon lângă el.
  • Introduceți linkul http://favicon.yandex.net/favicon/ în browser site.ru, unde înlocuiți site.ru cu adresa site-ului dvs. Dacă fava este indexată, o vei putea vedea.
  • Accesați panoul Yandex.Webmaster, favicon-ul este reflectat și acolo.

Acum haideți să aflăm de unde puteți descărca o favicon pentru site.

2. Generatoare și colecții de favicon online

Acum știm ce este un favicon și de ce site-ul are nevoie de el. Rețineți că dimensiunea sa în pixeli trebuie să fie strict egală cu 16 pe 16, iar extensia trebuie să fie doar .ico. Acum să aflăm cum să facem un astfel de mini-logo:

  1. Descărcați o fava gata făcută din galerie.
  2. Creați-vă propria folosind generatorul de favicon.
  3. Creați dintr-o imagine gata făcută (din nou folosind un generator de favicon)

2.1 Favicon pentru colecții și galerii

  1. http://www.thefavicongallery.com/ - deși o colecție mică, este utilă. Aici veți găsi pictograme pe o varietate de subiecte. În total, sunt aproximativ 300. Pentru a descărca ico-ul favicon-ului preferat pentru site, faceți clic dreapta pe ea și salvați-l pe computer.
  2. http://www.iconj.com/favicon-gallery-page1.html - o altă colecție de favicon pentru site, care conține mai mult de 3 mii de mini-imagini. Îl poți salva pe cel preferat în două formate (ico sau gif). Dar există un dezavantaj: puteți vizualiza doar 30 de pictograme simultan; pentru a le vedea pe următoarele, trebuie să mergeți la o pagină nouă.
  3. http://www.favicon.cc/?action=icon_list&order_by_rating=1 – datorită acestei galerii, nu trebuie să creați singur o favicon online. Doar selectați și descărcați fotografia care vă place. Din nou, puteți vizualiza 20 de favicon-uri simultan, ceea ce încetinește procesul de selecție.
  4. http://www.favicon.co.uk/gallery.php - acest site vă permite nu numai să creați o favicon pentru site, ci și să descărcați opțiuni gata făcute. Puteți vizualiza 144 de pictograme simultan, ceea ce este mult mai convenabil decât în ​​cele două opțiuni anterioare. Favas pe o varietate de subiecte.
  5. http://favicon-generator.org/gallery/ - deși mică, dar colecție utilă de 84 de favicon-uri. Alege oricare!

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

Desigur, puteți descărca fava gata făcută pentru site-ul dvs., dar este mult mai bine să vă creați propriul dvs. În această chestiune, vom fi ajutați de așa-numitele Generatoare Favicon, care vă permit să creați online mini-imagini frumoase.

2.2.1 Logaster.ru

Lista noastră începe cu un generator de favicon online
Principalul avantaj al serviciului este că nu trebuie deloc să desenați o favicon sau să o convertiți dintr-un logo.
Tot ce trebuie să faceți este să introduceți numele site-ului sau al companiei și să selectați un subiect.
După aceasta, serviciul va crea modele favicon gata făcute. Selectați pictograma dorită, fontul, culoarea.
Acest lucru este foarte convenabil pentru cei care nu știu să deseneze sau să lucreze cu programe de grafică.

Puteți descărca fișiere favicon în formatele ICO sau PNG.
Puteți citi mai multe despre cum să creați o favicon folosind Logaster

Pe lângă favicon, serviciul creează și logo-uri, cărți de vizită, plicuri și antet.

2.2.2 Favicon.cc – generator de favicon

Acest generator simplu este unul dintre cele mai simple și mai populare utilizate pentru crearea de faviconuri online pentru un site web. Veți putea desena fiecare pixel al viitoarei fava (sunt 256 în total). Accesând site-ul, veți avea acces la o fereastră de lucru în care puteți experimenta.

Culoarea albastră din captura de ecran de mai sus arată zona de lucru - aici veți crea direct o favicon pentru site. Chiar mai jos puteți vedea cum arată o fava în scara sa originală (evidențiată cu negru).

Lucrul cu acest generator este atât de simplu încât este puțin probabil să aveți întrebări despre cum să creați o iconiță favicon pentru un site web. Practic, pe acest site poți crea online colecții întregi de favicon și apoi, de exemplu, să le vinzi.

Fiecare pătrat din zona de lucru este un pixel. Trebuie să-l pictezi cu culoarea dorită. Puteți selecta o culoare în paleta situată în dreapta zonei de lucru. Puteți picta un pixel apăsând tasta din stânga și puteți șterge culoarea pictată apăsând tasta din dreapta.

Imaginea poate fi mutată și mutată în jurul zonei de lucru, pentru care se folosește articolul mișcare.

Pentru a descărca favicon-ul rezultat pe care l-ați creat pentru site, faceți clic pe link-ul Download Favicon (evidențiat cu roșu).

2.2.3. Generator Amichurin.Appspot.com

Un alt generator de faviconuri frumoase, în care puteți crea o imagine frumoasă online. Întregul generator este în limba rusă, dar funcționalitatea acestuia va fi mai simplă decât în ​​cazul precedent. Apropo, semnăturile făcute în visiniu nu sunt ale mele.

Din păcate, nu am găsit colecții de faviconuri gata făcute pe acest site care să poată fi descărcate pentru site, așa că folosiți-o doar ca generator.

2.2.4 Generator Favicon-Generator.org

Un generator de favicon foarte bun. Foarte asemănător cu a doua opțiune, dar ușor inferioară acesteia. În general, după cum ați observat deja, principiul de funcționare pe toate aceste site-uri este același. Prin urmare, nu ar trebui să existe probleme cu ele. Alegeți și lucrați cu cel care vă place cel mai mult.


2.3 Favicon dintr-o imagine finalizată

Dacă nu doriți să creați o favicon folosind generatoare online de la zero, iar galeriile și colecțiile de ico-uri favicon pentru site nu sunt potrivite pentru dvs., atunci încercați să faceți o mini-imagine dintr-o imagine gata făcută. Puteți chiar să vă folosiți fotografia. Astfel de imagini sunt create și online folosind generatoare speciale de favicon.

Pregătiți în prealabil poza pe care doriți să o utilizați ca bază.

2.3.1 Service Favicon.ru

Unul dintre cele mai populare servicii care vă ajută să creați o favicon pentru un site web (apropo, un site web în limba rusă). Simplu și ușor de utilizat, te ajută să faci un mini logo dintr-o imagine gata făcută.

Puteți adăuga o imagine sau o fotografie (bază) astfel:

  • Faceți clic pe butonul alege fișierul» și încărcați fotografia dorită.
  • Introduceți adresa URL a imaginii în câmpul alb (faceți acest lucru dacă fișierul nu este stocat pe computer, ci pe Internet).

După ce imaginea este adăugată, faceți clic pe „ Creafavicon.ico!"și așteptați puțin, generatorul va genera o pictogramă. După aceea, descărcați imaginea pe computer. Apropo, pe lângă generator, acest site are și o colecție mare de ico-uri favicon pentru site-ul dvs.

2.3.2 Serviciul Favicon.cc

Un generator similar, dar cu o funcționalitate mai puternică. Pentru a crea un favorit dintr-o imagine finalizată, accesați mai întâi fila „Importați imaginea”.

Acum faceți clic pe „Selectați fișierul” și adăugați fișierul pe care îl descărcați. Pe baza acestuia, va fi creată o iconiță favicon pentru site-ul dvs. Apropo, este posibil să aveți nevoie de funcția de întindere a imaginii:

  • Păstrați dimensiunile – dacă raportul de aspect este redus, imaginile vor rămâne aceleași
  • Pictograma Micșorare la pătrat – părțile laterale ale imaginii vor fi pătrate (imaginea poate fi distorsionată).

După descărcarea fișierului, îl puteți edita online folosind acest generator de favicon. Când sunteți mulțumit de rezultat, descărcați fava pe computer.

3. Cum să adăugați o favicon la un blog WordPress

Ne-am dat seama de unde să descărcați o favicon gata făcută pentru un site web sau cum să vă faceți propria. Acum să discutăm cum să adăugați o fava la un blog WordPress.

De regulă, favicon-ul se află la rădăcina site-ului (în folderul rădăcină) - pe asta ne vom concentra. Dacă fava nu este în rădăcină, mutați-o acolo.

Adăugarea favicon.ico în doi pași.

PRIMUL PAS

În primul rând, trebuie să găsiți în tema dvs. linia de cod care este responsabilă pentru afișarea favicon-ului. Deschideți fișierul Header (header.php) pentru editare și găsiți această linie (sau similară):

Dacă nu există nimic asemănător care să conțină cuvântul favicon.ico, atunci trebuie doar să adăugați aceste două rânduri undeva între etichete Și.

PASUL DOI

Acum trebuie să adăugați favicon-ul în sine la găzduirea dvs., exact în folderul rădăcină al site-ului (în caz contrar, nu va fi afișat). Accesați găzduirea dvs. și încărcați fava la rădăcina site-ului (numele fișierului este necesar favicon.ico, sunt necesare dimensiuni 16x16 pixeli).
Asta e tot, în curând favicon-ul va fi indexat de motoarele de căutare și va apărea în rezultatele căutării Yandex. Și site-ul tău va avea propriul său favicon.

La sfârșit, vă ofer un tutorial video despre cum să creați o favicon pentru un site web.

  • Serghei Savenkov

    un fel de recenzie „scurtă”... de parcă s-ar grăbi undeva