Kā izveidot & Iestatīt vietnei tīklenei gatavu iOS grāmatzīmes ikonu

Satura rādītājs:

Anonim

Tīmekļa izstrādātāji un vietņu īpašnieki pievērš uzmanību: jums ir jāiestata tīklenei piemērota iOS grāmatzīmes ikona. Grāmatzīmju ikonas tiek sauktas par Apple Touch Icon, un šie pielāgotie attēli kļūst par ikonu, kas tiek rādīta lietotāja sākuma ekrānā, kad viņi iPad pievieno grāmatzīmi vietnei. iPhone vai iPod touch operētājsistēmā iOS, vai Safari grāmatzīmju panelī operētājsistēmai OS X.Bez pielāgotas apple-touch-ikonu failu kopas lietotāji iegūs garlaicīgu un bieži vien neglītu pašas tīmekļa lapas sīktēlu, un, neizmantojot tīklenei gatavu ikonu, grāmatzīmju ikona jaunajā iPad ekrānā izskatīsies pikseļaina un kopumā šausmīga.

Lūk, kas jums jādara, lai izveidotu tīklenes perfektu Apple Touch Icon jebkurai vietnei, veicot dažas vienkāršas darbības.

1) Izveidojiet Retina-Ready iOS vietnes ikonu

Izmantojiet veidni vai izstrādājiet savu. Es izmantoju iepriekšējā ierakstā minēto vienkāršo DIY tīklenes ikonu komplektu — tas ir PSD fails, kas padara glītu iOS ikonu noformēšanu tikpat vienkāršu, kā ar vienu vai diviem klikšķiem. Ielīmējiet tīmekļa vietnes vai uzņēmuma logotipu, un jūs varat sākt. Ja jums nav ko rediģēt PSD failus, Photoshop CS6 beta versija ir lieliska, un to var bez maksas lejupielādēt un izmantot, līdz gada beigās iznāks galīgā versija.

2) Saglabāt kā PNG un nosauciet Retina vietnes grāmatzīmes ikonu

Ikonai ir jābūt PNG formātā, un tai ir jābūt nosauktai par vienu no divām lietām. Katrs faila nosaukums piedāvā nedaudz atšķirīgu ikonas izskatu, kā tas tiek parādīts lietotāja sākuma ekrānā:

  • apple-touch-icon.png” ikonai pievienos izceltā burbuļa pārklājumu
  • apple-touch-icon-precomposed.png” parādīs ikonu, kā sākotnēji tika izveidota, bez izcēluma pārklājuma

Izmantojiet pēdējo iepriekš sastādīto opciju, ja izveidojāt savu izcēlumu vai vēlaties, lai ikona izskatītos plakana bez visuresoša burbuļa, kas parādās lielākajā daļā Apple noklusējuma ikonu.

3) Augšupielādējiet vietnes grāmatzīmes pieskāriena ikonu pamata tīmekļa direktorijā

Izmantojiet SFTP klientu (OS X Finder ietver FTP, un CyberDuck vai Filezilla ir bezmaksas), lai kopētu failu apple-touch-icon.png saknes tīmekļa direktorijā. Parasti šī ir tā pati vieta, kur atrodas vietņu galvenā rādītāja fails. Kad tas ir augšupielādēts, pārbaudiet, vai tas atrodas pareizajā vietā, atverot tīmekļa pārlūkprogrammu un atverot vietni “http://SITEURL.com/apple-touch-icon.png” un pārliecinoties, ka tā tiek ielādēta.

Šeit ir 512 × 512 tīklenei gatavās grāmatzīmes ikonas piemērs vietnē OSXDaily.com:

Ņemiet vērā, ka bez iepriekš izveidotā karoga iepriekš redzamajā ikonā tiks parādīts izcelšanas burbulis. Varat redzēt atšķirību starp abām, salīdzinot faktisko ikonu ar ikonu, kas ekrānuzņēmumos parādīta kā grāmatzīme.

4) Izmantojiet iOS ierīci un atzīmējiet vietni grāmatzīmēs

Šī ir vienkāršākā daļa, paņemiet iOS ierīci (vēlams iPad 3, lai apstiprinātu tīklenes aspektu) un atveriet Safari.Atsvaidziniet vietni, kurā augšupielādējāt ikonu, un pēc tam pieskarieties bultiņas ikonai un atlasiet “Pievienot sākuma ekrānam”, piešķiriet grāmatzīmei nosaukumu, pēc tam atgriezieties sākuma ekrānā, lai apstiprinātu, ka tā ir tur.

Lai gan tīklenes ikona ir 512 x 512 pikseļi, vecākos iPhone tālruņos un ierīcēs, kas nav tīklenes, tīklenes ikona tiks samazināta. Ja ļoti vēlaties, varat izmantot CSS un HTML, lai dažādās ierīcēs parādītu dažāda izmēra ikonas, taču tas tiešām nav nepieciešams.

Tagad, ja kāds pievienos jūsu vietni grāmatzīmēm iPad ierīcē ar tīklenes displeju, tā izskatīsies daudz labāk sākuma ekrānā. Tas tiešām ir viss. Un jā, mēs jau esam rakstījuši par Apple skārienjūtīgo ikonu, taču tagad tā ir pelnījusi vēl vienu pieminēšanu, jo iPad 3 pieprasa ievērojami augstākas izšķirtspējas ikonas un grafiku.

Kā izveidot & Iestatīt vietnei tīklenei gatavu iOS grāmatzīmes ikonu