Nastavite »apple-touch-icon.png« za prilagajanje spletnih mest iPhone Bookmark FavIcon

Kazalo:

Anonim

Če imate lastno spletno stran ali jo razvijate za nekoga drugega, morate prilagoditi ikono shranjenega zaznamka, ki se prikaže na začetnem zaslonu uporabnikov iOS. Na zgornjem posnetku zaslona boste videli priljubljeno ikono OSXDaily po meri na zaslonu iPhona.

Nastavitev ikone Apple Touch je dobra ideja, ker iOS privzeto shrani le majhno sličico mesta. Majhne sličice je pogosto težko prepoznati in na splošno niso videti tako dobro, zato raje nastavimo svojo sliko ikone priljubljenih.

Kako prilagoditi in nastaviti ikono Apple Touch za spletno mesto

  • Ustvarite ikono, poskrbite, da bo kvadratna, tista tukaj na OSXDaily.com ima 512 × 512 slikovnih pik, vendar lahko izberete druge kvadratne velikosti, če res želite – upoštevajte, da je večja primerna za zasloni mrežnice
  • Shranite ikono začetnega zaslona kot datoteko PNG in jo označite: apple-touch-icon.png
  • Spustite apple-touch-icon.png v imenik korenskega spletnega strežnika, da bo dostopen na domeni.com/apple-touch-icon.png
  • Preizkusite ikono zaznamka na domačem zaslonu svojih spletnih mest, tako da obiščete spletno mesto iz brskalnika Safari v sistemu iOS in nato tapnete »Dodaj na začetni zaslon«
  • Poglejte začetni zaslon naprave iOS in tam boste videli shranjen zaznamek z vašo novo ikono po meri, kot je zgornji posnetek zaslona

Dokler je datoteka pravilno poimenovana in v korenskem imeniku spletnega strežnika, bo Mobile Safari vedel, kaj storiti z njo, tako da ni potrebe po nadaljnjih prilagoditvah, da se prikaže ikona, specifična za iOS.

Za referenco je tukaj naša slika po meri 'apple-touch-icon.png', ki jo uporabljamo za OSXDaily.com, ta primer ikone zaznamka je ustvarjen in ima ustrezno velikost za zaslone mrežnice ():

Opazili boste, da dejanska datoteka ikone nima loma svetlobe shranjenega na ikoni, iOS to uredi sam. Uporabite lahko katero koli sliko, vendar vam priporočam, da ustvarite takšno, ki zajema znani uporabniški vmesnik obstoječih ikon iOS.

To očitno ni isto kot imeti namensko aplikacijo za iOS, vendar je spodobna mobilna uporabniška izkušnja iz spleta dobra ideja in se izogne ​​temu, kar bi lahko bila visoka cena razvoja aplikacije za iOS.

In hej, če vas skrbijo takšne stvari, verjetno uporabljate Photoshop vsaj za oblikovanje ikon, kajne? Zato si oglejte nekaj, ko ste že pri tem.

Nastavite »apple-touch-icon.png« za prilagajanje spletnih mest iPhone Bookmark FavIcon