Ce este si cum adaugam un favicon in websitul nostru?

by radu popescu

decembrie 10, 2017

1992

Favorite icon-ul (sau favicon-ul) este o imagine mica, de minim 16×16 pixeli folosita in browsere pentru a arata o reprezentare grafica a unui website in bara de adrese. Acest favicon are de obicei extensia ICO si aici avem un tool util care ne poate ajuta www.convertico.com.

Care este utilitatea unui favicon?

Reprezinta brandul tau
Ajuta la gasirea websitului mai usor intr-o lista mare de taburi deschise
Ajuta la gasirea websitului in lista de bookmarks

Cum se adauga un favicon intr-o pagina HTML

<link rel=”shortcut icon” type=”image/x-icon” href=”http://yourwebsite.com/favicon.ico”>

Acesta este codul de baza pe care il adaugam cand dorim sa afisam un favicon general. Pentru alte device-uri ar trebui sa adaugam si urmatoarele icoane / cod HTML:

32×32: taskbar shortcut icon
96×96: desktop shortcut icon (and Google TV)

<link rel=”icon” type=”image/x-icon” href=”https://cdn.yourwebsite.com/favicon-32×32.ico” sizes=”32×32″>
<link rel=”icon” type=”image/x-icon” href=”https://cdn.yourwebsite.com/favicon-96×96.ico” sizes=”96×96″>

Apple Touch Icons

iOS are un feature numit “Add to Home Screen” care adauga pe desktop-ul telefonului/tabletei icon-ul website-ului ca o scurtatura. Daca doresti sa ai si aceasta functionalitate poti sa folosesti cod-ul de mai jos.

120×120: iPhone Retina (iOS 7)
180×180: iPhone 6 Plus (iOS 8+)
152×152: iPad Retina (iOS 7)
167×167: iPad Pro (iOS 8+)

<link rel=”apple-touch-icon” href=”older-iPhone.png”>
<link rel=”apple-touch-icon” sizes=”180×180″ href=”iPhone-6-Plus.png”>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”iPad-Retina.png”>
<link rel=”apple-touch-icon” sizes=”167×167″ href=”iPad-Pro.png”>