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”>