Aseta "apple-touch-icon.png" mukauttaaksesi verkkosivustojen iPhonen kirjanmerkin suosikkikuvaketta

Sisällysluettelo:

Anonim

Jos sinulla on oma verkkosivusto tai olet kehittämässä sitä jollekin toiselle, sinun tulee mukauttaa tallennettua kirjanmerkkikuvaketta, joka näkyy käyttäjien iOS-aloitusnäytössä. Yllä olevassa kuvakaappauksessa näet mukautetun OSXDaily-faviconin iPhonen näytöllä.

Apple Touch -kuvakkeen asettaminen on hyvä idea, koska oletusarvoisesti iOS tallentaa vain pienen pikkukuvan sivustosta. Pieniä pikkukuvia on usein vaikea tunnistaa, eivätkä ne yleensä näytä niin upeilta, joten määritetään sen sijaan oma suosikkikuvasi.

Apple Touch -kuvakkeen mukauttaminen ja asettaminen verkkosivustolle

  • Luo kuvake ja varmista, että se on neliö. OSXDaily.com-sivustolla olevan kuvakkeen koko on 512 × 512 pikseliä, mutta voit valita muita neliön kokoja, jos todella haluat – huomaa, että suurempi sopii verkkokalvon näytöt
  • Tallenna aloitusnäytön kuvake PNG-tiedostona ja merkitse se: apple-touch-icon.png
  • Pudota apple-touch-icon.png verkkopalvelimen juurihakemistoon, jotta voit käyttää sitä osoitteessa domain.com/apple-touch-icon.png
  • Testaa verkkosivustosi aloitusnäytön kirjanmerkkikuvaketta käymällä sivustolla iOS:n Safarista ja napauttamalla sitten "Lisää aloitusnäyttöön"
  • Katso iOS-laitteen aloitusnäyttöä, niin näet siihen tallennetun kirjanmerkin uudella mukautetulla kuvakkeellasi, kuten yllä oleva kuvakaappaus

Niin kauan kuin tiedosto on nimetty oikein ja se on verkkopalvelimen juurihakemistossa, Mobile Safari tietää, mitä sille tehdään, joten iOS-kohtaisen faviconin näyttämiseen ei tarvita lisäsäätöjä.

Tässä on mukautettu apple-touch-icon.png-kuvamme, jota käytämme OSXDaily.com-sivustolle. Tämä esimerkkikirjanmerkkikuvake on luotu ja mitoitettu verkkokalvon näytöille sopivaksi ():

Huomaat, että varsinaisessa kuvaketiedostossa ei ole valon taittumista tallennettuna kuvakkeeseen, iOS hoitaa tämän itse. Voit käyttää mitä tahansa haluamaasi kuvaa, mutta suosittelen sellaisen luomista, joka tallentaa olemassa olevien iOS-kuvakkeiden tutun käyttöliittymän.

Tämä ei tietenkään ole sama asia kuin erillisen iOS-sovelluksen käyttäminen, mutta kunnollinen mobiilikäyttökokemus verkosta on hyvä idea ja välttää iOS-sovelluksen kehittämisen korkean hinnan.

Ja hei, jos olet huolissasi tällaisista asioista, käytät todennäköisesti Photoshopia ainakin kuvakkeiden suunnitteluun? Joten tutustu siihen samalla kun olet siinä.

Aseta "apple-touch-icon.png" mukauttaaksesi verkkosivustojen iPhonen kirjanmerkin suosikkikuvaketta