---
title: "Ce este si cum adaugam un favicon in websitul nostru?"
description: "Favorite icon-ul (sau favicon-ul) este o imagine mica, de minim 16x16 pixeli folosita in browsere pentru a arata o reprezentare grafica a unui website in bara de adrese. Acest favicon are de obicei..."
url: https://blogdeit.ro/ce-este-si-cum-adaugam-un-favicon-in-websitul-nostru
date: 2017-12-10
modified: 2017-12-10
author: "Radu Popescu"
image: https://blogdeit.ro/wp-content/uploads/2018/11/vdi-default-featured-work.png
categories: ["Tutorial", "Web-design"]
tags: ["convert", "favicon", "html", "icon", "png", "site icon", "touch icons", "tutorial"]
type: post
lang: en
---

# Ce este si cum adaugam un favicon in websitul nostru?

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 (http://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”>