design Favicon este mai important decât s-ar putea crede,. Dimensiunea contează cu adevărat aici, deoarece un logo bine conceput trebuie să fie recunoscut la orice dimensiune se vede. Trebuie să scaleze de la ecrane masive până la o pictogramă care poate fi la fel de mică ca 16 x 16 pixeli, cunoscută sub numele de favicon. Un exemplu excelent de design favicon este logo-ul Google. Funcționează perfect pentru ecrane mai mari, cu ” G ” mare și text distinctiv în patru culori., Și este încă la fel de ușor de recunoscut atunci când a scăzut până la minuscul ” G ” de patru culori văzut într-o bară de adrese a browserelor web.
favicon poate fi, de asemenea, văzută ca o pictogramă de comenzi rapide, o pictogramă filă sau o pictogramă marcaj, așa că trebuie să se uite partea. Pentru a vedea modelele favicon care funcționează, consultați brevetul nostru de inspirație pentru designul logo-ului și consultați această colecție uimitoare de pictograme pentru aplicații iOS care o fac corect.în acest articol, vom trece prin procesul de proiectare a faviconului perfect., Vom include sfaturi specifice pentru crearea unui favicon pentru dispozitivele Apple, Android, Chrome, Opera și Safari. Plus un ghid la îndemână pentru diferitele dimensiuni și formate favicon trebuie să știți. Utilizați link-urile rapide (dreapta) pentru a sări direct la secțiunea dorită.
- căutați un alt tip de pictogramă? Consultați ghidul nostru pentru cele mai bune seturi de pictograme gratuite
în primele zile ale web-ului, un favicon era pur și simplu un fișier cu pictograme 16x16px, dar în zilele noastre este puțin mai complicat., Există diferite dimensiuni și procese favicon pentru diferite contexte. Crearea unui favicon adecvat este o știință.deci, vom începe cu câteva sfaturi de top pentru cum ar trebui să arate faviconul dvs. și apoi vom trece la sfaturi specifice despre cum să creați un favicon pentru diferite contexte. Vom folosi șablonul disponibil pe Apply Pixels pentru a genera cu ușurință diferitele dimensiuni favicon necesare și favicon de la Apply Pixels ca exemplu.,
reguli de proiectare Favicon
faceți-l recunoscut
primul lucru de luat în considerare la proiectarea unui favicon este ceea ce trebuie reprezentat în pânză. Amintiți-vă că faviconul dvs. este afișat numai utilizatorului atunci când acesta se află deja pe site-ul dvs. web sau L-au marcat. Deci nu este nevoie să încercați să atrageți utilizatorul cu faviconul dvs.
utilizați logo-ul
luați în considerare favicons ca semnalizatoare sobre care ajută utilizatorii să recunoască site-ul dvs. atunci când navigați listele de marcaje și homescreens lor., Prin urmare, doriți să utilizați logo-ul dvs. sau orice simbol permite cel mai ușor utilizatorului să recunoască site-ul dvs. web. Dacă nu ai un logomark care să se potrivească cu pânza patratică, folosește cea mai recognoscibilă parte a logo-ului tău.
păstrați-l clar
există, de asemenea, câteva lucruri pe care ar trebui să le evitați. Nu utilizați favicon ca instrument de marketing – asta înseamnă că nu există etichete de preț, bannere ” noi ” sau „actualizate” și așa mai departe. De fapt, nu doriți să puneți deloc text în favicon. Textul nu se scalează bine și șansele sunt că oricum va fi ilizibil., În cele din urmă, nu folosiți o fotografie – va fi noroios și de nerecunoscut la dimensiunea la care va apărea.
de a Crea două versiuni
Când favicons au fost introduse pentru prima dată în Internet Explorer 5, au apărut în bara de URL-ul și în lista de marcaje. Astăzi, favicons sunt afișate într-o mulțime de alte contexte, inclusiv liste de marcaje, meniuri de comenzi rapide și chiar homescreens mobile și TV., Acest lucru face dificilă prezicerea modului în care faviconul dvs. va fi afișat utilizatorului final.
Pentru a se asigura favicon dvs. arată bine în multe contexte diferite este de gând să apară în mod ideal, ar trebui să ofere două favicon stiluri:
Logo pe fond transparent
Această versiune este afișat în bara de URL-ul, marcaje de liste și alte locuri unde favicon apare lângă site-ul URL-ul sau numele.,această versiune este utilizată în marcaje asemănătoare grilei și meniuri de comenzi rapide unde browserul sau dispozitivul maschează fundalul, pentru a obține un aspect uniform în context.
Favicon size cheatsheet
așa cum am menționat anterior, contexte diferite necesită favicoane de dimensiuni diferite. Mai jos puteți vedea un ghid rapid pentru diferitele formate și dimensiuni pe care va trebui să le furnizați pentru a acoperi toate cazurile principale de utilizare.anterior, favicoanele trebuiau furnizate în format ICO., Astăzi este în regulă să furnizați fișierele în format PNG (cu excepția pictogramei Safari Pinned Tab care ar trebui furnizată ca SVG).dacă doriți o modalitate ușoară de a proiecta și exporta toate dimensiunile favicon, aruncați o privire la șablonul favicon peste la aplicați pixeli.
Acum, haideți să aruncăm o privire mai atentă la cerințele specifice diferitelor cazuri de utilizare.,
favicon-urile browserului Desktop
cum se creează un favicon pentru browserul desktop
Să începem cu cel mai simplu favicon pe care va trebui să-l creați: un favicon clasic pentru browserele desktop clasice. Acest tip de favicon funcționează cel mai bine pe fundaluri transparente, deoarece va apărea adesea în bara URL și în listele de marcaje.,
Veți avea nevoie pentru a oferi acest tip de favicon în trei dimensiuni, toate în format PNG cu fundal transparent.,
- 16×16
- 32×32
- 48×48
Mere
Cum de a crea Apple Touch favicons
Apple iOS Apple a foloseste Atingeți Pictogramele pentru a reprezenta site-uri care au fost salvate pentru iOS ecranul de start ca marcaje. Aceasta înseamnă că pictograma Apple Touch va fi rotunjită la masca squircle a pictogramelor aplicației iOS.
acesta va fi, de asemenea, afișat în funcție de fundalul pe care utilizatorul l-a ales pentru ecranul de pornire. Având în vedere acest lucru, pictograma Apple Touch ar trebui să aibă un stil de fundal solid de umplere.,
Apple favicons ar trebui să fie furnizate într-un format PNG. Puteți scăpa cu furnizarea unui 180×180 Apple a Touch Icon care va scala automat pentru diferite dimensiuni iPhone și iPad. Acest lucru va funcționa bine în majoritatea cazurilor.,
Dacă nu, puteți furniza informații suplimentare dimensiuni pentru diferite dispozitive Apple:
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180
Android, Chrome și Mozilla
Cum de a crea un favicon pentru Android, Chrome și Opera
Android, Chrome si Opera folosesc android-google chrome-192×192.png și android-chrome-512×512.png că Google recomandă.,de la introducerea pictogramelor adaptive în Android, site-urile web adăugate pe ecranul de pornire Android vor masca designul 192×192, astfel încât pictograma să se contureze după stilul de mascare preferat de utilizator. Acest lucru ar putea fi un squircle, elipsă, dreptunghi, dreptunghi rotunjit sau formă lacrimă.
Ai nevoie pentru a crea un PNG favicon cu fundal solid, la 192×192 și 512×512.,
implementați aceste favicoane adăugând un manifest.fișierul json pe site – ul dvs. și conectarea la acesta în etichetele:
<link rel="manifest" href="/manifest.json">aici este codul manifestului.fișier json:
Safari
cum se creează un favicon pentru fila fixată a Safari
acesta este cel ciudat și este singurul favicon care trebuie furnizat în format vectorial ca fișier SVG. Se afișează ca pictogramă miniatură atunci când un utilizator fixează o filă în fereastra browserului Safari.,
Acest favicon trebuie să fie 100% negru fișier SVG, cu un fundal transparent. SVG poate fi doar un singur strat, iar safari necesită ca atributul viewBox al SVG să fie setat la „0 0 16 16”.
<link rel="mask-icon" href="your_icon.svg">alte tipuri de favicon
există unele dimensiuni și formate favicon care nu au fost incluse în acest articol, de ex., Google TV, Chrome Web Store și pre-iOS 7 Apple Touch icoane. De ce? Pentru că au fost depreciate sau pentru că sunt rareori relevante pentru dezvoltatorul web Mediu. în general, dezvoltatorii și designerii ar trebui să se străduiască să sprijine o varietate cât mai largă de dispozitive și sisteme de operare, dar uneori pur și simplu nu are sens. Dar, dacă doriți să vedeți o listă mai completă de imagini favicon, asigurați-vă că aruncați o privire la această foaie de înșelăciune favicon pe GitHub.,
- tendințele de design de top pentru 2020
- 15 fonturi profesionale pentru designeri
- 27 Cele mai bune seturi de icoane gratuite
