Logo za sajt: format, veličina i favicon

Koji format: SVG, PNG ili WebP

SVG je vektorski format: logo je zapisan kao oblici, ne kao pikseli, pa je oštar na telefonu, na velikom ekranu i pri uvećanju. Jednostavan znak u SVG-u obično ima svega nekoliko kilobajta. Pre objave tekst u logou treba pretvoriti u krive, jer inače zavisi od fontova koji su instalirani na uređaju posetioca. Iz fajla treba ukloniti i višak koji ostavljaju programi za crtanje: skrivene slojeve, metapodatke i ugrađene slike.

PNG i WebP su rasterski formati, sastavljeni od piksela. Bolji su kad logo ima fotografiju, teksturu ili senke, koje bi u SVG-u bile teže od slike. Tada logo pripremite u dvostrukoj veličini od one u kojoj se prikazuje, da bude oštar i na ekranima sa gustim pikselima.

JPG za logo ne koristite: nema providnu pozadinu, a oko oštrih ivica i slova pravi mrlje.

Koliko veliki logo u zaglavlju

Za to ne postoji standard, pa pišem kako radim. Logo u zaglavlju treba da bude dovoljno visok da se ime firme pročita na telefonu, a ne toliko da zauzme pola prvog ekrana. Oko znaka ostavljam prazan prostor, da ga dugmad i meni ne pritiskaju. Na uskom ekranu, kad ime firme i meni ne staju u jedan red, ostaje samo znak.

Logo je obično i link na početnu stranu, pa za njega važi isto što i za dugmad: površina za dodir treba da bude najmanje 24 × 24 piksela, po kriterijumu 2.5.8 standarda WCAG 2.2.

Favicon: šta Google traži

Favicon je mala ikonica sajta. Stoji na kartici pregledača, u obeleživačima i pored imena sajta u Google pretrazi.

Pravila iz Google dokumentacije

Google-ova dokumentacija za favicon u pretrazi, u verziji od 28. avgusta 2026, kaže:

• favicon mora da bude kvadrat, odnosa 1:1, najmanje 8 × 8 piksela, a Google preporučuje veći od 48 × 48;
• podržani formati su BMP, GIF, ICO, PNG, JPEG, PPM i TIFF;
• adresa ikonice treba da bude stalna, da se ne menja često;
• Googlebot mora da može da pročita početnu stranu, a Googlebot-Image sam fajl ikonice;
• jedan sajt, odnosno jedno ime hosta, ima jedan favicon: poddomen može da ima svoj, a podfolder ne može;
• ikonica se navodi u zaglavlju početne strane, oznakom link sa rel="icon".

Ni kad je sve ispunjeno, Google ne obećava da će ikonicu prikazati. Posle izmene treba sačekati da ponovo obiđe početnu stranu, što može da traje od nekoliko dana do nekoliko nedelja.

SVG nije na Google-ovom spisku podržanih formata. Zato uz SVG ikonicu uvek stavljam i favicon.ico.

Set ikonica koji stavljam na sajt

Na sajtovima koje pravim, pa i na ovom, set izgleda ovako:

• favicon.ico sa tri veličine u jednom fajlu: 16, 32 i 48 piksela;
• favicon.svg, za pregledače koji čitaju SVG ikonicu;
• apple-touch-icon.png, 180 × 180 piksela, za iPhone, kad neko doda sajt na početni ekran;
• icon-192.png i icon-512.png u manifestu sajta (site.webmanifest), za Android i Chrome.

Za 180 × 180 oslanjam se na primer iz Apple-ovog uputstva za web aplikacije, a za 192 i 512 na web.dev: Chrome traži najmanje jednu ikonicu od 192 × 192 i jednu od 512 × 512 piksela. Ikonice za telefone pravim na punoj pozadini u boji sajta, bez providnih delova.

U zaglavlju strane to su četiri reda:

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

Znak čitljiv na 16 piksela

Na 16 piksela ceo logo sa imenom firme postaje mrlja. Za favicon zato služi znak: prvo slovo, simbol ili deo logoa, sa debljim linijama i bez sitnih detalja. Znak ovog sajta je plavi kvadrat sa belim slovom S; pogledajte ga na kartici pregledača.

Logo za Google pretragu

Kad sajt u strukturiranim podacima o firmi (Organization) navede logo, Google ga može prikazati u rezultatima pretrage i u panelu sa podacima o firmi. Pravila iz Google-ove dokumentacije, u verziji od 8. septembra 2026:

• slika ima najmanje 112 × 112 piksela;
• adresa slike mora da bude dostupna Google-u za čitanje i indeksiranje;
• format mora da bude jedan od onih koje podržava Google pretraga slika;
• logo treba da izgleda kako treba na potpuno beloj pozadini.

Poslednje pravilo je zamka za logoe koji su beli ili svetlosivi, pravljeni za tamno zaglavlje: na beloj pozadini nestanu. Za strukturirane podatke tada ide verzija logoa za svetlu pozadinu ili znak na punoj pozadini u boji firme. Podaci o firmi ne moraju na svaku stranu; dovoljno je da budu na početnoj ili na strani o firmi.

Logo na tamnoj pozadini i slika za deljenje

Ako sajt ima tamno zaglavlje ili tamnu temu, trebaju vam dve verzije logoa, za svetlu i za tamnu pozadinu. Nije dovoljno samo obrnuti boje: boja koja nosi logo na beloj može da nestane na crnoj, pa je proverite istim merenjem kao tekst, sa strane Boje za sajt. Logotipi su u WCAG-u izuzeti od pravila o kontrastu, ali logo koji se ne vidi ne radi svoj posao.

Kad neko podeli link na mreži, prikazuje se slika za deljenje. Na ovom sajtu svaka strana ima svoju, veličine 1200 × 630 piksela, sa naslovom strane. Logo je na njoj sporedan; važnije je da se naslov pročita i u malom prikazu.

Kad logo postoji samo kao slika

Mnoge firme logo imaju samo kao sliku sa vizit-karte ili sa Facebook-a. Za sajt to nije dovoljno. Pitajte dizajnera ili štampariju koji su radili logo za originalni fajl: SVG, PDF, AI ili EPS. Vektorski fajl često postoji kod onoga ko je logo štampao na tabli, nalepnici ili vozilu.

Ako originala nema, jednostavan znak, na primer slovo ili geometrijski oblik u dve boje, može automatski da se pretvori u vektor, uz ručno doterivanje. Logo sa senkama, prelazima boja i sitnim tekstom automatsko pretvaranje obično pokvari, pa ga treba ponovo nacrtati.

Šta još pripremiti za sajt, osim logoa, piše u vodiču Šta je potrebno za izradu sajta. Ako pravite sajt, pošaljite upit i uz njega logo u formatu koji imate. Kako logo ulazi u ceo posao, opisano je na strani Proces dizajna sajta.

Česta pitanja