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 和 CSS3, favicon poate fi si un fisier .png 或者 .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
在 ios putem adauga shortcut-urile paginilor web PE Home Screen-uliPhone，，，， iPad 和 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 sacreem 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
苹果 actualizeaza regulat dimensiunile recomandate pentru icon-urile aplicatiilor 和 网页 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“和”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。
