Un articol în care vom analiza cum să facem favicon-ul potrivit pentru site.
O favicon este o pictogramă care este asociată cu un anumit site web sau pagină web. Prezența unui favicon pe site permite, de regulă, să fie mai recunoscut. Acest lucru se datorează faptului că acest site (fiecare dintre paginile sale) va avea o pictogramă, uitându-se la care utilizatorul va ști ce fel de resursă este. Pictograma favicon a site-ului poate fi văzută în diferite elemente ale browserului, cum ar fi o filă, bara de adrese, istoricul de navigare (jurnal), bara de marcaje etc. În plus, pictograma favicon poate fi găsită și în rezultatele căutării Yandex lângă numele site-ului . Pictograma favicon este de asemenea folosită atunci când plasați un link (către o pagină de site) pe ecranul principal al sistemelor de operare iOS (Safari), Android (Chrome), Windows 8 și 10.
Cum să adăugați o favicon pe un site web
Procesul de instalare a unui favicon pe un site începe de obicei cu crearea acestuia. Datorită faptului că cerințele pentru rezoluția și formatul pictogramei favicon pe diferite dispozitive sunt diferite, este mai bine să o pregătiți mai întâi în format vectorial svg (grafică vectorială scalabilă). Această acțiune va permite, folosind o singură imagine (svg), obținerea unei pictograme favicon la o calitate excelentă atât cu o rezoluție de 16x16 pixeli, cât și 512x512.
Ca instrument de lucru cu grafica svg, puteți utiliza un editor profesional gratuit de vectori precum Inkscape.
Pregătiți imaginea pentru favicon
Luați în considerare pașii de bază pentru pregătirea unei imagini în format svg pentru un favicon.
Imaginea care va fi folosită ca pictogramă favicon a site-ului poate fi desenată sau obținută printr-o căutare de imagini de serviciu Google sau Yandex. Este de dorit să căutați o imagine (pictogramă) în format svg. Dar dacă nu puteți găsi o pictogramă potrivită în format svg, atunci puteți alege un alt format (de exemplu, png sau jpg). Și apoi, în programul Inkscape, folosind un instrument special, convertiți-l în grafică vectorială (vectorizați un raster).
De exemplu, luați în considerare modul în care puteți utiliza Inkscape pentru a pregăti o imagine (pictograma ușii) în format svg pentru o favicon.
Exemple de imagini pregătite (săgeată roșie, bec, fluture, ceas, inimă și carte) pentru favicon (pentru descărcare - în meniul contextual al imaginii, selectați elementul „Salvare imagine ca...”):
Generație de favicon pentru toate platformele
Vom genera pictograme favicon pentru toate platformele (iOS, Android, PC, MAC etc.) online la http://realfavicongenerator.net/.
Pentru a face acest lucru, faceți clic pe butonul „Selectați imaginea Favicon” și selectați imaginea pregătită (door.svg) în caseta de dialog.
După aceea, trebuie să setați culorile de fundal și să introduceți numele aplicației pentru sistemul de operare Android (Chrome).
După aceea, selectați opțiunea „Voi plasa...”, care spune că fișierele favicon rezultate trebuie să fie plasate în rădăcina site-ului. Această acțiune își va asigura suportul în majoritatea browserelor.
După această acțiune, serviciul realfavicongenerator.net va genera pictograma favicon și codul HTML. Rezultatul acestei operațiuni va fi afișat pe ecran.
Instalarea unui favicon pe un site web
După finalizarea operațiunilor pregătitoare, să începem conectarea favicon-ului la site. Toți pașii de bază pentru adăugarea unei favicon pe un site web sunt dați pe pagina „Instalați favicon-ul”.
Pași de bază:
De exemplu, pe CMF MODX, conectarea favicon (cod HTML) la pagini se face de obicei într-o bucată, care este folosită pentru a forma secțiunea de cap a documentului.
Verificare favicon site
Verificarea favicon-ului site-ului se realizează folosind link-ul prevăzut la paragraful 4 (verificați-vă favicon-ul). Această acțiune poate fi efectuată și prin meniul principal Favicon -> Verificator Favicon.
Pentru a începe validarea favicon-ului site-ului, selectați protocolul site-ului (http:// sau https://) în formularul prezentat, introduceți numele domeniului și faceți clic pe butonul „Verifică Favicon”.
După aceea, ne asigurăm că favicon-ul site-ului a fost testat pe serviciul realfavicongenerator.net și este afișat corect pe toate platformele.
Indexarea favicon de către motoarele de căutare
Procesul de indexare a pictogramelor pentru diferite motoare de căutare durează momente diferite. De exemplu, la Yandex, acest proces poate dura câteva luni.
Folosind următoarele adrese URL, puteți verifica cum văd roboții de căutare pictograma favicon a site-ului:
- Yandex - https://favicon.yandex.net/favicon/domain_name
- Google - https://www.google.com/s2/favicons?domain=domain_name
În loc de nume_domeniu, trebuie să specificați numele domeniului (de exemplu, site).
Notă: utilizarea imaginilor animate (gif) ca favicon este acceptată doar de unele browsere (Firefox). Alte browsere vor folosi o imagine statică ca favicon.
O nouă lecție în stilul unui atelier și de data aceasta aflăm secretele faviconului. favicon - o pictogramă mică care este afișată în marcaje și în bara browserului. Dacă aveți propriul site web și doriți să comparați favorabil cu alții chiar și în lucruri mici - favicon necesar. Cel mai benefic, desigur, arată 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 linia browserului, cât despre cum să vă desenați propria favicon în Photoshop.
În ce format ar trebui salvat favicon-ul?
Totul depinde de browser. Pentru Microsoft Explorer se potrivește formatul pictogramei ICO. Am întâlnit deja acest format când am făcut cursorul. Pentru alte browsere de la Google Chrome inainte de Apple Safari potrivire normală gif sau PNG. favicon poate fi translucid. Pentru a face acest lucru, trebuie să fie salvat în translucid PNG, apoi convertiți în format ICO. O poți face într-un program bun IcoFX. Cu toate acestea, există multe site-uri terțe pentru generarea unui favicon, iar cel mai evident dintre ele este www.favicon.ru
Cum se pune 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
- Cel mai bun loc pentru un favicon este folderul rădăcină al site-ului.
- Scrieți adresa pictogramei în metaetichete antetîn indexul site-ului.
În HTML arată astfel:
Puteți crea mai multe pictograme pentru browsere diferite, de exemplu una în format ICO, iar celălalt în PNG iar toate acestea sunt indicate prin etichetă legătură . Browserele moderne caută cel mai adesea un fișier în site-ul rădăcină numit favicon, cu toate acestea, pentru a fi sigur, nu strica să indicați legăturile exacte.
Creați o favicon în Photoshop
Crea favicon foarte simplu. Vrei să faci la fel favicon ca Vkontakte sau Odnoklassniki? Bun favicon Nu o puteți face prin reducerea imaginilor mari în tot felul de „generatoare” de favicon-uri, care sunt abundente 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 extinde cu câțiva pixeli când sunt redimensionate. Ia cam anti-alias, ceea ce este de obicei un lucru bun, dar în cazul pixel art, astfel de tranziții pur și simplu nu sunt necesare. Pe de altă parte, merită să evitați „fărâmarea” excesivă pe rotunjime, altfel se va dovedi gif-uri salutare 1999.
Creați un fișier de dimensiune 16 X 16px . Vom crea un translucid foarte simplu favicon cu sub forma unei scrisori, cu un pic de profunzime. Adâncimea va fi creată de umbră și gradient.
Desenați fundalul
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 16px? Foarte simplu, lucrez întotdeauna în vector dacă este posibil să-l folosesc și dacă are sens. Și vectorul transferă ușor orice transformare și nu pierde din calitate.
Alegeț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, bifați - Snap la pixeli. Acest lucru este necesar pentru ca traseele vectoriale să se încadreze în pixeli și să nu atragă „între” ei.
Avem o suprafață favicon, iar marginile translucide vor crea o rotunjime netedă. Acum este timpul să scăpăm de fundalul alb, nu avem nevoie de el. Opriți vizibilitatea acestuia. Sau faceți dublu clic pe strat, transformându-l într-un strat obișnuit, apoi ștergeți-l.
Favicon (ing. Favorite Icon) este o pictogramă mică (imagine, imagine) într-un format special, care se afișează în bara de adrese a browserului la vizualizarea site-ului, în fila browser sau în marcajele acestuia („Favorite”).
favicon este un decor suplimentar pentru site-ul tău, mini logo-ul tău. De asemenea, este afișat atunci când vizualizați lista de site-uri în căutarea Yandex, Google și evidențiază site-ul dvs. din 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 o pictogramă favicon distinctă care le diferențiază de concurenții lor. Pentru ca pictograma 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 în browser, nu vedeți titlul complet al paginilor, ci vedeți doar pictograma și puteți determina imediat cu ușurință fila în care doriți să mergeți.
Ce este mai bine să descrii pe o favicon?
- Pictograma ar trebui să se potrivească cu tema site-ului.
- marca, 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, acest lucru va crește posibilitatea de a face clic atunci când este vizualizat în Yandex, căutare Google;
- Creați mai multe modele de favicon pentru diferite secțiuni ale site-ului dvs.
- Faceți niște modele favicon pentru diferite evenimente (de exemplu, Anul Nou, Ziua Îndrăgostiților sau Ziua Cosmonauticii, :).
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 pentru browserele moderne (favicon.gif), iar pentru cele vechi, precum Intertet Explorer, altul (favicon.ico). Pentru a face acest lucru, în secțiunea de cap, adăugați următoarele două rânduri:
Desigur, mai întâi trebuie să plasați ambele fișiere în folderul rădăcină al site-ului.
Ce se întâmplă dacă afișarea imaginilor este interzisă în browser?
Dacă faceți un favicon cu o imagine încorporată în codul paginii:
Această pictogramă va fi afișată în browser chiar și atunci când imaginile sunt dezactivate. .
Cum să obțineți un favicon de pe un site
Nu toți webmasterii plasează favicon.ico în rădăcina site-ului. Pentru a obține adresa favicon-ului, 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) ; dacă (strpos($favicon, "://")===false) $favicon = $url. "/" .ltrim($favicon, "/"); ) ) ?>
Motoarele de căutare Google, Yandex și favicon
Roboții motoarelor de căutare memorează în cache pictogramele site-ului. Pictogramele memorate în cache sunt disponibile pentru următoarele solicitări:
În plus, Yandex vă poate face un „sprite” de pictograme de pe diferite site-uri:
Pictograme pentru iPhone și iPad
Chiar dacă nu specificați un link către poză, iPhone va căuta totuși un fișier cu numele apple-touch-icon.png în folderul rădăcină al site-ului, iar dacă îl găsește, va face o poză din el. , rotunjiți-l în colțuri și o strălucire i se va aplica automat de către dispozitivul propriu. 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 puncte, deoarece. pentru ei, facem o pictogramă frumoasă cu dimensiunea 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 să schimbi favicon în mod dinamic?
Dacă încercați să modificați valoarea unei proprietăți de etichetă prin DOM, nu veți obține rezultatul dorit. Pentru a schimba dinamic pictograma paginii, trebuie mai întâi să eliminați eticheta de link cu vechea pictogramă din antetul paginii, apoi să o adăugați cu noul conținut. 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
HTML5 a adăugat atributul sizes pentru a permite declararea mai multor 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:
Este posibil să nu se declare dacă numele fișierului nu este schimbat:
Favicon - (din engleză FAVorites ICONA tradusă ca „pictogramă pentru favorite”) - o pictogramă de site web de 16x16px sau 32x32px care este afișată de browser în bara de adrese sau lângă un marcaj salvat. În mod tradițional, numele și extensia pictogramei este favicon.ico.
Serviciul nostru este capabil să convertească imaginea aleasă de dvs. (până la 175 Kb în dimensiune) într-o pictogramă de site (16x16px sau 32x32px în dimensiune). După generare, trebuie doar să încărcați favicon.ico în directorul de găzduire a site-ului dorit.
Absența unei pictograme este o greșeală în optimizarea tehnică a resursei, reduce gradul de cunoaștere a mărcii, reduce CTR-ul fragmentelor de căutare, înrăutățește căutarea unei resurse web folosind marcajele browserului etc.
Yandex are un bot special care indexează individual favicon-ul tuturor site-urilor. Frecvența de adăugare a pictogramelor noi la căutare este de aproximativ de la două săptămâni la o lună.
De unde pot descărca o favicon astfel încât să fie online?
Pentru a afișa favicon.ico pe care l-ați creat ca pictogramă de site, trebuie să îl încărcați în directorul rădăcină al site-ului (sau în orice director) și să specificați calea absolută sau relativă către acesta în codul șablonului de site (), exemplu de cod :
De ce să specificați calea către Favicon?
Când utilizați o pictogramă de site pe întregul site, dacă favicon.ico se află în folderul rădăcină, nu puteți specifica calea către acesta - browserele îl vor găsi singuri și îl vor afișa ca pictogramă de site. Resursele mari sau unice folosesc pictograme diferite de site pentru fiecare dintre categoriile lor. Pentru a face acest lucru, au calea către diferite favicon.ico în șabloanele corespunzătoare.
Subiectul articolului de astăzi este cum să faci o favicon online pentru un site web sau blog pe WordPress. Dacă din anumite motive încă nu știți ce este și de ce este necesar acest fișier, atunci vă recomand să citiți articolele pe care le-am scris deja pe această temă:
În general, fiecare site ar trebui să aibă această mică imagine.
Cum se creează un favicon.ico pentru un site web
Deci, acum voi încerca să vă spun unde, cum și cum să faceți un favicon. Dar mai întâi trebuie să știi ce dimensiune ar trebui să aibă favicon-ul pentru site?
favicon este o imagine în formatele ICO, JPEG, PNG, BMP și GIF, care poate avea dimensiuni diferite, începând de la 16x16 pixeli. O pictogramă de exact această dimensiune trebuie să fie încărcată pe site pentru indexare de către robotul Yandex.
Alte dimensiuni au un rol secundar și nu sunt afișate în căutarea Yandex, ci sunt folosite pentru a fi afișate în browsere, de exemplu, pe iPhone sau iPad. Dacă doriți ca site-ul dvs. să iasă în evidență în rezultatele căutării, rețineți următoarea regulă.
Dacă există mai multe favicon-uri de dimensiuni diferite, calea către imaginea de 16x16 px ar trebui plasată mai întâi în codul paginii, deoarece robotul Yandex favicon citește doar prima adresă.
Cel mai simplu mod este să desenezi o favicon în Photoshop sau în orice alt editor grafic. Puteți face și mai ușor și să faceți o fotografie sau o fotografie gata făcută și pur și simplu să o convertiți în formatul și dimensiunea necesare. Deoarece o astfel de pictogramă este foarte mică, detaliile mici ale imaginii nu vor fi vizibile clar pe ea. Prin urmare, este mai bine să vă faceți favicon-ul cât mai simplu posibil, dar în același timp atractiv și unic. La urma urmei, aceasta este cartea de vizită a resursei tale web.
Dacă nu sunteți un mare cunoscător al Photoshop, atunci nu contează, există multe servicii de generatoare gratuite pe Internet pentru crearea unui favicon pentru un site. Unele dintre ele pot converti doar imaginile în format ICO, în timp ce altele vă permit să editați sau să creați o favicon de la zero. Vă aduc în atenție o mică imagine de ansamblu asupra unor astfel de generatoare online.
Servicii generator de favicon online - creare de favicon online
Voi începe cu cele mai simple servicii, apoi trec treptat la altele mai avansate, unde puteți face pictograme statice și animate de la zero și le puteți edita pe cele gata făcute.
Când tocmai vă lansați blogul sau site-ul companiei și nu aveți încă un logo, serviciul Logaster este o soluție excelentă pentru dvs. Cu acesta, puteți crea un logo, iar apoi, pe baza acestui generator de logo, veți crea o mulțime de favicon-uri la alegere. Comoditatea este că logo-ul și favicon-ul vor fi create în același stil, astfel încât site-ul dvs. va arăta mai profesionist.
Generatoare simple de favicon
Pentru început, câteva site-uri în care poți face cu ușurință o pictogramă pentru site conversia oricărei imagini într-un fișier favicon.ico, fără posibilitatea de editare.
www.favicongenerator.com - poate cel mai minimalist serviciu. Nimic mai mult - alegeți o imagine, apăsați butonul „Generează Favicon! ” și descărcați pictograma creată.
tools.dynamicdrive.com/favicon- un serviciu simplu și de înțeles în care poți face un favicon în trei dimensiuni. Pentru a descărca fișierele primite, trebuie să faceți clic pe butonul „Download FavIcon” de sub ele.
www.cy-pr.com/tools/favicon și www.favicon.co.uk sunt servicii similare celei precedente. În primul, puteți face dimensiunea favicon-ului 16x16 și 32x32, iar în al doilea, suplimentar 48x48 și 64x64.
www.genfavicon.com - întregul proces de creare a unei pictograme include trei pași:
- Selectați un fișier (JPEG, GIF, PNG) de pe computer sau pur și simplu introduceți adresa URL a imaginii și faceți clic pe „ Incarca imaginea“;
- Selectați dimensiunea (16×16, 32×32, 48×48, 64×64 sau 128×128) și zona dorită a imaginii dacă dorim să generăm doar o parte din imagine făcând clic pe „ Captură și imagine“;
- Ne uităm la rezultat și, dacă totul se potrivește, descarcăm fișierul.
Crearea unui favicon animat pentru un site web în generatoare online
Acum să ne uităm la mai multe servicii în care puteți face favicon-uri animate, precum și să adăugați text latin care va derula împreună cu pictograma ticker. Animația adevărată nu este acceptată de toate browserele.
www.favicon.by - serviciu în limba rusă. Tot ceea ce este necesar este să selectați un fișier, să introduceți textul în latină (dacă este necesar) și să faceți clic pe butonul „Creare Favicon“. Mai jos puteți vedea rezultatul și descărca arhiva cu fișierele.
www.favicon.com.mx este un serviciu complet identic cu cel precedent, doar in limba engleza.
Unde să faci o favicon de la zero - editori de favicon online
antifavicon.com - acest serviciu, din anumite motive cu prefixul anti, este interesant prin faptul că vă permite să creați singur fișierul favicon.ico, dar nu ca imagine, ci ca text pe un fundal colorat. Tot ce este necesar este să introduceți literele corespunzătoare și să alegeți culorile. Apropo, mi-am făcut favicon-ul aici. M-am gândit să o schimb mai târziu, dar acum m-am obișnuit.
favicon-generator.org - aici, pe lângă convertor, există și un editor de pictograme. În plus, puteți încărca favicon-ul creat în galeria publică, de unde alți utilizatori ai site-ului îl pot descărca liber.
favicon.ru este un popular generator online rusesc în care puteți să creați favicon-uri din imagini și să le desenați. De asemenea, puteți comanda crearea unui favicon de către specialiști pentru 20 USD. Mă întreb dacă cineva comandă acolo?
www.favicon.cc este un alt generator popular similar celui precedent. O caracteristică interesantă a acestui serviciu este că aici puteți realiza animații cadru cu cadru de până la 20 de secunde.
Puteți vedea favicon-ul animat și îl puteți descărca în fereastra de previzualizare.
www.degraeve.com/favicon - un alt generator de favicon online. Acest editor, ca și precedentul, vă permite să faceți transparent fundalul pictogramei.
Poate suficient pentru astăzi, deși acestea sunt departe de toate serviciile online. Dar chiar și acestea sunt suficiente pentru a crea un favicon frumos pentru site-ul sau blogul tău și pentru a fi vizibil în rezultatele căutării.
Și totuși, am salvat un alt generator de pictograme online pentru site pentru mai târziu. Acest serviciu merită o postare separată, unde vă voi spune cum să faceți un favicon pentru browserele iPhone, iPod Touch și iPad și să vă opresc asupra instalării pictogramelor animate pe site. În plus, vă voi prezenta serviciul Favicon Validator, unde puteți verifica și vedea toate pictogramele favicon.ico dacă acest fișier conține mai multe imagini.. Pa tuturor!
