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

— 업데이트됨
Available in: English, Español 및 Português
Appears in: PWA 감사
이 페이지에서

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을 제공하지 않음

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

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를 아이콘의 실제 경로로 바꿉니다.

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

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

리소스 #

마지막 업데이트: — 기사 개선하기
Return to all articles
공유