Ce este si cum adaugam un favicon in websitul nostru?

by radu popescu

decembrie 10, 2017

2168

• convert
• favicon
• html
• icon
• png
• site icon
• touch icons
• tutorial

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

• convert
• favicon
• html
• icon
• png
• site icon
• touch icons
• tutorial

radu popescu

Web Guy, traveler, dog lover, living the dream :)