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, HTML9 e CSS3, o favicon também pode ser um fisier .png ou .jpg. Conditia este ca in header-ul site-ului, antes </cabeça>, a linha deve estar presente:
<link rel =”ícone de atalho” href=”/images/favicon.ico” tipo =”imagem/ícone x” />
Ícone do site para iOS – iPhone, iPad e iPod Touch
Em iOS podemos adicionar atalhos de páginas da web pe Tela inicial-uliPhone, iPad e iPodTouch.
Como adicionar um atalho de site na tela inicial do iPhone, iPad e iPod
Fazemos isso abrindo uma página web no iPhone (navegador de internet Safari, Chrome, etc.), pressionando o quadrado com a seta (o sinal para “compartilhar” no iOS), então a opção “Adicionar à tela inicial“.
Se o site tiver um favicon definido para o navegador, mas não estiver definido o ícone específico para dispositivos iOS, um ícone composto por um aparecerá na tela imagine visualização da página web.
Como adicionar ícones da web para iPhone, iPad e Android.
O primeiro passo écreem o imagine pentru iconita, care sa apara pe Tela inicial-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
Maçã actualizeaza regulat dimensiunile recomandate pentru iconURLs aplicações e 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 </cabeça>, 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=”ícone” sizes=”192×192″ /> <link href=”/icon-normal.png” rel=”ícone” 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” e “icon-normal.png” cu rel=”ícone”.
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.
