Primjeri favicon-a, najbolje prakse i tehnike

Da li ikad obraćate pažnju na one sićušne ikone na vrhovima kartica preglednika? Što o tome kad spremate prečac na web stranicu ili stranicu na mreži? Te sitne slike, ili šarene slike, dizajnirane su posebno za tu svrhu.

Postoji prilična razlika između sitnice za dobru ili lošu. Oprostili biste se od razmišljanja da su dizajnerske odluke u sitnim razmjerima manje važne. Ali loše dizajnirani favicon može se loše odraziti na vašu marku.

Danas razmatramo što su ove ikone, osnovne tehnike dizajniranja za njih i specifikacije koje ćete trebati slijediti.

Istražite elemente Envatoa

Što je favicon?

Jednostavno, favicon je mala, prozirna ikona koja se koristi za predstavljanje web stranice, marke ili tvrtke. Favicons pomažu u poboljšanju korisničkog iskustva pružajući dosljedan marker koji posjetiteljima web stranica govori da se nalaze na istoj web lokaciji kao što se kreću zahvaljujući dosljednom vizualu.

Izraz favicon dolazi od "omiljena ikona". Ta se terminologija odnosi na dane Internet Explorera kada su stranice s oznakama nazvane "Favoriti". Favicon je prvi put usvojio World Wide Web Consortium (W3C) za HTML 4.0, oko 2000, a počeo se dosljedno pojavljivati ​​u prozorima preglednika sljedeće godine.

Upotrijebite navigacijske tipke za brzo prelazak između kartica preglednika, prepoznavanje oznake ili pronalazak spremljene aplikacije ili prečaca na telefonu. Vizualni identifikator je ono što većina ljudi koristi za povezivanje ovih veza i stranica s desnim gumbom za pristup njima.

Tradicionalno su faviconsi koristili .ico format datoteke, ali to je sad manje problem. Bilo koja prozirna vrsta datoteke funkcionirat će u većini slučajeva; .png je često format izbora.

Tehnička razmatranja

U jednom su trenutku svi favikoni bili super mali kvadrati od 16 piksela. To više nije slučaj s više zaslona mrežnice visoke razlučivosti i ikona prečaca za razmatranje.

HTML 5 uključuje standarde za odabrane sadržaje više veličina za sve vrste upotrebe, od sitnih ikona preglednika do ikona računalne priključne stanice do ikona početnog zaslona. Više vam ni ne treba taj kvadrat od 16 piksela.

Moderne veličine i upotreba:

• 32 × 32: Standardno za većinu preglednika za stolna računala (zamjenjuje 16 × 16)
• 128 × 128: Chrome trgovina i mala ikona za Windows 8 zvjezdica
• 152 × 152: ikona dodirnog zaslona iPad
• 167 × 167: ikona dodirnog zaslona iPad Retina
• 180 × 180: iPhone ikona mrežnice
• 192 × 192: Preporuka web aplikacije Google Developer
• 196 × 196: Ikona početnog zaslona Android

Najbolje prakse

Iako se čini kao ikona koja je tako možda beznačajna u pogledu cjelokupnog dizajna, to je daleko od istine.

Favicon govori mnogo o vašoj robnoj marki i web mjestu. Korisnici su ih očekivali ako ih ne mogu identificirati imenom. Ovi mali elementi doprinose ukupnom korisničkom iskustvu i brandu.

Pa kako možete najviše iskoristiti od favicon-a?

Imajte na umu ove najbolje prakse:

• Favicon bi se trebao povezati s vašim identitetom marke, ali često je premalen da bi sadržavao čitav logotip. Koristite prepoznatljivi element, kao što je prvo slovo imena vaše marke ili sitni znak koji upotrebljavate u suradnji s markom.
• Razmislite o obliku. Prostor za favicon prema zadanim postavkama je kvadratni. Ako želite išta drugo, prozirna pozadina je potrebna. Neki sustavi također mogu zaokružiti rubove, imajući to na umu.
• Provjerite je li datoteka mala, ali ne premala. Prenesite veličinu favicon-a koja će se prikazivati ​​ispravno na većini uređaja, ali neće pokvariti cjelokupnu web stranicu.
• Izbjegavajte riječi ili složene elemente u dizajnu favicon-a.
• Držite se jednostavne palete boja za favicon. Premalo je da bi se poludio s bojom. Zato većina ovih sićušnih ikona koristi malo više od boje pozadine i prednjeg plana s puno kontrasta između ove dvije.

Tehnike dizajna

Budući da je favicon mali, možda ćete ga skloniti dizajnirati na kapricu u Photoshopu. To nije preporučena ruta za dugovječnost.

Vrhunsko pravilo vizualnog dizajna za korisnike je da dizajn bude jednostavan. Ne prekrivajte elemente boje ili teksta ili marke.

Izgradite svoj favicon u vektorski alat poput Illustrator ili Sketch, a zatim izvezite dizajn na potrebne veličine. To će osigurati da će se s promjenom razlučivosti zaslona pojaviti favicon koji stoji test vremena. (Sve što trebate učiniti je ponovno izvesti u novoj veličini.)

Vrhunsko pravilo vizualnog dizajna za korisnike je da dizajn bude jednostavan. Ne prekrivajte elemente boje ili teksta ili marke. Promatrajući primjere u ovom postu, vidjet ćete da su gotovo svi ti sitni elementi čitljivi u 16 do 16 piksela.

Izbjegavajte trikove poput animacije; oni se ovdje samo sprječavaju.

Smatrajte to dizajnerskim izazovom. Može biti prilično teško stvoriti nešto tako malo da je lako čitati.

Spremite datoteku kao prozirni png. Dobra je navika koja osigurava da nećete završiti s neobičnim rubovima ili obrubima na pukotinama. (Ništa ne izgleda gore od nazubljenog bijelog ruba koji okružuje ikonu.)

Koristite načela dobrog dizajna. Nikad ne znate kada bi se favicon mogao koristiti za nešto veće, vidljivije veličine. Ako, primjerice, spremite oznaku web stranice, možete koristiti veliku verziju odabira. Isto vrijedi i za pristajanje, pa čak i za pregled rezultata pretraživanja.

Iako je mala, ova ikona predstavlja vašu marku. Dizajnirajte ga dobro.

Nakon što datoteku pripremite, možete je dodati na svoju web stranicu sa samo nekoliko redaka koda. (Mnoge WordPress teme i graditelji web stranica već sadrže elemenat favicon-a tako da čak ni ne morate razmišljati o ovom koraku.)

Nakon prijenosa slikovne datoteke umetnite sljedeći kôd u zaglavlje vaše web stranice, uz napomenu da se "iconpath" i "iconname" odnose na vaš specifični element datoteke:

• HTML indeksna datoteka:
• WordPress:

Primjeri

Primjeri u nastavku uključuju neke elemente marke s pripadajućim faviconima. (Obavezno kliknite i pokažite dizajnerima ljubav na svojim Dribbble stranicama.)

Prodigi.team responzivni logotip

Predloženi sustav logotipa Butterscotch

Prikaz Favicon logotipa

Šablon Favicon

Opcija TEC 2

Zaključak

Ono što odabranima nedostaje, oni čine u korisničkom iskustvu. Ove ikone služe kao navigacijski alati za posjetitelje na vašoj web lokaciji i one koje obično ostavljaju previše otvorenih kartica preglednika.

Općenito je pravilo, favicon je brzi vizualni identifikator koji povezuje korisnika sa vašom digitalnom prisutnošću. Pazite na to kako biste osigurali da je najbolji, točniji prikaz vaše marke.