유효한 apple-touch-icon을 제공하지 않음

Published on Updated on

Translated to: English, Español, Português

iOS Safari 사용자가 홈 화면에 PWA(Progressive Web App)를 추가하는 경우에 나타나는 아이콘을 Apple 터치 아이콘이라고 합니다. 페이지의 <head><link rel="apple-touch-icon" href="/example.png"> 태그를 포함시켜 앱에서 사용해야 하는 아이콘을 지정할 수 있습니다. 페이지에 이 링크 태그가 없으면 iOS가 페이지 콘텐츠의 스크린샷을 찍어 아이콘을 생성합니다. 즉, iOS에 아이콘을 다운로드하도록 지시하면 보다 세련된 사용자 경험을 얻을 수 있습니다.

Lighthouse Apple 터치 아이콘 감사에 실패하는 이유

Lighthouse<head><link rel="apple-touch-icon" href="/example.png"> 태그가 없는 페이지에 플래그를 지정합니다.

유효한 apple-touch-icon을 제공하지 않음

rel="apple-touch-icon-precomposed" 링크가 감사를 통과했지만 iOS 7부터는 이 링크가 사용되지 않습니다. 대신 rel="apple-touch-icon"을 사용하세요.

Lighthouse는 아이콘이 실제로 존재하는지, 또는 아이콘이 올바른 크기인지 확인하지 않습니다.

In the Lighthouse report UI the full PWA badge is given when you pass all of the audits in all of the PWA subcategories (Fast and reliable, Installable, and PWA optimized).

Apple 터치 아이콘을 추가하는 방법

  1. 페이지의 <head><link rel="apple-touch-icon" href="/example.png">를 추가합니다.

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <link rel="apple-touch-icon" href="/example.png">

    </head>
  2. /example.png를 아이콘의 실제 경로로 바꿉니다.

Codelab

Progressive Web App에 Apple 터치 아이콘 추가 코드랩을 확인하여 Apple 터치 아이콘을 추가하면 사용자 경험이 개선되는 이유를 알아보세요.

개선된 사용자 경험을 제공하려면 다음을 확인하세요.

  • 아이콘이 180x180픽셀 또는 192x192픽셀입니다.
  • 아이콘에 대한 지정된 경로가 유효합니다.
  • 아이콘의 배경이 투명하지 않습니다.

리소스

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.