Pictograma site-ului web este o parte importantă a site-ului dvs. web. Cu toate acestea, adesea despre faviconul notoriu la care ne gândim în ultima clipă și inserați linia de legătură a etichetei cu o singură opțiune a pictogramei. Uneori considerăm că este suficient să plasați fișierul favicon în rădăcina site-ului, deoarece un browser modern poate găsi și conecta pictograma dvs. în mod independent. Și uneori uită de favicon deloc.
Favicon pentru desktop
Să începem cu lucrurile obișnuite. Practic, toate versiunile de browsere desktop se bazează pe 16 × 16 pictograme. 32 × 32 și 48 × 48 în format .png sau .ico (pentru versiunile mai vechi ale IE numai .ico).
Favicon pentru Android
- 36 × 36 - pentru ecranele cu factor de densitate de 0,75
- 48 × 48 - pentru ecrane cu un factor de densitate de 1
- 72 × 72 - pentru ecrane cu factor de densitate de 1,5
- 96 × 96 - pentru ecrane cu un factor de densitate de 2
- 144 × 144 - pentru ecrane cu un factor de densitate de 3
- 192 × 192 - pentru ecrane cu un factor de densitate de 4
Android vede icoane în formatul .png. și se bazează, de asemenea, pe fișierul manifest.json care poate conține un număr de parametri cosmetici diferiți. În absența posibilelor opțiuni pentru pictogramele de pe Android, sistemul se bazează pe pictogramele apple-touch-icon.
Favicon pentru dispozitive mobile Apple
Ca și în Android, dispozitivele Apple au un PPI diferit pentru diferite dispozitive, inclusiv așa-numitele ecrane Retina. Pentru versiuni diferite de rezoluții ale ecranului și versiuni de sistem de operare, există și o serie de diferite pictograme:
- 57 × 57 - pentru iPhone cu afișare non-retină și iOS versiunea 6.0 și versiunile ulterioare
- 60 × 60 - pentru iPhone cu afișare non-retină și versiunea iOS 7.0
- 72 × 72 - pentru iPad cu afișare non-retină și iOS versiunea 6.0 și versiunile ulterioare
- 76 × 76 - pentru iPad cu afișare non-retină și iOS versiunea 7.0
- 114 × 144 - pentru iPhone cu afișare pe retină și iOS versiunea 6.0 și versiunile ulterioare
- 120 × 120 - pentru iPhone cu afișare pe retină și iOS versiunea 7.0
- 144 × 144 - pentru iPad cu afișare pe retină și iOS versiunea 6.0 și versiunile ulterioare
- 152 × 152 - pentru iPad cu afișare pe retină și iOS versiunea 7.0
- 180 × 180 - pentru iPhone 6 Plus cu iOS versiunea 8.0
Alte favicon
- IE10 în Windows 8 necesită o culoare de fundal
- IE11 în Windows 8 și 10 are mai multe opțiuni diferite pentru pictograme, precum și setări bazate pe fișierul XML browserconfig.xml
- Safari pentru Mac OS X El Capitan necesită o pictogramă SVG pentru filele fixate
- 96 × 96 pentru Google TV
- 228 × 228 - pentru Coasta Opera
Și cum să înființeze și să conecteze toate aceste diversități?
Este logic să presupunem că pentru a conecta toate aceste varietăți de favicon ar fi nevoie de mult efort. Ceea ce ridică o întrebare rezonabilă: există un instrument pentru automatizarea acestui proces? Și, bineînțeles, există. Pentru cei care folosesc managerii de sarcini, cum ar fi Grunt sau Gulp în dezvoltarea lor front-end, există plug-in-uri speciale (despre ele în finalul articolului). Vom folosi soluția online, care vă va permite să configurați convenabil toți parametrii și să vedeți imediat rezultatul.
Generatorul online vă permite să creați o pictogramă pentru site-ul dvs. pentru toate tipurile de browsere și dispozitive bazate pe doar una dintre imaginile dvs. (dimensiunea dorită a codului sursă nu este mai mică de 260 × 260).
După încărcarea pictogramei, vom vedea o pagină în care putem regla pictograma noastră pentru fiecare platformă și vom vedea imediat rezultatul.
În fila de setări din iOS, putem specifica culoarea de fundal pentru pictogramă, precum și specificarea mărimilor indentărilor din zona pictogramei. Fila Imagine dedicată vă permite să încărcați o altă pictogramă pentru un anumit tip de dispozitiv (similar cu Android, Windows și Mac OS)
În cadrul setărilor Android ceva mai interesant. Puteți specifica culoarea și indicele de fundal ca în versiunea iOS, există, de asemenea, o opțiune de fundal transparent cu umbra proprietară a tuturor pictogramelor standard ale acestui sistem de operare. Este posibil să specificați un nume de aplicație specific. În fila Opțiuni, putem specifica adresa URL la care va conduce aplicația noastră.
Pentru fișierele fixe din Safari 9 în Mac OS X El Capitan este utilizată o nouă versiune cu pictograme svg.
Cu sistemul Windows, toate sunt un pic mai complicate. Aici indicarea culorii de fundal este strict obligatorie, iar culoarea logo-ului este, în majoritatea cazurilor, mai bună de a alege culoarea albă.
Setările globale finale pot fi făcute în ultima fereastră de opțiuni. Aici puteți specifica calea spre directorul în care vor fi stocate toate fișierele faviconului nostru generat, selectați raportul de compresie pentru a economisi spațiu, selectați algoritmul de scalare și așa mai departe.
Încorporarea într-un șablon
După ce ameliorați setările pentru nevoile noastre, puteți genera în cele din urmă icoane. În fereastra care apare, vom vedea mai multe opțiuni pentru conectarea icoanelor. Pentru a conecta pictogramele în mod obișnuit la fișierul HTML, descărcați arhiva propusă și inserați codul special generat între etichetele capului site-ului dvs.
După aceasta, puteți testa eficiența faviconului aici.
Cod pentru managerii de sarcini Grunt și Gulp
Acum, că înțelegem principiile generării de favicon, pentru a afișa site-ul pe diferite dispozitive, putem automatiza acest proces cu ajutorul managerilor de sarcini. E suficient să vedeți fila Grunt sau Gulp după generație. în funcție de ceea ce utilizați, și studiați codul propus în detaliu pentru ao utiliza în proiectele dvs. în viitor și pentru a automatiza procesul de generare fără a accesa resursa online.
În proiectele noastre folosim Gulp
1. Instalați pluginul gulp-real-favicon
2. Inserați codul în gulpfile.json
3. Înlocuiți calea TODO: Calea la imaginea principală cu calea spre sursa de unde vor fi generate pictogramele. De exemplu, active / images / master_picture.png
4. Înlocuiți TODO: Calea către directorul în care să stocați pictogramele din calea către directorul în care vor fi pictogramele generate. De exemplu, dist / imagini / pictograme
5. Înlocuiți TODO: Lista fișierelor HTML în care să se injecteze marcările favicon pe calea spre fișierele în care va fi introdus codul de implementare favicon. De exemplu, ['dist / * .html', 'dist / misc / *. Html']
6. Înlocuiți TODO: Calea către directorul unde să stocați fișierele HTML pe calea spre directorul în care sunt stocate fișierele HTML.
7. Generați icoane cu comanda
8. Integrați pictogramele în șablonul dvs.
concluzie
Astfel de acțiuni aparent normale vor permite site-ului dvs. să caute pe dispozitive diferite și mai adaptabil.
P.S. ceva mai util
Dacă doriți să aflați modul în care motoarele de căutare Yandex și Google văd site-ul dvs. favicon, puteți utiliza servicii speciale:
În cazul în care mydomain.com este domeniul site-ului dvs.
Aproape pe fiecare site există o secțiune cu recenzii și un formular pentru scrierea lor. Necesitatea unei astfel de secțiuni este scrisă în cărți inteligente privind proiectarea resurselor de pe Internet, spunând că astfel veți primi feedback de la utilizatori. Acesta este doar acest feedback are un dezavantaj.
Aproape fiecare companie, un produs, și chiar mai mult o agenție, necesită de multe ori copywriteri. Nu contează dacă este postul de copywriter, manager de conținut, specialist PR sau simplu manager, esența este adesea una - de a scrie texte. În ciuda simplității aparente, nu toți scriu texte bine versatile.
Mulți copywriteri începători se tem să se ducă imediat la agenție. Nu sunt siguri că vor putea să facă față încărcăturii și că sunt, în general, potrivite pentru această poziție, prin urmare, la sfatul unor tovarăși de rang înalt, aceștia sunt trimiși la bursă. Simpla idee a unor astfel de schimburi se inspiră: lucrați ca freelancer, construiți un program gratuit, fără a vă lega de loc. Dar ochelarii cu trandafir cad dupa primul ordin sau exercitii matematice simple.
Articole similare
Trimiteți-le prietenilor: