Ikona spletnega mesta (Favicon) je tista majhna sličica, ki vašo stran loči od drugih v zavihkih brskalnika in na zaslonih pametnih telefonov. Za najboljši rezultat moramo pripraviti nekaj različnih dimenzij.
1. Standardne mere ikon
- 16x16: Za starejše brskalnike in zelo majhne zavihke.
- 32x32: Standard za večino današnjih namiznih brskalnikov.
- 192x192: Za Android naprave in prikaz na namizju telefona (PWA).
- 180x180: Posebna mera za Apple naprave (iPhone, iPad).
2. HTML koda za vse naprave
Vse spodnje vrstice skopirajte v glavo vaše strani med <head> in </head>.
<!-- Osnovna ikona za zavihke -->
<link rel="icon" type="image/png" sizes="32x32" href="ikona-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="ikona-16.png">
<!-- Ikona za Android (Chrome) -->
<link rel="icon" type="image/png" sizes="192x192" href="ikona-192.png">
<!-- Ikona za Apple naprave (iPhone, iPad) -->
<link rel="apple-touch-icon" href="ikona-180.png">Zakaj Apple potrebuje svojo vrstico?
Apple naprave ne uporabljajo standardnega ukaza rel="icon", temveč iščejo rel="apple-touch-icon". Če te vrstice ni, bo iPhone ob shranjevanju strani na namizje namesto ikone prikazal le pomanjšano sliko celotne spletne strani.