Când navighează pe internet folosind un dispozitiv mobil Apple, utilizatorii au opțiunea de a salva pagini web direct pe ecranul de „acasă”. Când este salvată o pagină web, o pictogramă este generată iar utilizatorii o pot folosi pentru a accesa pagina menționată fără a fi nevoie de lansarea browser-ului pentru introducerea adresei. În esență, utilizatorii au posibilitatea de a crea un marcaj direct pe ecranul de start.
Această funcţie o au şi cele mai multe dintre browserele pentru Android.
Din păcate, în mod implicit, iOS-ul va folosi o captură de ecran a paginii atunci când se creează o pictogramă pe ecranul de start, captură care va arăta hidos și va fi ilizibilă. Din fericire însă, proprietarii de site-uri au capacitatea de a schimba acest lucru prin desemnarea unui icon grafic, numit Apple Touch Icon, care urmează să fie utilizat în locul screenshot-ului implicit. 😉
Ce trebuie să faci
Creează o imagine pătrată în format png ce reprezintă site-ul tău. Poate semăna cu faviconul pe care îl foloseşti, doar că trebuie să fie ceva mai mare. 129 × 129 de pixeli este dimensiunea ideală pentru iPad-uri. Cred că 160 × 160 de pixeli e suficient, cu condiţia ca dimensiunea imaginii să nu aibă prea mulţi kilobaiţi. 😀
Încarcă imaginea în public_html cu denumirea apple-touch-icon.png. Imaginea de pe calculator redenumeşte-o în apple-touch-icon-precomposed.png şi mai uploadeaz-o o dată în public_html. După aceasta, vei putea găsi în folderul public_html cele două imagini identice: apple-touch-icon.png şi apple-touch-icon-precomposed.png.
Dacă aveţi Android, va fi folosită imaginea încărcată de voi atunci când salvaţi pagina la „Speed Dial”. Doar două exemple de browsere pentru Android ce folosesc Apple Touch Icon: Opera Mini, Dolphin.
Pe Android am rezolvat. Pe iOS încă nu. Mai este necesară introducerea unui cod între <head> şi </head>, şi anume:
[html]<link rel="apple-touch-icon" href="/apple-touch-icon.png" />[/html]
Iconiţa va fi afişată cu un efect de luciu și colţuri rotunjite. Dacă nu vreţi ca iconiţa să fie glossy, utilizaţi varianta „precompusă”:
[html]<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />[/html]
(documentaţie)
Lasă un răspuns