Икона Apple Touch изричито задаје слику која се користи када посетилац дода ваш сајт на почетни екран iPhone уређаја. Одвојена је од фавикона картице прегледача и икона наведених у манифесту веб апликације.
Само једна величина: 180×180
180×180 пиксела често се користи као извор високе резолуције. iOS може да смањи ту слику за мање приказе, па већина пројеката може да задржи једну декларацију.
Старије препоруке набрајале су осам датотека, од 57×57 до 152×152, сваку са сопственим атрибутом sizes. Те варијанте више немају сврху: увећавају HTML и изазивају додатне захтеве за исти резултат.
Датотека мора бити PNG. iOS за ову икону не чита SVG ни WebP, а JPEG квари оштре ивице једноставне графике.
Изаберите непрозирну позадину
Провидна позадина може дати неочекиван резултат у зависности од верзије и контекста приказа. Да бисте контролисали изглед почетног екрана, припремите графику на изабраној непрозирној позадини.
Решење је да пре извоза спојите икону са непрозирном позадином. Изаберите боју бренда или обичну белу ако је симбол шарен, и оставите око 10% размака око графике да не делује скучено.
Ипак, немојте сами заобљавати углове: iOS примењује сопствену заобљену маску. Већ заобљена датотека даје двоструки радијус и ружне углове.
Ознака коју треба додати
Довољан је један ред у head делу странице: link rel="apple-touch-icon" href="/apple-touch-icon.png". Атрибут sizes није обавезан када испоручујете само једну датотеку.
По жељи додајте meta name="apple-mobile-web-app-title" content="Your brand" да одредите натпис испод иконе. Без те ознаке iOS користи наслов странице, који је обично предугачак и скраћује се.
Ставите и копију датотеке у корен као apple-touch-icon.png: као и favicon.ico, iOS је тражи на тој адреси када не пронађе ознаку.
Зашто се икона не ажурира
iOS упорно кешира икону, а пречица која је већ на почетном екрану никада се не мења сама. Да испробате нову верзију, обришите пречицу, очистите Safari податке, па поново додајте сајт.
Ако икона и даље недостаје, проверите три ствари: датотека враћа 200, а не 404, служи се са типом садржаја image/png и није блокирана правилом robots.txt или пријављивањем.
LFFavicon алат за проверу испитује управо ове случајеве на свакој јавној URL адреси и приказује икону коју је заиста преузео.
Примарни извори
Честа питања
Да ли је потребно више величина apple-touch-icon?
За већину пројеката једна датотека високе резолуције од 180×180 омогућава да iOS произведе мање приказе. Тестирајте уређаје обухваћене вашим планом подршке.
Да ли Android користи apple-touch-icon?
Chrome на Android уређајима може је употребити као резерву, али прво чита иконе веб манифеста. Увек наведите иконе од 192×192 и 512×512 у манифесту: то је званичан поступак.
Може ли SVG бити икона Apple Touch?
Не, iOS за ову ознаку очекује растерски PNG. SVG задржите за фавикон прегледача на рачунару, где доноси оштрину и подршку за тамни режим.