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

 

Leave a Reply

Your email address will not be published. Required fields are marked *