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

iOS Safari 사용자가 홈 화면에 프로그레시브 웹 앱 (PWA)을 추가하면 표시되는 아이콘을 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 픽셀입니다.
  • 지정된 아이콘 경로가 유효합니다.
  • 아이콘의 배경이 투명하지 않음

리소스