목차
1. apple-touch-icon이란
2. apple-touch-icon 404 에러 발생 경로
2-1. (다른 앱으로) '내보내기' 했을 경우
2-2. 홈 화면(스크린)에 추가했을 경우
2-3. 확인되지 않은 상황
3. 해결을 위해 거쳐간 과정
3-1. 이미지 사이즈
3-2. 파일 이름과 경로
3-3. 몇 가지 실험
4. 결론
1. apple-touch-icon이란
apple-touch-icon.png
apple-touch-icon.png 파일은 아이폰, 아이패드 등 애플 기기에서 사용하는 앱 아이콘 파일이다. 애플 기기의 홈 화면에 저장된 앱이나 웹 사이트를 나타내는 아이콘 이미지이며, 저장된 앱이나 웹을 실행시킬 때 실질적으로 터치하게 되는 이미지다. 말 그대로 애플의 터치 아이콘.
apple-touch-icon-precomposed
iOS 6까지 앱 아이콘에 적용되었던 효과(둥근 모서리, 그림자, 반사광)가 있었는데. 이 효과의 적용 유무를 앱 아이콘의 이름으로 구분했었다. -precomposed가 붙어 있으면 미적용, 안 붙어 있으면 적용하는 형태다. 다만, iOS 7부터는 앱 아이콘에 효과가 적용되지 않게 되었고 -precomposed 역시 의미를 잃게 되었다(Configuring Web Applications).
iOS 7이 2013년에 나왔으니 10년전에 있었던 일이다. 물론 지금도 iOS 6이 깔린 기기를 사용하는 경우가 없지는 않겠지만, 2023년 기준 iOS 16 이용자가 81%이고, iOS 15 이상은 96%에 이르기 때문에 사실상 의미가 없어 보인다. (참고 : statista.com)
하지만, 애플 기기가 apple-touch-icon을 찾을 때에는 apple-touch-icon.png 유무와 상관없이 apple-touch-icon-precomposed.png도 함께 찾는 것인지 404 에러는 보통 위의 두 파일이 같이 난다. 귀찮아도 같이 다뤄야 한다.
2. apple-touch-icon 404 에러 발생 경로
직접 확인해 본 apple-touch-icon.png 파일에 대한 접근은 다음과 같은 상황일 때 발생했다. (404 에러 발생 상황)
2-1. (다른 앱으로) '내보내기' 했을 경우
아이폰 등 애플 기기에서 워드프레스 웹 페이지를 (다른 앱으로) '내보내기' 메뉴를 눌렀을 때 순간적으로 favicon, apple-touch-icon, og:image 순서로 이미지가 스쳐 지나간다. apple-touch-icon의 이미지를 실질적으로 사용하지는 않지만 '홈 화면'에 추가할 경우를 대비해 미리 로딩해 두는 것 같다.
이 과정에서 apple-touch-icon.png가 확인이 되지 않을 경우 404 에러를 낸다.
2-2. 홈 화면(스크린)에 추가했을 경우
아이폰 등 애플 기기의 홈 화면에 나타나는 앱 아이콘이 apple-touch-icon.png 이기 때문에 자연스러운 접근이다. 다만 홈 화면에 추가할 때에는 일반적으로 (다른 앱으로) '내보내기' 메뉴를 거치며 apple-touch-icon.png 로딩이 이루어지기 때문에 홈 화면에 추가할 때는 404 에러가 (또 날 수도 있고) 나지 않을 수 있다. 내보내기 메뉴를 거치지 않고 홈 화면에 추가할 수 있는 경로가 있는지는 모르겠지만, 그럴 경우에는 404 에러를 독립적으로 낼 것으로 생각된다.
2-3. 확인되지 않은 상황
위와는 별개의 상황에서 apple-touch-icon에 대한 404 에러를 목격하기도 하였는데, 추정한 상황을 다시 연출해 보아도 재현되지는 않아서 정확히 파악하지는 못했다.
추정한 상황은, 관리자 로그인이 되어 있는 상황의 워드프레스에서 로그아웃을 눌러 튕겨나올 때이다. 캐시 때문에 재현이 안 되었을 수도 있다.
3. 해결을 위해 거쳐간 과정
3-1. 이미지 사이즈
앱 아이콘의 사이즈는 사용되는 OS 버전, 기기 종류, 해상도에 따라 달라진다. iOS를 사용하는 기기(아이폰, 아이패드)를 고려한다면 기본적으로 4가지 사이즈(120px, 152px, 167px, 180px)를 커버해야 한다.
각각의 파일을 만들면 필요한 크기의 파일만 골라 접근하므로 가볍고 빠르게 접근이 가능하다. 다만, 다뤄야 하는 파일 수가 많아지고 <link>로 경로 지정이 필요할 수 있다.
하나의 파일로 모든 사이즈의 앱 아이콘을 커버하면, 만들기 쉽고 경로 지정도 해 줄 필요가 없다. 다만 앱 아이콘 로딩 시 필요보다 더 큰 사이즈나 작은 사이즈를 로딩하게 되어 불필요한 트래픽을 발생시킬 수 있고 요구치 보다 해상도가 낮을 경우 아이콘이 깨져 보일 수 있다. 실질적인 상황에서는 (사진 파일을 이용해 아이콘을 만드는 것이 아닌 이상) 절대 용량이 크지 않은 경우가 많고 180px 파일이면 리사이징이 이루어져도 (흐려 보일 수는 있어도) 깨져 보이지는 않기 때문에 효율적인 방법으로 보인다.
결국 나는 180x180px 사이즈의 apple-touch-icon.png을 만들어 루트 디렉토리에 저장했다.
요구되는 앱 아이콘의 사이즈에 대한 참고자료. (tvOS, visionOS, watchOS는 의미가 없을 것 같아 생략) (App icons | Apple Developer Documentation)
iOS, iPadOS 앱 아이콘 크기
| @2x (픽셀) | @3x (필셀) 아이폰 전용 | 비고 |
| 120x120 | 180x180 | 홈 스크린 - 아이폰 |
| 167x167 | - | 홈 스크린 - 아이패드 프로 |
| 152x152 | - | 홈 스크린 - 아이패드, 아이패드 미니 |
| 80x80 | 120x120 | Spotlight - 아이폰, 아이패드 프로, 아이패드, 아이패드 미니 |
| 58x58 | 87x87 | 설정 - 아이폰, 아이패드 프로, 아이패드, 아이패드 미니 |
| 76x76 | 114x114 | 알림 - 아이폰, 아이패드 프로, 아이패드, 아이패드 미니 |
참고로 아이폰은 11 이후 모델(11pro, 11pro max, 12mini, 12, 12pro ...)에서 모두 @3x, 아이패드는 9.7” iPad 부터 모두 @2x. (Layout | Apple Developer Documentation)
더불어 플래폼에 따른 스케일 팩터는 링크와 같다. (Images | Apple Developer Documentation)
3-2. 파일 이름과 경로 (Configuring Web Applications)
애플 개발자 페이지의 설명에 의하면,
- 전체 웹사이트에 대한 아이콘 지정은 루트 디렉토리에 apple-touch-icon.png 이름으로 된 파일 저장
- 개별 페이지에 대한 아이콘 지정은 <link>로 지정
- 해상도에 따른 아이콘을 개별 지정할 경우 <link>에 sizes 속성을 넣어 지정
처음에는 대충 읽고 넘겼었는데, 생각보다 중요한 내용이었다.
왜냐하면, apple-touch-icon.png을 루트 디렉토리가 아닌 곳에 저장한 후 <link>로 지정하면, 지정된 경로를 참고하여 앱 아이콘은 정상적으로 뜨지만 루트 디렉토리에서 404 에러가 난다. 해당 파일을 다른 곳에 저장하여 경로를 지정해도 일단 루트 디렉토리에서 해당 파일을 찾는다는 것.
파일 이름을 달리해도 404 에러가 나기 때문에 apple-touch-icon.png 이름의 파일을 루트 디렉토리에 저장하는 것이 기본이 된다.
다만 위에서 한 번 언급 했지만 apple-touch-icon-precomposed.png은 현재 의미가 없다 하더라도 apple-touch-icon.png과 함께 접근이 이루어진다(구버전 iOS와의 호환을 위한 정책일지도 모르겠다). 따라서 apple-touch-icon.png만 저장하면 apple-touch-icon-precomposed.png에서 404 에러가 난다. 동일한 파일을 두 이름으로 저장해 두자.
하라는 대로 그냥 루트 디렉토리에 apple-touch-icon.png 파일을 위치시키면 <link>로 경로 지정을 하지 않아도 404 에러 없이 앱 아이콘이 정상적으로 뜨기 때문에 그냥 이 방법을 사용하는 것이 가장 좋아 보인다.
다만 favicon을 사용하는 경우 apple-touch-icon보다 우선시 되는 경향이 있으니 참고하자. 만약 favicon과 apple-touch-icon을 구분해 사용하고 싶다면 <link>로 apple-touch-icon의 경로를 지정해 주면 된다.
해상도에 따라 아이콘을 개별적으로 지정하기 위해 <link>에 sizes 속성을 넣을 수도 있다. 여러 size 속성의 파일을 하나의 파일에 연결시켜 보면 지정된 파일을 찾아가긴 하는데, 이와는 별개로 해당 해상도의 원래 파일 이름으로 404 에러가 발생한다. 결국 이를 해결하기 위해서는 404 에러가 나는 해상도의 파일 이름을 확인하여 동일한 이름으로 루트 디렉토리에 저장해야 했다.
3-3. 몇 가지 실험
[실험 1]
애플 아이콘만 사용하는 환경
<환경>
- 파비콘 없음
- 루트 디렉토리에 애플 아이콘 2개 파일 루트 저장
- 애플 아이콘에 대한 <link> 지정 없음
<루트 디렉토리 저장 파일>
apple-touch-icon.png
apple-touch-icon-precomposed.png
<head>
추가사항 없음
* 루트디렉토리에서 apple-touch-icon.png에 대한 404 에러 없음. 다만 이 상태를 오래 유지하지는 않았어서 apple-touch-icon-120x120.png에 대한 404 에러가 발생할지는 모름. 만약 apple-touch-icon-120x120.png에 대한 404 에러가 난다면, apple-touch-icon-120x120.png, apple-touch-icon-120x120-precomposed.png 파일을 루트 디렉토리에 추가 저장함으로써 해결 가능할 것으로 추정(아래 실험 참조).[실험 2]
애플 아이콘과 파비콘을 같이 사용하는 환경에서 테스트
<환경>
- 파비콘 지정
- 루트 디렉토리에 애플 아이콘 2개 파일 저장
- 애플 아이콘 경로 지정은 apple-touch-icon.png 하나만 지정 (파비콘과 다른 이미지 사용)
<루트 디렉토리 저장 파일>
apple-touch-icon.png
apple-touch-icon-precomposed.png
<head>
<link rel="icon" href="https://OOO/favicon_32x32.png" sizes="32x32" />
<link rel="icon" href="https://OOO/favicon_192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="msapplication-TileImage" content="https://OOO/favicon_270x270.png" />
* 2일만에 루트 디렉토리에서 404 에러(대상 파일: apple-touch-icon-120x120.png, apple-touch-icon-120x120-precomposed.png)[실험 3]
실험 2와 동일하되 애플 아이콘 경로를 https부터 시작하는 url로 바꿔 봄. 혹시 절대경로 인식을 잘 못하나 싶어서.
<환경>
- 파비콘 지정
- 루트 디렉토리에 애플 아이콘 2개 파일 저장
- 애플 아이콘 경로 지정은 apple-touch-icon.png 하나만 지정
<루트 디렉토리 저장 파일>
apple-touch-icon.png
apple-touch-icon-precomposed.png
<head>
<link rel="icon" href="https://OOO/favicon_32x32.png" sizes="32x32" />
<link rel="icon" href="https://OOO/favicon_192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://OOO/apple-touch-icon.png" />
<meta name="msapplication-TileImage" content="https://OOO/favicon_270x270.png" />
* 1일만에 루트 디렉토리에서 404 에러(대상 파일: apple-touch-icon-120x120.png, apple-touch-icon-120x120-precomposed.png). 역시 경로의 문제는 아닌 듯 싶다.[실험 4]
120x120px 해상도 파일의 404 에러를 <link>로 해결해 보려 시도
<환경>
- 파비콘 지정
- 루트 디렉토리에 애플 아이콘 2개 파일 저장
- 애플 아이콘 경로 지정은 apple-touch-icon.png에 하고, 120x120px 해상도는 apple-touch-icon.png을 지정함
<루트 디렉토리 저장 파일>
apple-touch-icon.png
apple-touch-icon-precomposed.png
<head>
<link rel="icon" href="https://OOO/favicon_32x32.png" sizes="32x32" />
<link rel="icon" href="https://OOO/favicon_192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://OOO/apple-touch-icon.png" />
<link rel="apple-touch-icon" size="120x120" href="https://OOO/apple-touch-icon.png" />
<meta name="msapplication-TileImage" content="https://OOO/favicon_270x270.png" />
* 1일만에 루트 디렉토리에서 404 에러(대상 파일: apple-touch-icon-120x120.png, apple-touch-icon-120x120-precomposed.png). <link> 경로 지정과 상관없이 루트 디렉토리에서 해당 파일을 찾고 있다.[실험 5]
404 에러가 나는 파일의 이름을 존중해 주기
<환경>
- 파비콘 지정
- 루트 디렉토리에 애플 아이콘 4개 파일 저장
- 애플 아이콘 경로 지정은 apple-touch-icon.png 하나만 지정 (<head>에 행을 늘리지 않고, 120x120 사이즈가 필요할 때는 루트 디렉토리에서 알아서 찾아가게 놔둠)
<루트 디렉토리 저장 파일>
apple-touch-icon.png
apple-touch-icon-precomposed.png
apple-touch-icon-120x120.png
apple-touch-icon-120x120-precomposed.png
<head>
<link rel="icon" href="https://OOO/favicon_32x32.png" sizes="32x32" />
<link rel="icon" href="https://OOO/favicon_192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://OOO/apple-touch-icon.png" />
<meta name="msapplication-TileImage" content="https://OOO/favicon_270x270.png" />
* 약 1개월 반만에 apple-touch-icon-152x152.png에 대한 404 에러 발생[결국]
이러한 추이를 본다면 아마도 결국 아이폰 모델 전체를 고려해 120px, 152px, 167px, 180px 해상도의 apple-touch-icon 파일을 모두 만들어 저장해 두어야 에러가 발생하지 않을 것 같다. 참으로 비효율적인 것 같은 시스템.
<루트 디렉토리 저장 파일>
apple-touch-icon.png
apple-touch-icon-precomposed.png
apple-touch-icon-120x120.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-152x152.png
apple-touch-icon-152x152-precomposed.png
apple-touch-icon-167x167.png
apple-touch-icon-167x167-precomposed.png
apple-touch-icon-180x180.png
apple-touch-icon-180x180-precomposed.png
<head>
<link rel="icon" href="https://OOO/favicon_32x32.png" sizes="32x32" />
<link rel="icon" href="https://OOO/favicon_192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://OOO/apple-touch-icon.png" />
<meta name="msapplication-TileImage" content="https://OOO/favicon_270x270.png" />4. 결론 (실질적인 해결 방법)
결과적으로 본다면 모든 해상도의 파일을 만들어 루트 디렉토리에 저장하면 된다는 내용이 되어 버렸다.
힘 빠지는 결과이긴 하지만, 여기서 알아낸 점은 <link>로는 루트 디렉토리의 애플 아이콘 404 에러를 해결할 수 없다는 점인 것 같다. <link> 경로를 찾아가기는 하지만, 찾고자 하는 파일이 원래 이름과 다르거나 위치가 루트가 아니면 루트에서 해당 이름을 찾아 헤매면서 404 에러를 발생시킨다는 것.
즉, 루트 디렉토리에 원래부터 지정된 이름의 파일이 존재해야 404 에러를 피할 수 있는 것으로 보인다.
① 루트 디렉토리에 apple-touch-icon.png, apple-touch-icon-precomposed.png을 비롯하여 모든 해상도의 파일을 만들어 저장. <link>로 apple-touch-icon.png의 경로 지정을 하지 않아도 됨.
② 파비콘을 사용하는 경우에 한해 <link>로 apple-touch-icon.png의 경로 지정 필요. <link rel="apple-touch-icon" href="https://OOO/apple-touch-icon.png" />