Favicon i vizuelni identitet sajta: ikonice, veličine i manifest

Kada posetilac ima otvorenih deset kartica u pregledaču, vaš sajt prepoznaje po maloj sličici pored naslova. Ista sličica se pojavljuje u obeleživačima, istoriji, na početnom ekranu telefona kada neko sačuva sajt, a često i pored adrese u rezultatima Google pretrage. To je favicon, najmanji, ali jedan od najčešće viđenih elemenata vizuelnog identiteta. U ovom tekstu objašnjavamo kako ga pripremiti, koje veličine su zaista potrebne, šta je manifest i kako da sve bude usklađeno sa ostatkom brenda.

Zašto je favicon deo identiteta, a ne detalj

Sajt bez favicona prikazuje generičku ikonicu pregledača ili ikonicu platforme na kojoj je napravljen. To odaje utisak nedovršenog posla. Sa druge strane, umanjen ceo logotip sa sitnim tekstom pretvara se u nečitku mrlju. Favicon se zato ne pravi umanjivanjem logotipa, već izdvajanjem njegovog najprepoznatljivijeg dela:

• Znak iz logotipa, ako ga logotip ima.
• Inicijal ili dva slova u fontu i boji brenda.
• Jednostavan oblik na podlozi u boji brenda, kada logotip ima samo tekst.

Ikonica treba da bude čitljiva u veličini od 16 piksela, što znači bez tankih linija, sitnih detalja i teksta. Proverite je na svetloj i tamnoj traci pregledača, jer mnogi korisnici koriste tamni režim.

Praktičan test: otvorite sajt u kartici pored desetak drugih sajtova i pogledajte da li vašu ikonicu nalazite za sekund. Ako se stapa sa ostalima ili liči na neku poznatu aplikaciju, pojednostavite oblik ili pojačajte kontrast boje.

Koje veličine su zaista potrebne

Na internetu se mogu naći spiskovi sa dvadesetak fajlova raznih dimenzija. Danas je za većinu sajtova dovoljan mnogo manji skup, jer savremeni pregledači sami umanjuju veće slike:

U zaglavlju stranice dovoljno je nekoliko redova:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Za ikonicu za iPhone ne koristite providnu pozadinu, jer sistem providne delove popunjava crnom bojom. Ostavite i malo prostora oko znaka, jer se uglovi zaobljavaju.

SVG favicon i tamni režim

SVG je vektorski format, pa je ikonica oštra na svakom ekranu, a fajl je obično vrlo mali. Dodatna prednost je što SVG može da sadrži CSS, pa ikonica može da promeni boju u tamnom režimu:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a3d6d; }
    @media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
  </style>
  <path d="..."/>
</svg>

Neki pregledači ne podržavaju SVG favicon, zato uvek ostavite i favicon.ico kao rezervu. SVG fajl očistite od nepotrebnih podataka koje ostavljaju programi za dizajn, a tekst pretvorite u putanje. O doslednom korišćenju ikonica na sajtu pisali smo u tekstu ikonice na sajtu, a o tamnoj temi u tekstu dark mode na sajtu.

Web manifest: ime, boje i ikonice za telefon

Manifest je mali JSON fajl koji telefonu govori kako da prikaže sajt kada ga korisnik doda na početni ekran: kako se zove, koje ikonice koristi i koje su boje. Čak i ako sajt nije aplikacija, manifest je koristan jer određuje izgled prečice.

{
  "name": "Naziv firme",
  "short_name": "Firma",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#1a3d6d",
  "background_color": "#ffffff",
  "display": "standalone"
}

Kratko ime treba da stane ispod ikonice na početnom ekranu, pa neka ima do desetak znakova. Boja teme se na nekim telefonima vidi u traci pregledača, pa je dobro da odgovara glavnoj boji brenda. Za Android možete pripremiti i takozvanu maskable ikonicu, kod koje je znak u sredini sa dovoljno praznog prostora, jer sistem sam određuje oblik isečka.

Doslednost sa ostatkom brenda

Favicon je deo šire slike. Ista boja, isti znak i isti stil treba da se vide i na drugim mestima gde se brend pojavljuje van samog sajta:

• slika koja se prikazuje kada se link podeli na društvenim mrežama i u porukama;
• profilna slika na Google biznis profilu i društvenim mrežama;
• potpis u e-poruci i dokumenti koje šaljete klijentima;
• boja teme u manifestu i boje dugmadi na sajtu.

Kada se boje i oblici ponavljaju, posetilac lakše povezuje oglas, profil i sajt kao jednu firmu. Zato je korisno da sve ove fajlove čuvate na jednom mestu, uz zapisane šifre boja i fontove. Više o tome u tekstovima boje i tipografija na sajtu i dizajn sistem i doslednost sajta.

Česte greške i provera

1. Ceo logotip sa tekstom umanjen na 16 piksela, pa je nečitljiv.
2. Ostavljena podrazumevana ikonica platforme ili teme.
3. Tamna ikonica koja nestaje na tamnoj traci pregledača.
4. Providna ikonica za iPhone koja dobija crnu pozadinu.
5. Promenjen favicon, a stari se i dalje prikazuje; pregledači ga dugo čuvaju, pa pomaže promena imena fajla ili dodavanje parametra verzije.
6. Manifest koji pokazuje na nepostojeće ikonice.

Posle izmena otvorite sajt u nekoliko pregledača, dodajte ga na početni ekran telefona i proverite kako izgleda kartica u svetlom i tamnom režimu. U pretrazi se nova ikonica pojavljuje tek kada Google ponovo obradi stranicu, što može potrajati.

Favicon je mali posao, ali ga posetioci viđaju svaki put kada se vrate. Ako želite da pripremimo kompletan set ikonica i uskladimo vizuelni identitet sajta sa vašim brendom, pošaljite nam upit.