Apple Touch Icon pentru site-ul, chat-ul sau blogul tău

*

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)
*

Etichete:, ,

Dă-ți cu părerea

Adresa ta de email nu va fi publicată.