Favicon

Favicon je mala ikona sajta koja stoji na kartici pregledača, pored adrese u oznakama i na početnom ekranu telefona kad neko sačuva sajt. Google je prikazuje i pored naziva sajta u rezultatima pretrage.

Mala je, ali se vidi stalno. Kad neko ima deset otvorenih kartica, po ikoni traži vašu. Kad u pretrazi gleda deset rezultata, ikona je jedini znak po kojem na prvi pogled razlikuje firme.

Gdje se pojavljuje

• Na kartici pregledača, veličine 16 do 32 piksela.
• U oznakama i historiji pregledača.
• Na početnom ekranu telefona, kad se sajt doda kao prečica. Tu je ikona veća, 180 piksela na iPhoneu.
• U rezultatima Google pretrage, pored naziva sajta.

Na računaru ga ljudi najčešće vide na kartici. Na telefonu, gdje se kartice rijetko gledaju, najviše ga vide u pretrazi i na početnom ekranu.

Isti crtež mora raditi i na 16 i na 512 piksela. To je glavni dizajnerski problem.

Logo ne stane

Cijeli logo s nazivom firme na 16 piksela postaje mrlja. Favicon se zato pravi od dijela logoa: znaka bez teksta, prvog slova ili inicijala.

Ako logo nema znak, pravi se monogram, jedno ili dva slova u boji firme. Pojednostavi se sve što se na malom ne vidi: tanke linije, sjene, prelazi boja, sitni detalji.

Vrijedi ga provjeriti na svijetloj i na tamnoj kartici. Tamni znak na providnoj pozadini nestane u tamnom načinu prikaza. Rješenje je kvadrat ili krug u boji ispod znaka, ili posebna verzija za tamnu pozadinu.

Favicon je dio vizuelnog identiteta. Treba stajati u knjizi standarda, uz ostale verzije logoa, da ga sljedeći dizajner ne mora praviti iz početka.

Fajlovi koje treba imati

• favicon.ico: stari format s više veličina u jednom fajlu, za starije pregledače.
• SVG verzija: jedan vektorski fajl koji je oštar na svakoj veličini, za većinu modernih pregledača.
• PNG od 180 × 180: za početni ekran iPhonea, pod nazivom apple-touch-icon.
• PNG od 192 i 512: za Android i za sajt koji se instalira kao aplikacija.

Fajlovi se povežu u zaglavlju stranice. Većina sistema za izradu sajta ima polje za ikonu sajta u postavkama, pa sve veličine napravi iz jedne slike.

Kako se pravi

Kreće se od znaka iz logoa u vektorskom formatu. Dizajner ga postavi u kvadrat, provjeri kako izgleda na 16, 32 i 180 piksela, pa pojednostavi ono što se gubi. Često trebaju dvije verzije crteža: detaljnija za velike ikone i grublja za karticu.

Boje se uzmu iz palete firme, uz dovoljno kontrasta prema bijeloj i tamnoj pozadini. Fajlovi se izvezu u svim veličinama, provjere na telefonu i računaru, i tek onda postave na sajt.

Za firmu bez dizajnera postoje besplatni generatori koji iz jedne slike naprave sve fajlove. Rezultat je dobar onoliko koliko je dobra slika koja uđe u generator.

Favicon u Google pretrazi

Google prikazuje favicon pored rezultata, najvidljivije na telefonu. Pravila su kratka: ikona mora biti kvadratna, povezana s početne stranice i dostupna robotu. Google preporučuje da bude veća od 48 × 48 piksela i da predstavlja brend. Neprikladnu ikonu zamijeni opštom.

Google prikazuje jedan favicon po nazivu domaćina. Poddomena kao shop.vasafirma.ba ima svoj, pa se ikona postavlja i tamo.

Promjena se ne vidi odmah. Google mora ponovo pročitati početnu stranicu, pa nova ikona u pretrazi može kasniti danima ili sedmicama.

Favicon ne utiče na pozicije. Utiče na to da li vas neko prepozna u rezultatima pretrage, pa i na to koliko ljudi klikne baš vaš rezultat.

Primjer iz prakse

Agencija za nekretnine iz Kiseljaka ima logo s kućom i punim nazivom firme u dva reda. Favicon je bio isti logo, smanjen. Na kartici se vidjela siva mrlja, a u pretrazi na telefonu Google je prikazivao opštu ikonu globusa.

Dizajner napravi posebnu verziju: samo krov iz logoa, bijel na kvadratu u boji firme. Ubace se sve veličine, a SVG zamijeni stari fajl. Nakon nekoliko sedmica Google prikaže novu ikonu, a kupci koji su sajt sačuvali na telefonu dobiju prečicu koju prepoznaju.

Posao je trajao nekoliko sati. Nova ikona ušla je u knjigu standarda zajedno s verzijom za tamnu pozadinu, pa je ni štamparija ni agencija za oglase poslije nisu morale tražiti. Ista verzija se koristi i kao profilna slika na mrežama, gdje se i logo s tekstom gubio u malom krugu.

Kad ovo nije vaša briga

Ako sajt pravi agencija ili platforma, favicon se obično postavi uz ostatak sajta i ne treba poseban projekat. Dovoljno je jednom provjeriti da nije ostala ikona platforme ili teme, i da se znak vidi na tamnoj kartici.

Greške koje najčešće viđamo

Najčešće je to cijeli logo s tekstom, smanjen do neprepoznatljivosti.

Česta je i ikona WordPressa ili teme koja je ostala od izrade.

Viđamo tamni znak koji nestane na tamnoj kartici.

Tu je i jedna mala slika bez verzija za telefon.

Na kraju, novi favicon poslije rebrendinga, dok stara ikona ostane na poddomeni ili u trgovini.

Lista za provjeru

• Prepoznaje li se ikona na 16 piksela?
• Vidi li se na svijetloj i na tamnoj kartici?
• Postoje li ICO, SVG i PNG verzije za telefon?
• Prikazuje li Google vašu ikonu pored rezultata?
• Stoji li favicon u knjizi standarda?

Pojmovi koje ćete čuti uz favicon

• Apple touch icon: ikona za početni ekran iPhonea i iPada.
• Web app manifest: fajl koji Androidu govori koje ikone i boje sajt koristi.
• Monogram: znak od jednog ili dva slova, česta osnova za favicon.
• ICO: stari format ikone s više veličina u jednom fajlu.