Ce este favonul și de ce este necesar? Favon - Ce este și cum să faceți ceea ce este favon

Salut prieteni! Astăzi avem o coadă Phawacon. Cuvântul nou, incomprehensibil, inconfortabil .. Dar totul este simplu. Am văzut de mult aceste Favona. Doar nu știau ce sunt, sunt 🙂. Așa că avem că cele mai simple lucruri sunt întotdeauna numite inteligente și incomprehensibile. Și, de fapt, Favikon este alcătuit din cuvântul spaniol "favorit" și cuvintele "icoanei" grecești (imagine). Tradus în limba rusă, "imagine preferată" 🙂. Învățăm ce este. Și de ce este necesar.

Și acum vom zâmbi, apoi ne uităm la desen.

Iată aceste icoane în partea stângă a numelui site-ului sau (categoria separată) și există imaginea noastră preferată. Deci "Faviya" arată ca marcajele dvs. de browser. Aceste pictograme ați văzut de mai multe ori. Întotdeauna găsită cu ajutorul lor necesar în panoul de marcaje. Deoarece acum prezența lui Favonov este un lucru general acceptat.

Nu se poate spune că "imaginea preferată" după ce este instalată pe site, atrageți imediat o grămadă de vizitatori. Nu, este doar un element de stil plăcut, un ton bun. El face pagina dvs. mai individuală și mai recunoscută.

Această icoană acționează pe subconștient, vă recunoaște imediat. Prin urmare, astăzi și vă voi crea unii favoriți și o voi pune pe această pagină. Și, în același timp, vă voi spune despre asta. Deci, începeți. Pentru a începe, vom defini ceea ce vom fi respinși. Creând ceva, acesta este un proces creativ. Cum să faci ceilalți? Fiți atenți din nou la pilodele noastre:

În acest exemplu, vedem că pe pictograme mici (32x 32 pixeli), imagini stilizate ale literelor care apar din titlul de site-uri ("OK" - colegii noștri, VK - VKontakte-ul nostru sunt izbitoare și scrisoarea " F "este un FaisBook străin (din nou în cartea" cartea rusă ") ... Nimic nu poate fi făcut, o limbă rusă puternică plus umorul natural rus ..

Favona este făcută de mai multe fotografii. Din cadrul desenului dvs. preferat. Sau tabăra filmului. Și, de asemenea, animat, unde imaginile se mișcă. Nu există granițe pentru creativitate. Alegeți, creați, încercați.

Cum se face o stație pentru site-ul din Photoshop?

Dacă sunteți o individualitate luminoasă, vă recomand să începeți cu Photoshop. Puteți face un astfel de favon, care nu are altcineva să-și exprime 😛. Și se poate face din nou complet de la zero. Este gratuit. O altă opțiune - puteți descărca o imagine (același FAVON) și remake-o sub dumneavoastră. Dar aveți nevoie de un fotoshop sau alt editor mai ușor, pe care îl puteți tăia și reduce imaginile.

Fiind un expert în Photoshop pentru a crea un mic favon nu este necesar. Mai mult timp merge să caute sau să "inventeze" o imagine preferată potrivită ". Să încercăm prima opțiune, să creăm de la zero. Nu sunt un expert Photoshop, astfel încât acțiunile mele sunt extrem de simple, pentru începători. Deschideți Photoshop, fișierul meniului din stânga sus ::

Specificați numele fișierului, dimensiunile sunt aceleași, această versiune favon va fi pătrată și conține numai litere din numele site-ului, pe un fundal luminos. Faceți clic pe OK.

Asta am ales și cum a avut grijă de imprimare cum am înscris "Text":

Acum trebuie să aliniem textul în centru:

Sa dovedit ceva de genul asta. Adevărat, câmpul a devenit accidental dreptunghiular în loc de pătrat.

Acum există puțină stilizare imaginea noastră. Există un buton magic de sus pe bara de instrumente sub forma unei litere curbate "T":

Făcând clic pe acest buton, primim bara de instrumente, alegerea de la care vedem cum modificările stilului textului:

În plus, putem schimba curbura cu glisierele în interiorul fiecărui "stil":

Acum trebuie să adăugați un anumit fundal. Din cauza dimensiunilor mici ale faviconului, trebuie să fie extrem de strălucitoare, contrastante, fără detalii mici. Alegem pentru acest principiu fundal, astfel încât sigla să fie foarte vizibilă pe ea. Pentru a face acest lucru, aruncați o privire la partea dreaptă a ecranului Photoshop:

Fiecare element nou al desenului nostru pe care îl creăm pe așa-numitul strat. Noi text am plasat pe un fundal și fundalul alb automat când crearea unui fișier este pe un alt strat. Acum vom încerca să creăm un alt strat pentru un experiment și să punem un alt fundal pe el. Faceți clic pe clic dreapta pe strat. Sau Ctrl + Shift + n combinație de taste (ca în figură) Creați un nou strat:

Se dovedește la început:

Și apoi arată așa:

Cursorul trebuie să fie pe acest strat, vom lucra cu el.

Există un mic prieten. Totul este simplu. Trebuie să ridicați fundalul. Alegeți instrumentul "Umplere".

Pe stratul pe care l-am creat, trebuie să vă ridicați cu mouse-ul și apoi să alegeți fundalul

În panoul deschis, puteți alege oricare din câteva mii de culori, după cum urmează:

Am ales de exemplu galben strălucitor. După ce am făcut clic pe mouse-ul din imagine, stratul a fost pictat în culoarea aleasă de mine.

Nu vă faceți griji, imaginea nu a fost pictată. Acum trebuie să impunem text pe acest strat galben, care se află pe stratul următor. Totul este simplu.

Sa dovedit astfel:

Aproape gata. Totuși, textul ar trebui să fie cu nerăbdare. Luați un font. Din nou, faceți clic pe "T" și alegeți un font mai potrivit.

Mișcarea simplă a mouse-ului pe listă, fontul va varia în favoarea noastră. Alegeți fontul dvs. preferat. M-am oprit în timp ce:

Pantalonii se transformă în pantaloni scurți ... Rămâne să ne salvăm desenul și să vedem ce sa întâmplat. Dar mai întâi reduce dimensiunea până la 32x32 pixeli.

Am pus dimensiunea dorită, lățimea și înălțimea 32x32:

Dacă o persoană deține Photoshop și știe cum să deseneze, puteți crea icoane mai avansate. În videoclip, un alt exemplu, cum să creați rapid un favon.

Cum să faci Favon online gratuit?

Photoshop nu ca toată lumea. Și puteți descărca cu ușurință Favon Online. Astăzi există o mulțime de galerii care oferă favononi gata făcută pentru fiecare gust. Ca exemplu, voi arăta o astfel de galerie pe care puteți descărca Favon din colecție, trageți-vă direct pe site, pentru a genera, precum și comenzi. Deci, întâlniți www.favicon.by.

O colecție bună, mare, puteți ridica stilul adecvat pe pictograma site-ului dvs.

Favon Generator Ce este și cum?

Aceeași resursă propune generarea favonă din imaginea finită. Faptul este că pictograma trebuie să aibă un format standard.ico, garantează că va fi afișat toate browserele. La toate aceste resurse, diferitele design ale generatoarelor Favonov, dar esența este aceeași. Vă putem încărca imaginea acolo, generați în ICO și apoi salvați-o deja pe computer.

Vom încerca acum să ne încărcăm pictograma terminată acolo. Găsiți-l în dosar

Și așa, este cel mai mult:

Asta arată el, favoritul meu. Faceți clic pe "Descărcați".

Aici este favonul meu în browser, deja încărcat:

Ceea ce îmi place în acest serviciu este că văd cum arată favonul meu aici dacă am pictat-o \u200b\u200bprin celule, deoarece ofertele de serviciu. Și motivul pentru care prefer Photoshop. Acolo am văzut deja rezultatul. Și pe celulele vagi, până când învățați, nu veți înțelege ce, pictat. Și aici 16x16, foarte fin. Dar puteți încerca să atrageți.

M-da, nu Malevich, dar principalul lucru nu este o victorie, ci participarea ... Draw pe celule, probabil că numai icoanele cele mai simple. Unii oameni trag un favon animat. Ei "se mișcă", schimba culorile. Bine, în cele din urmă cel mai mult drumul rapid Ia Favon Online este să plătească pentru el. La momentul scrierii articolului din aceeași resursă, prețul de comandă pentru o dimensiune favicon animată de 32 × 32 px în format GIF - 1200 ₽, Normal Favon - 700 de ruble. Este destul de scump, dar dacă împărțiți sumele cu 64 de pixeli, atunci normal.

Cum se instalează Favon la site-ul WordPress (WordPress)?

Ei bine, când am decis, este timpul să aruncăm o favorizare a site-ului. Înainte de a face acest lucru, este necesar să vă uitați la designul site-ului dvs., încercați mental ", fie că acesta va funcționa sub proiectarea inscripțiilor și a panourilor principale. Totul ar trebui să fie armonizat. Deși ... Arta este un lucru atât de controversat ..

Voi încerca să o arunc prin comandantul meu preferat

După conectarea la domeniu, copiem Favonul cu folderul șablonului:

Am un site pe Word Press, în alte platforme de cale, altele, dar ideea unui favon trebuie să stea într-un dosar cu șabloane sau subiecte, de exemplu: "Site-ul dvs..ru -WP-Content-Temes Folder cu dvs. Template-Favicon.ico "

Pictograma va apărea cel mai probabil pe site-ul dvs. Roboții trebuie să o indexeze. Dacă aveți nevoie să organizați rapid aspectul unui favicon, va trebui să introduceți codul între antetele de etichetare a capului pe fiecare pagină a site-ului

Este chiar mai ușor să ajustați favonul prin administrativ panoul Word. Presa. În setările subiectului, există o opțiune "Activați FAVON:"

Îmi place Favona strălucitoare, iar scrisorile ar putea fi etichetate mai mari. Dar atât de mult. Artiști - sunt atât de furioși 🙂 sunt întotdeauna nemulțumiți de creațiile lor ... 🙂 În orice moment puteți redo ... Astăzi ne-am asigurat că crearea unui favicon este un proces complet creativ.

Și, în același timp, m-am familiarizat cu Photoshop. Puteți petrece câteva zile și faceți ceea ce aveți nevoie. Investește o bucată de suflet ... prieteni. Dacă știți tehnicile de Photoshop pentru Favonov - scrieți comentariile ca și cum. Între timp înainte de întâlnire!

Favicon (engleză icon preferat) este o mică pictogramă (imagine, imagine) într-un format special care este afișat în bara de adrese a browserului când vizualizați site-ul, fila Browser sau în marcajele sale ("Favorite").

favicon este o decorare suplimentară pentru site-ul dvs., logo-ul dvs. Mini. De asemenea, se arată când vizualizați o listă de site-uri din căutarea Yandex, Google și evidențiați site-ul dvs. împotriva restului.

De ce aveți nevoie de favicon pentru site?

favicon - marcă Site-ul tău. Multe companii au o pictogramă distinctivă Favicon, care îl evidențiază printre concurenți. Pentru ca pictograma să fie mai bine amintită de utilizatori, companiile ar trebui să-și afișeze sigla în ea, ceea ce trebuie să fie, de asemenea, unul dintre elementele capacelor site-ului. O altă caracteristică pozitivă de utilizare a faviconului este aceea atunci când vizionați un numar mare Site-uri din browser, nu vedeți complet titlul paginii și veți vedea doar pictograma și puteți determina cu ușurință fila în care ați vrut să mergeți.

Ce este mai bine să portret pe Favon?

Pictograma trebuie să respecte subiectul site-ului.
brand dacă aveți un site conectat la acest brand. În același timp, diferite mărci pot fi afișate pentru diferite pagini;
Aplicați Favonul la care doriți să faceți clic, va crește clasa la vizualizarea în căutarea Yandex, Google;
Faceți mai multe modele de Favonok pentru diferite secțiuni ale site-ului dvs.
Faceți mai multe modele de Favonok pentru diverse evenimente (de exemplu, Anul Nou, Ziua Îndrăgostiților sau Ziua cosmonautică, :).

Așezați fișierul rezultat în rădăcina site-ului dvs., unde este fișierul principal principal (index.php). Pentru a specifica pictogramele browserului site-ului site-ului (Favicon) în secțiunea antet (cap), introduceți următoarea linie:

Cum să faci un favicon animat?

Formatul ICO nu acceptă animația. Dar browserele moderne vă permit să utilizați formatul GIF. Pentru miniaturi. Este posibilă specificarea pentru browsere moderne Un fișier animat (Favicon.gif) și pentru Antic, Intertet Explorer, Altele (Favicon.ico). Pentru a face acest lucru, în secțiunea Head, efectuați următoarele două linii:

În mod natural, trebuie mai întâi să puneți ambele fișiere în dosarul rădăcină al site-ului.

Ce se întâmplă dacă este interzisă afișarea imaginilor în browser?

Dacă faceți favicon cu imaginea încorporată în codul senior:

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

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

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

] *) Link ([^\u003e] *) (Rel \u003d "pictograma" Rel \u003d "pictograma rapidă") ([^\u003e] *)\u003e / iu ", $ html, $ out)) ($ link_tag \u003d $ out ; dacă (preg_match (/ href ([s] *) \u003d ([s] *) "([^"] *) "/ iu", $ link_tag, $ out)) ($ Favicon \u003d Trim ($ out) ; dacă (STPOS ($ Favicon, ": //") \u003d\u003d\u003d FALSE) $ FAVICON \u003d $ URL. "/". LTRIM ($ FAVICON, "/");)))?\u003e

Sisteme de căutare Google, Yandex și Favicon

Robotul motoarelor de căutare cache icoane de site-uri. Pictogramele stivuite sunt disponibile la următoarele solicitări:

În plus, Yandex vă poate face "sprite" de la icoane de site-uri diferite:

Icoane pentru iPhone și iPad

Chiar dacă nu specificați un link-link către imaginea iPhone-ului oricum, va fi în continuare să căutați în dosarul rădăcină al site-ului cu numele Apple-Touch-icon.png și dacă va găsi, va dura O imagine de la el, în jurul colțurilor și va fi acoperită cu un dispozitiv automat de strălucire. Pentru a evita acest lucru, în loc de Apple-Touch-icon.png, ar trebui să scrieți un mere-touch-icon-preformosed.png proprietarii de iPhone și punct, pentru că Pentru ei, facem o pictogramă frumoasă în dimensiunea 57x57 (puteți apropia și mai mult, dar aceasta este dimensiunea standard a pictogramei de pe ecranul de prânz), conectați-le astfel:

Cum să schimbați dinamic Favicon?

Dacă încercați să modificați valoarea proprietății etichetei prin DOM, atunci nu depuneți rezultatul dorit. Pentru a schimba dinamic pictograma paginii, trebuie mai întâi să eliminați eticheta de legătură cu o pictogramă veche din titlul paginii și apoi să o adăugați la conținut nou. Acest lucru se face ca aceasta: // link-ul la fișierul nou pic pictograma \u003d "nou_favicon.ico"; Var Head \u003d document.getelementSbytagname ("cap"); // Găsiți și eliminați pictograma veche din capul VAR LINKS TAG \u003d HEAD.GETelementsBytaGame ("Link"); pentru (var i \u003d 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.

În HTML5, a fost adăugat atributul de dimensiuni, permițându-vă să declarați mai multe versiuni diferite ale acelorași icoane și pot fi fișiere PNG:

Cum să declare plăci pentru comprimate pe Windows 8?

Anunțul pentru Windows 8.0 arată ca ceva de genul acesta:

Windows 8.1 și IE 11 așteaptă mai multe versiuni ale imaginii anunțate în BrowserConfig.xml. De exemplu:

Nu puteți declara dacă numele fișierului nu este modificat:

# 2B5797.

Favon (tradus din pictograma preferată engleză - "pictogramă pentru favorit") - o imagine miniaturală realizată în format ICO. El este vizibil atât în \u200b\u200brezultatele căutării, cât și la deschiderea site-ului însuși, și anume: în partea de sus a browserului (vezi imagini). Favicon este o imagine miniaturală care se aplică numărului de componente fundamentale ale oricărei resurse de Internet. Dacă în 2006, site-urile din cea mai mare parte a lucrat fără Favonov, site-urile de astăzi nu pot fi imaginate fără ele. Desigur, au existat proiecte care rulează fără favicon, dar în 2017 sunt cazuri izolate care sunt foarte dificile, deoarece motoarele de căutare în 95% din caz nu le lipsesc în partea de sus la cereri de înaltă frecvență.

Scop favicon:

Scopul principal al favicon.ico este de a atrage atenția utilizatorului de Internet pe site. Prin utilizarea Favonov, proiectele internet separate, este posibil să se evidențieze de lista generală a proiectelor, care într-o oarecare măsură afectează în mod pozitiv rentabilitatea acestora în mase.

Unde este demonstrat Favicon (Favon):

În emiterea de căutare - când un utilizator intră într-o anumită solicitare în căutarea unui motor de căutare, acesta vede în 90% din cazuri ca și numele paginilor de site-uri și favicon individual.

În partea de sus a browserului -pornirea la orice pagină a site-ului, în partea de sus a browserului, utilizatorul observă întotdeauna o imagine sub care se înțelege faviconul. Este ea care permite exact să nu fie confundată cu o resursă web cu o mare amploare a filelor deschise în browser.
În marcajele / istoricul browserului - Versiunile moderne ale browserelor demonstrează în istoria și marcajele lor nu numai numele site-urilor și paginile lor, ci și Favicon.

Pe ecranul aplicațiilor din smartphone -favicon este afișat nu numai în browser și rezultatele căutării, dar și pe ecranele smartphone-urilor. Deci, dacă salvați site-ul ca o aplicație pe telefonul smartphone (că astăzi este norma), utilizatorul va vedea favicon cu numele său cu numele său. Aceasta, la rândul său facilitează sortarea unor locuri interesante.
Pe interiorul computerului - Când utilizatorul salvează site-ul de pe desktop, acesta creează o pictogramă care reprezintă orice imagine în care se înțelege faviconul.

Din toate cele de mai sus, se poate spune una, Favon este o componentă importantă a oricărui proiect online, precum și o aplicație mobilă și informatică. Aceasta reprezintă baza care evidențiază originalitatea și unicitatea site-ului, aplicarea, resursele.

Favicon Dimensiune

Favicon este o pictogramă miniaturală care are o formă pătrată. Dimensiunea sa este cea mai egală cu 8x8, 16x16, 32x32, 64x64 și 128x128 pixeli. Acesta este motivul pentru care este dificil atunci când se recodifică imaginile volumetrice în format ICO, deoarece uneori există mai mult de 1280 de pixeli în acest tip de imagini, ceea ce sporește apariția imaginii finală ICO, transformându-l într-un pătrat cu tot felul de vopsele .

Unde să obțineți Favicon?

Favon poate fi descărcat atât de pe Internet, cât și de crearea independent, inclusiv ordonarea dezvoltării sale de la un specialist:

Descărcate de pe Internet Favicon. Principalul avantaj este că un astfel de favikon este complet gratuit. Al doilea demnitate ar trebui să fie considerat faptul că orice imagine poate acționa ca un astfel de favicon: să o recot în format ICO. Dar liberul nu poartă nimic bun în sine, tot favorul împrăștiat de pe Internet sunt proprietatea autorilor lor, iar în 99% din cazurile sunt prezente pe alte site-uri, care le privează de orice unicitate. De exemplu, în Europa și în Statele Unite ale Americii, există cazuri în care proprietarii de site-uri au atras răspunderea penală pentru furtul Favicon (încălcarea drepturilor de autor).
Create independent Favicon. Creați-vă Favon dvs. astăzi poate chiar un școală. Acest lucru va necesita numai posibilitățile furnizate de generatoarele de pictograme online (pictograma) proiectate special în aceste scopuri în format ICO. Principalul avantaj al acestei metode este că logo-ul companiei / firmei / organizației recodificate utilizând generatorul Favonov în format ICO poate acționa ca favicon.

Comandat de la un favicon specialist.Desigur, Freelancers și Companiile care se concentrează pe crearea FAVONOV Utilizați accesibile tuturor utilizatorilor de internet al generatoarelor rusești și străine și editorilor de imagini din format ICO. Deși, în același timp, Favon profesional va rămâne întotdeauna deasupra că utilizatorul poate crea independent.

Favon Generatoare:

https://www.favicon.cc. - unul dintre primii generatoare de favoare online care utilizează utilizatorul său va putea să nu recupereze imaginea de la formatele vizuale clasice din ICO (de exemplu, logo-ul companiei sale), dar, de asemenea, creați propria pictogramă care va arăta bine ca atunci când Căutarea pentru Yandex și Google și panoul de adresă al browserului.

https://www.favicongenerator.com. - Serviciul minimalist care facilitează generarea de Favonov și simplificarea editării imaginilor în format JPG în ICO. Rezultatul demonstrează instantaneu într-o fereastră special rezervată.

https://www.genfavicon.com. - acest serviciu este destul de simplu în înțelegere, deoarece crearea de Favon are loc în trei etape, și anume: alegerea unui fișier în format JPEG, GIF, PNG pe un computer; Selectarea dimensiunii imaginii finale și transcodarea pe scară largă în format ICO. Rețineți că imaginea trebuie să aibă o fundație pătrată.

Generatoarele Favonov de la zero:

https://antifavicon.com.
https://favicon-generator.org.
https://favicon.ru.
https://www.favicon.cc.
https://www.degraeve.com/favicon.

Colecții Favonov:

https://www.iconj.com/gallery.php. - Colecția de Favonov, care are peste 10.000 de icoane.
https://www.audit4web.ru/info/favicon/ - Colectarea cu Favicii pentru site, în baza de date a căreia sunt stocate mai mult de 20.000 de imagini în format de pictograme (ICO).
https://www.favicon.cc/?action\u003dicon_list&order_by_rating\u003d1. - Generator Favonov și Galerie animată și statică icoane
https://www.favicon.co.uk/gallery.php. - Generator Favon pentru site și blog, precum și un catalog de imagini statice și animate.
https://hefavicongallery.com. - o colecție de imagini promițătoare de imagini în format ICO disponibilă pentru descărcare gratuită.
https://findicons.com. - cel mai mare stoc din expansele internetului rus și străin cu imagini în format de pictograme (ICO).

Cum să plasați Favon pe site?

Pentru a găzdui, veți avea nevoie numai de acces la server. Format Favon: ICO (recomandat), GIF, JPEG, PNG, BMP.

1. Plasați faviconul în dosarul rădăcină al site-ului.
2. Adăugați la codul HTML al paginii principale a site-ului, la element, referire la fișierul blocat.
... ...

Tag-uri: Favon, pictograma preferată

Generator și sfaturi gratuite Favicon: Cum de a alege Favon, ce dimensiuni sunt necesare și cum să instalați Favon pe site.

Ce este Favon.

Favicon. (Soc. Din engleză. Favorite Icon - "pictograma pentru favorite") - pictograma site-ului sau pagina. Acesta este afișat în browser din bara de adrese înainte, precum și ca o imagine de lângă fila, în tab-uri și în alte elemente de interfață. Cel mai bine este să vedeți imaginea care poate fi introdusă într-un pătrat. Dimensiunile standard - 16x16, 32x32, pentru unele browsere și OSS sunt necesare dimensiuni 60x60, 120x120, 192x192.

Utilizați de obicei formatul ICO, dar disponibil și PNG, GIF, JPEG, SVG. Fișierul de format ICO conține mai multe versiuni favicon.Unele browsere pot alege aceeași versiune și pot utiliza o pictogramă de rezoluție mai mică, astfel încât unii webmasteri recomandă PNG.

În Rusia, emiterea lui Favon sprijină Yandex:

Site-uri cu fabiques în emiterea lui Yandex

În rezultatele căutării rusești, Google Favonov nu este încă. Anul trecut, în extrădarea pentru utilizatorii din Marea Britanie, a observat optimizatorul Rick Rodriguez și a stabilit screenshot-ul în Twitter:

Ieșire Google în Marea Britanie

Deși în rezultatele unui motor de căutare străin nu există Favonov, acestea sunt încă afișate pe filele browserului și marcajele.

Site-uri cu fotbaluri pe file și marcaje

De ce aveți nevoie de Favon.

Uneori pe forumurile noilor veniți au întrebat dacă se oferă utilizarea favicon.ico. Bonusuri în timpul promovării. Utilizarea unui favicon nu afectează optimizarea codului site-ului, motoarele de căutare nu pun site-uri cu Favon de mai sus în extrădare și nu coboară poziția pentru absența acesteia. Cu toate acestea, Favicon are alte avantaje.

Vom analiza ce nevoie de un fișier favicon.ico. Și este posibil să faceți fără ea.

Evidențiază site-ul în extrădare

Favicon. Atrage atenția asupra site-ului. Fără o pictogramă de fragment, aspectul este vizibil, se pare că lipsește ceva.

Site fără un favicon în extrădare, printre altele

Cu Favon, site-ul este amintit mai bine

Pictograma pentru site - elementul de marcă. Utilizatorul va aminti mai bine logo-ul de la favicon și îl va conecta cu un brand dacă îl vede pe site și alte site-uri.

Logo-ul companiei în Favonne

Simplifică căutarea site-ului dorit

În marcaje și povestiri este mai ușor să căutați site-ul dorit nu prin antetul text, dar la imaginea de identificare - Famon FAVON.

Marcaje în Google Chrome

Asigură eroarea în fișierele de jurnal

Browsere solicită fișierul favicon.ico. Și dacă nu găsiți un șir care indică Favonul, serverul marchează în jurnale.

De exemplu, astfel:

Nu a reușit să încarce resursele: net :: err_empty_response (20: 00: 55: 963 | Eroare, rețea) la http: // localhost: 8383 / favicon.ico

Favon din imagini: Ce să alegeți

Tematic

Dacă site-ul reprezintă compania, în Favon, este mai bine să puneți logo-ul de marcă sau fragmentul său dacă logo-ul este complex, detaliat sau alungit. Dacă nu există un logo, selectați imaginea și gama de culori de către asocierea cu subiectul site-ului.

Favorul cu o ceașcă pentru site-ul despre cafea arată armonios

Contrast

Anterior, orice pictogramă se grăbită în ochi, pentru că nu toate site-urile le pun. Acum este mai dificil să ieșiți, la cererea "Cum să gătiți cafeaua", fără Favona a fost găsit numai pe cea de-a opta pagină. Atrageți atenția mai bună decât o pictogramă strălucitoare contrastantă, uneori au pus o săgeată îndreptată spre locul.

Simplificat

Favon În extrădarea, pe filele browserului și în marcajele unei mărimi foarte mici, imaginea detaliată nu este clară. Alegeți imaginea, unde vor exista un minim de părți, două sau trei culori, sensul de citire unu la unu.

Original

Favon nu va evidenția site-ul în extrădare dacă concurenții vor avea aceleași imagini. Pictogramele populare banale sunt mai bine să nu folosească.

Cum se creează favicon pentru site-ul

Există trei moduri cele mai comune:

Plugin special pentru Photoshop
Vă permite să lucrați acest editor de imagine popular cu format ICO.
Programe speciale pentru fabricarea Favonov
Ele sunt în mod special "ascuțite" pentru fabricarea de icoane pentru site.
Generator online Favicon.
Cea mai ușoară și mai accesibilă modalitate este de a încărca o imagine într-un generator care va face o pictogramă pentru site din orice imagine. Pictograma se va dovedi a fi mai frumoasă dacă imaginea donatorului este tăiată într-un pătrat.

RealFaviconGenerator va face favononi pentru diferite platforme și browsere. Dacă o pictogramă este suficientă pentru dvs., acesta dezactivează imaginea în fișierul ICO 16x16.

Panou gratuit de generator Favicon

Cum se instalează Favon la site-ul web

... ...

Atributul "rel" indică tipul de resurse. Cele mai multe browsere recunosc "pictograma", aveți nevoie de "pictogramă scurtă" pentru Internet Explorer.

Tipul de date transmise de date depinde de formatul fișierului. ICO este "imagine / x-pictogramă" sau "imagine / VND.microsoft.icon", pentru PNG - "imagine / png" și similar cu alte formate.

Pentru dispozitive mobile, remedierile individuale sunt adesea prescrise, specificând, de exemplu, Rel \u003d "Apple touch-icon".

O indicație directă a fișierului nu este la toate browserele, dar este mai bine să fie că pictograma apare exact pe locul faviconului. Puteți specifica postări diferite ale site-ului, de exemplu, un webmaster poate seta diferite culori ale unei pictograme pentru blog, director și forum.

Favonka nu va apărea imediat după instalarea codului, trebuie să așteptați până când motorul de căutare indexează-l.

Dimensiunea faviconului pentru browsere și dispozitive

Din punct de vedere tehnic, este mai rapid și mai ușor de a face o pictogramă ICO, PNG sau SVG pentru toate dispozitivele. Din punctul de vedere al utilizabilității, este mai bine să faceți ceva pentru diferite dispozitive și browsere, deoarece acestea pot fi diferite în exterior - undeva necesită o dimensiune mai mare, undeva suficient de un fișier mic.

Dacă este posibil, concentrați-vă pe fiecare platformă cu care utilizatorii pot deschide site-ul.

Browse de desktop populare

Standard pentru Favicon face fișier favicon.ico.Acesta este susținut de toate browserele, dar puteți alege un alt format. Se recomandă, de obicei, stabilirea mai multor dimensiuni ale favorului pentru diferite cazuri: 16x16, 32x32 și 48x48.

Cod simplu:

Favon în HTML5.

În HTML5, utilizând descrierea extinsă, puteți specifica dimensiunea și formatul pictogramei. Pentru un fișier ICO, în care mai multe favoruri, puteți specifica dimensiunile din atributul de dimensiuni prin spațiu. Pentru favicon în vector, specificați dimensiunea "oricărei".

Cod simplu:

Android

Puteți specifica Favon și locația sa Android prin specificația Manifest App. Acesta descrie un fișier simplu JSON, în care webmasterii indică pictogramele, dimensiunile și formatele pentru site-ul sau aplicația. Este susținut de Chrome, Opera, Internet Samsung și Firefox.

Manifest indică cu ajutorul:

Cod simplu:

("Nume": "Aplicația mea", "icoane": [("src": "64.png", "dimensiuni": "64x64"), ("SRC": "192.png", "dimensiuni": "192x192")], "Afișare": "Fullscreen", "Orientare": "Peisaj", "Theme_Color": "Tomate", "fundal_color": "cornflowerblue")

măr

Pentru iOS, se recomandă să faceți o pictogramă de 180x180 PNG. Documentația Safari se numește clipuri web, acestea nu ar trebui să fie transparențe, unghiurile sunt rotunjite automat atunci când se adaugă la ecranul principal. Aceasta este o pictogramă de expansiune ridicată, va fi afișată în alte browsere.

Cod simplu:

Apple suportă un alt format de icoane. Pentru filele fixe din Safari și butoanele de pe tactil Bar din MacBook există o oportunitate de a specifica o mască vectorială monocromă și o culoare care o va umple când vă deplasați.

Personalizați cu.

Cod simplu:

Marginea și adică 12

Culoarea fișierului și a fundalului pentru pictograme poate fi specificată utilizând metadate în HTML.

Cod simplu:

Microsoft are o "referință de schemă de configurare a browserului" - un document XML în care sunt enumerate diverse pictograme corespunzătoare interfeței. Fișierele de configurare a browserului vă permit să setați setările utilizând fișiere XML externe.

Cod simplu:

# DA532C.

Adesea, pentru site, există suficientă favicon de una sau trei dimensiuni, astfel încât acestea să pară în mod normal. Dar este mai bine să oferiți un pic de timp și să înregistrați separat fișiere pentru diferite sisteme de operare și browsere, astfel încât Favon să pară de înaltă calitate pe orice dispozitiv din motorul de căutare, pe tablă, panouri de marcaje și pe ecranul smartphone.

Uneori, chiar și cele mai mici detalii de pe site-ul nostru pot juca un rol foarte important în proiectare și utilizare. Și aproape despre un astfel de detaliu astăzi cu tine și vorbește ...

Ce este favonul?

Favicon (de la pictograma preferată engleză - Icon) este o imagine mică care este asociată cu un anumit site sau pagină.

Acesta este situat în fila de top browser opusă numele site-ului pe care l-ați descoperit. Și, de asemenea, această imagine este afișată în marcaje dacă ați adăugat site-ul la favorite.

De ce ar trebui să fie folosit?

Această mică pictogramă, care părea a fi folosită pe site-uri în principal "pentru frumusețe" sau pur și simplu nu a existat un spațiu gol în pătratul opus numele site-ului din browser ...

De fapt, este unul dintre factorii cheie pentru formarea mărcii site-ului dvs. Favon trebuie să reflecte esența site-ului și, în același timp, ar trebui să fie memorabilă și individuală.

Favonk trebuie să salveze timpul vizitatorului dvs. Întrebați: Cum poate economisi timp?

Faptul este că mulți utilizatori care utilizează Internetul deschid adesea multe file în același timp. Și când nu există icoane pe file și doar un pătrat gol, atunci probabilitatea ca el să nu difere în nici un fel și o închide pur și simplu.

Prin urmare, faceți întotdeauna că vizitatorul dvs., chiar dacă are o mulțime de file diferite în browser sau dacă are multe site-uri în marcaje, astfel încât să poată găsi întotdeauna cu ușurință site-ul dvs. printre "mulțimea" altor site-uri.

Un alt moment este atunci când o persoană caută informații în motorul de căutare - este mai probabil să facă clic pe site-ul dvs. dacă Favon stă acolo decât site-ul concurentului dvs. fără FAVON.

Percepția vizuală joacă un rol imens pentru o persoană. Când mergem la unele webcine, punctul nostru de vedere se încadrează în primul rând în imagine și apoi pe textul care îl înconjoară.

Același lucru atunci când eu, de exemplu, navigând pe marcajele pentru a găsi resursa de care am nevoie, privirea mea în primul rând pe Favonkov și adesea se întâmplă suficient pentru a găsi ceea ce căutam. Mai puțin frecvent după ce găsesc imaginea de care am nevoie, mă uit după ce este scris cu ea următorul.

Astfel, timpul meu de căutare este redus considerabil.

În imaginile pe care le-am postat în acest articol, puteți vedea exemplele vizuale despre ceea ce scriu.

Dacă nu există nici un favon pe site-ul dvs., browserul va afișa pur și simplu un pătrat gol. Dacă aveți suficiente marcaje, există destul de multe site-uri "non-informze", căutarea resursei de care aveți nevoie poate deveni o sarcină destul de plictisitoare - trebuie să le urmăriți pe toți pentru a găsi site-ul de care aveți nevoie.

Unde o pot lua?

Favon De obicei - aceasta este o imagine cu o reflectare a pixelilor de 16x16 cu expansiune .ico. sau .png.

Puteți să-l trageți singur și apoi să trageți pur și simplu în formatul dorit utilizând servicii speciale sau utilizați Photoshop.

Sau puteți găsi o imagine potrivită pe unul dintre site-uri cu icoane gratuite.

Aici trebuie să țineți cont de câteva momente: astfel încât favorul tău să fie prea distrilă și astfel încât imaginea să pară holistic (nu a compus niște părți individuale, este mai bine ca acesta să fie un obiect), astfel încât chiar și într-un astfel de mic suma era clară ce este atras acolo.

Cum să puneți Favon pe site?

Dacă aveți, de exemplu, un site static construit pe HTML, trebuie să completați o imagine într-un dosar cu alte imagini ale site-ului, apoi adăugați la documentele HTML, o astfel de linie, plasându-l în cap:

Acest lucru este deja în funcție de formatul pe care îl utilizați.