Celovito dodajanje ikon (Favicon) na spletno stran

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.

Standardne mere ikon

1. 16x16: Za starejše brskalnike in zelo majhne zavihke.
2. 32x32: Standard za večino današnjih namiznih brskalnikov.
3. 192x192: Za Android naprave in prikaz na namizju telefona (PWA).
4. 180x180: Posebna mera za Apple naprave (iPhone, iPad).

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.