Problemi sa favicon-om

Šta je favicon?

Favicon je ikonica koja se prikazuje u otvorenom tabu neke stranice, odmah pored naslova (definisan unutar title tag) te strane.

Kao što možeš da vidiš na slici iznad, ova mala ikonica može da pravi probleme, kada je ne dodaš ili dodaš ili promeniš i to iz nekoliko razloga:

• wordpress default ikonica
• pogrešan format
• browser keširanje
• pravilan prikaz na svim uređajima – manifest.json
• google keširanje

Iako ovo sve pobrojano može delovati razumljivo iz ugla nekoga ko se već susretao sa ovim problemom, ali iz ugla nekog ko prvi put nailazi na ovaj problem – deluje nepremostivo, jer je pipavo i ima dosta skrivenih stvari o kojima ni iskusni programeri i SEO eksperti ne razmišljaju na prvu, jer radi na njihovom kompjuteru, a problem je daleko dublji, a iskreno ne znam zašto se sve to tako zakomplikovalo.

Hajde da prođemo prvo kroz ove pobrojane stavke da znamo sa čim se susrećemo …

WordPress default ikonica

Koji god CMS (Content Management System) da imate, ako prati neke SEO trendove, taj CMS će na neki način pokriti šta se dešava ako neko potraži favicon.ico putanju na vašem sajtu(npr. https://sajt.rs/favicon.ico), a da ne dobije 404 odgovor, odnosno da nije pronađen taj resurs.

Pa dobro, ko to još traži favicon.ico na mom sajtu?!? Browser-i (firefox, chrome …) na prvom mestu, nezavisno od html tagova koji mogu uputiti na ostale resurse za bolji prikaz favicon-a, a takođe i bitnije search engine-i(Google, Bing … ), preko svojih crawler-a (programi koji indeksiraju web strane). Ako niste stavili favicon.ico, a npr ste definisali tagove za prikaz favicon-a na svim uređajima npr spisak ispod:

<link rel="apple-touch-icon" sizes="180x180" href="//gsmsolutions.co.rs/wp-content/themes/gsm-solutions/FE/images/favicon/v4/apple-touch-icon.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="//gsmsolutions.co.rs/wp-content/themes/gsm-solutions/FE/images/favicon/v4/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="//gsmsolutions.co.rs/wp-content/themes/gsm-solutions/FE/images/favicon/v4/favicon-16x16.png"/>
<link rel="manifest" href="//gsmsolutions.co.rs/wp-content/themes/gsm-solutions/FE/images/favicon/v4/manifest.json" crossorigin="use-credentials"/>
<link rel="mask-icon" href="//gsmsolutions.co.rs/wp-content/themes/gsm-solutions/FE/images/favicon/v4/safari-pinned-tab.svg" color="#ff4700"/>
<link rel="shortcut icon" href="//gsmsolutions.co.rs/favicon.ico"/>
<meta name="msapplication-TileColor" content="#ffffff"/>
<meta name="msapplication-config" content="//gsmsolutions.co.rs/wp-content/themes/gsm-solutions/FE/images/favicon/v4/browserconfig.xml"/>
<meta name="theme-color" content="#ff4700"/>

sve je džabe, u SERP-ovima(search engine ranking position) će se prikazivati default wordpress ikonica (naravno za sajtove koji su na najpopularnijem CMSu – wordpress-u) – w-logo-blue-white-bg.png, koja je zapravo 302(privremena) redirekcija koju je wordpress stavio jer zna da će neko tražiti favicon.ico, a sve je bolje nego 404, pa što da ne stavi svoj logo, ali to za posledicu ima ovo:

Da, zaboravio sam da dodam favicon.ico, iako sam sve ostalo uradio kako treba i sad čekam da google osveži rezultate – pa otud i inspiracija za ovaj post, da i vi ne zaboravite …

Osim favicon.ico, postoji i apple-touch-icon.png slika dimenzija 180×180 piksela, koju koriste apple uređaji.

Zaključak: referencirali ih preko html tagova ili ne, u root-u sajta, trebalo bi da kreirate 2 default slike:

• jednu u ico formatu – favicon.ico (64×64 px)
• i drugu u png formatu – apple-touch-icon.png dimenzija 180x180px
• i na sve to dodate ostale dimenzije koje ćete referencirati koristeći adekvatne tagove i pozinioirati ih u head sekciju vaše html strane
• i na sve to dodati browserconfig.xml i manifest.json, a primere istih možete pogledati na ovom sajtu (pogledaj source ove strane – head sekcija)

Pogrešan format

Fajl favicon.ico je nešto što je zakucano, zakucano ime fajla, a zakucana i ekstenzija – ico format. Ekstenzija ico je skraćeno od ikonica i trebalo bi da bude kvadratna, npr 64×64 piksela, veća od 16×16, a od nje će google napraviti 16×16 pa će to prikazivati, i dovoljno je samo da je spustite u root sajta, ne morate nigde u HTML kodu da je referencirate.

Browser keširanje

Kada promeniš ikonicu, potrebno je da temeljno očistiš keš svog browser-a da bi video izmenu ili da posmatraš stranu u private/incognito tabu, u suprotnom ćeš još neko vreme gledati staru ikonicu.

Pravilan prikaz

Kao što sam naveo iznad i set tagova koji pomažu u prikazu favicon-a vašeg sajta ako ga bookmark-ujete, ako ga postavite kao link na desktopu vašeg uređaja, na različitim operativnim sistemima ili nešto slično. Takođe, osim ikonice, možete definisati i pozadinsku boju ikonice (van slike), pozadinsku boju chrome browser-a na mobilnim uređajima itd, kao i namenu vaše aplikacije – preko manifest.json fajla i browserconfig.xml fajla.

Primere popunjenih fajlova možete pogledati tako što ćete u source-u ove strane pronaći reference(urlove) ka ova 2 fajla i onda ih  pogledajte u browseru, ili ako vas sve ovo mrzi – koristite neke online alate koji vam mogu pomoći npr za generisanje favicona – https://realfavicongenerator.net ili za testiranje već dodatih ikonica kroz oči različitih uređaja – https://realfavicongenerator.net/favicon_checker. Samo imaj na umu, da nijedan online alat nije savršen, verovatno ćeš morati samostalno da koriguješ ono što ti daju, a kao referencu koristi ovaj sajt.

Niko vas ne sprečava da možete da budete i kreativniji, iako ste i dalje osuđeni na kvadrat, iako ste osuđeni na raster naspram vektora, možete npr koristiti prednosti nekih poznatih grafičkih formata:

• gif (u slučaju da želite animirani favicon)
• png (u slučaju da želite alfa kanal – odnosno transparenciju)
• ili standarno – jpg

ali si svejedno osuđen na kvadrat relativno malih dimenzija.

Google keširanje

Sve izmeniš u uradiš kako treba, ali džabe, moraš da čekaš da Google ili Bing ili šta već vidi da je došlo do izmene i da izmenu primeni na svim stranama tvog sajta.

Da li je moglo to jednostavnije?

Ne znam šta je pošlo po zlu, sve je počelo od favicon.ico fajla, ali je otišlo predaleko. Svaka i mala greškica ugrožava izgled tvog sajta ili aplikacije ako je potrebna da se pokaže na nekom specifičnom ne desktop uređaju u nekoj varijanti. Uglavnom developer-i ni nisu svesni koliko vremena i pažnje treba da posvete jednoj naime malecnoj sličici 16×16 piksela, koja se sasvim lepo vidi pored naslov na njihovom kompjuteru, a uglavnom ni ne znaju do kojih detalja moraju da idu da to sve radi kako treba svuda.

Lično smatram da je to moglo da bude daleko jednostavnije, a mislim da će se tek komplikovati sa novim uređajima koji još ni ne postoje. Videćemo. Srećno sa favicon-om.