Favicon.ico – Website Icon in Browser
Inainte sa fie lansat un website, i se adauga un fisier grafic, favicon, care sa apara in browser, la bara de adresa. In majoritatea situatiilor, faviconul este o miniatura a logo-ului grafic sau initialele website-ului respectiv. Acest favicon este adaugat pentru a ajuta utilizatorii la identificarea mai rapida a unei adrese web in bookmarks.
Pana nu demult, acest fisier trebuia sa fie de forma forma “favicon.ico“, pentru a fi identificat de web browser. Chrome, Internet Explorer, Opera, Safari, Firefox, etc.
De cativa ani, odata cu avansarea noilor limbaje web, HTML5 si CSS3, favicon poate fi si un fisier .png sau .jpg. Conditia este ca in header-ul site-ului, inainte de </head>, sa fie prezenta linia:
<link rel=”shortcut icon” href=”/images/favicon.ico” type=”image/x-icon” />
Website Icon pentru iOS – iPhone, iPad si iPod Touch
In iOS putem adauga shortcut-urile paginilor web pe Home Screen-ul iPhone, iPad si iPod Touch.
Cum adaugam shortcut-ul unui website pe iPhone, iPad si iPod Home Screen
Facem acest lucru deschizand o pagina web de pe iPhone (Safari, Chrome, etc internet browser), apasam pe patratul cu sageata (semnul pentru “share” in iOS), apoi optiunea “Add to Home Screen“.
Daca website-ul are setat favicon pentru browser, dar nu este setata iconita specifica device-urilor iOS, pe screen o sa apara o iconita formata dintr-o imagine preview a paginii web.
Cum adaugam web icons pentru iPhone, iPad si Android.
Primul pas este sa creem o imagine pentru iconita, care sa apara pe Home Screen-ul idevice-ului. Pentru ca web iconul sa fie compatibila pe toate device-urile si sa se vada clar, trebuie sa creem imaginea pentru toate rezolutiile de iPhone si iPad.
Rezolutiile si marimile standard ale iconurilor pentru iPhone, iPad, iPod si Android
- Modelele clasice de iPhone / iPod = 57×57
- iPad = 76×76
- iPhone / iPod Retina = 120×120
- iPad Retina = 152×152
- iPhone 6/6S Plus = 180×180
Apple actualizeaza regulat dimensiunile recomandate pentru icon-urile aplicatiilor si paginilor web pe acesta pagina.
Pentru device-urile Android, icon-urile sunt de doua dimensiuni:
- Android clasic = 128×128
- Android cu rezolutie mare (hi-res) = 192×192
Dupa ce avem facute imaginile, se urca pe web server, iar in sursa HTML a website-ului, inainte de inchiderea </head>, se adauga liniile urmatoare:
<link href=”/apple-touch-icon.png” rel=”apple-touch-icon” /> <link href=”/apple-touch-icon-76×76.png” rel=”apple-touch-icon” sizes=”76×76″ /> <link href=”/apple-touch-icon-120×120.png” rel=”apple-touch-icon” sizes=”120×120″ /> <link href=”/apple-touch-icon-152×152.png” rel=”apple-touch-icon” sizes=”152×152″ /> <link href=”/apple-touch-icon-180×180.png” rel=”apple-touch-icon” sizes=”180×180″ /> <link href=”/icon-hires.png” rel=”icon” sizes=”192×192″ /> <link href=”/icon-normal.png” rel=”icon” sizes=”128×128″ />
Pentru device-urile Apple, numele imaginii .PNG si “rel=” trebuie sa contina prefixul “apple-“. Pentru Android, numele fisierelor va fi “icon-hires.png” si “icon-normal.png” cu rel=”icon”.
Nu este absolut necesar sa creati imagini pentru fiecare rezolutie in parte. Puteti face o imagine pentru cea mai inalta rezolutie, iar device-urile cu rezolutie mai mica, o vor identifica si o vor seta ca icon.
Iconul shortcut-ului catre website va arata asemanator cu cel al oricarei aplicatii pentru iOS.
