Favicon je okrajšava za »najljubšo ikono«, v spletnem jeziku pa slednja predstavlja ikono spletnega mesta, ki jo srečamo na zavihkih brskalnikov ali namizjih naprav.
Zgodovinsko gledano je Favicon oz. ikona spletnega mesta majhna slikica v velikosti 16 x 16px in .ico formatu. Prikazuje se lahko na različnih mestih, v brskalniku, kot zavihek, naslovna vrstica, zaznamek, ekranu različnih naprav, … Uporabniki lahko tako hitro prepoznajo naše spletno mesto in ga lažje najdejo.
Kreiranje favicon je relativno preprost proces, ampak precej pomemben s strani marketinga oz. uporabniške izkušnje. Skozi leta se je tudi ta del veliko bolj nadgradil in danes nimamo le ene ikone ampak več le teh in še nekaj dodatnih parametrov. Razlog zato tiči v tem, da se naprave za brskanje po spletu spreminjajo in danes to ni več samo računalnik, ampak tudi druge naprave. Tako imamo Android naprave, iOS naprave,brskalnike: Edge, Chrome, … posledično potrebno več priprav/ikon. Rek ena velikost za vse tukaj definitivno ne drži.
Zadnje način implementacije favicone na spletno mesto
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Kot vidimo se je star koncept ene ikone 16 x 16px precej spremenil. Sedaj imamo poleg male ikone še veliko dodatnih, zadnje smernice dodajo še 3 dodatne ikone in webmanifest. Še kako leto nazaj smo imeli tudi po 5, 6 različnih ikon. Zaradi tega je najbolje uporabiti orodje, kot so spletni generatorji, ki sledijo zadnjim smernicam in postopkom pri kreiranju. Sam največkrat uporabim https://realfavicongenerator.net.
Vektorska ikona favicon.svg
Vektorske ikone za favicon so zadnje večje novosti na tem področju. Glavna prednost vektorskih formatov je, da ne izgubljajo kvalitete, lahko so majhni ali gromozanski, kvaliteta slike bo enaka. V praksi to pomeni, da slika/ikona ni zrnasta.
Nova oblika se zapiše:
<link rel="icon" href="favicon.svg">Posledično je nov način prinesel optimizacijo ikon, saj jih je sedaj manj kot včasih, ker vektorska ikona pokrije več velikosti.
