유효한 apple-touch-icon을 제공하지 않음
— 업데이트됨
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">
태그가 없는 페이지에 플래그를 지정합니다.
Lighthouse는 아이콘이 실제로 존재하는지, 또는 아이콘이 올바른 크기인지 확인하지 않습니다.
Apple 터치 아이콘을 추가하는 방법 #
페이지의
<head>
에<link rel="apple-touch-icon" href="/example.png">
를 추가합니다.<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="apple-touch-icon" href="/example.png">
…
</head>
…/example.png
를 아이콘의 실제 경로로 바꿉니다.
개선된 사용자 경험을 제공하려면 다음을 확인하세요.
- 아이콘이 180x180픽셀 또는 192x192픽셀입니다.
- 아이콘에 대한 지정된 경로가 유효합니다.
- 아이콘의 배경이 투명하지 않습니다.
리소스 #
마지막 업데이트: — 기사 개선하기