Apple Touch-táknið tilgreinir sérstaklega myndina sem er notuð þegar gestur bætir vefnum þínum við heimaskjá iPhone. Það er aðskilið frá táknmynd vafraflipans og táknum í birtingarskrá vefforritsins.
Aðeins ein stærð: 180×180
180×180 pixlar er algeng stærð fyrir upprunamynd í hárri upplausn. iOS getur minnkað þá mynd þegar minna pláss er til staðar, svo flest verkefni geta látið eina tilvísun duga.
Eldri ráðleggingar töldu upp átta skrár, frá 57×57 til 152×152, hverja með eigin sizes-eigind. Þessi afbrigði þjóna ekki lengur tilgangi: þau þenja út HTML og valda aukabeiðnum fyrir sömu útkomu.
Skráin verður að vera PNG. iOS les hvorki SVG né WebP fyrir þetta tákn og JPEG spillir skörpum jöðrum einfaldrar grafíkur.
Veldu helst ógegnsæjan bakgrunn
Gegnsær bakgrunnur getur gefið óvænta útkomu eftir útgáfu og birtingaraðstæðum. Til að stjórna útlitinu á heimaskjánum skaltu setja myndina á ógegnsæjan bakgrunn sem þú velur sjálf eða sjálfur.
Lausnin er að sameina táknið og ógegnsæjan bakgrunn áður en það er flutt út. Veldu vörumerkjalit eða einfaldlega hvítt ef táknið er litríkt og hafðu um 10% svigrúm utan um myndina svo hún fái að njóta sín.
Ekki rúnna þó hornin sjálf: iOS leggur eigin grímu með ávölum hornum yfir myndina. Ef hornin eru þegar ávöl verður tvöfaldur radíus með ljótum hornum.
Tagið sem þú límir inn
Ein lína í head á síðunum nægir: link rel="apple-touch-icon" href="/apple-touch-icon.png". sizes-eigindin er valfrjáls þegar aðeins ein skrá er notuð.
Þú getur einnig bætt við meta name="apple-mobile-web-app-title" content="Your brand" til að stjórna heitinu undir tákninu. Án þess tags notar iOS síðuheitið, sem er oft of langt og er þá stytt.
Settu líka afrit í rótina sem apple-touch-icon.png: líkt og með favicon.ico leitar iOS að því á þeirri slóð þegar ekkert tag finnst.
Af hverju táknið neitar að uppfærast
iOS geymir táknið fast í skyndiminni og flýtileið sem þegar er á heimaskjánum breytist aldrei sjálfkrafa. Til að prófa nýja útgáfu skaltu eyða flýtileiðinni, hreinsa gögn Safari og bæta síðan vefnum aftur við.
Ef táknið vantar enn skaltu athuga þrennt: að skráin svari með 200 en ekki 404, að hún sé afhent með efnisgerðinni image/png og að robots.txt eða auðkenning loki ekki á hana.
LFFavicon-prófunin athugar einmitt þessi atriði á hvaða opinberu vefslóð sem er og sýnir táknið sem hún sótti í raun.
Frumheimildir
Algengar spurningar
Þarf nokkrar stærðir af apple-touch-icon?
Í flestum verkefnum leyfir ein 180×180-skrá í hárri upplausn iOS að búa til minni útgáfur. Prófaðu þau tæki sem stuðningsáætlunin þín nær yfir.
Notar Android apple-touch-icon?
Chrome í Android getur notað það til vara en les fyrst tákn vefbirtingarskrárinnar. Tilgreindu alltaf 192×192- og 512×512-táknin í birtingarskránni; það er opinbera leiðin.
Má nota SVG sem Apple Touch-tákn?
Nei, iOS gerir ráð fyrir PNG-punktamynd fyrir þetta tag. Notaðu SVG fyrir táknmynd í tölvuvöfrum, þar sem það gefur skarpar línur og stuðning við dökka stillingu.