사이트에서 발생하는 404 에러를 정리하다 보면 일반 게시물 삭제 오류 외에도 처음 보는 요청이 계속 반복되는 경우가 있습니다. 특히 Rank Math나 보안 로그에서 apple touch icon 404 요청이 반복해서 잡히는 경우가 있는데, 대부분은 브라우저가 찾는 아이콘 파일이 서버에 존재하지 않을 때 발생합니다.
문제는 이 오류가 단순 이미지 누락처럼 보이지만 계속 반복되면 불필요한 요청이 누적되고, OpenLiteSpeed 환경에서는 로그와 캐시 흐름까지 지저분해질 수 있다는 점입니다. 특히 워드프레스에서 게시물 404를 대부분 정리한 이후에는 이런 세부 요청 오류가 더 눈에 띄게 보이기 시작합니다.
이번 글에서는 OpenLiteSpeed + 워드프레스 + CyberPanel 환경 기준으로 apple touch icon 404 에러를 실제로 수정했던 흐름을 이미지 순서대로 정리해보겠습니다.
목차
apple touch icon 404 에러가 발생하는 이유
apple touch icon 404 오류는 브라우저나 모바일 기기가 사이트 아이콘 파일을 요청했는데 해당 파일이 루트 디렉토리에 존재하지 않을 때 발생합니다.
특히 아이폰이나 사파리 브라우저 계열은 자동으로 apple-touch-icon.png 파일을 찾는 경우가 많습니다. 그런데 워드프레스 기본 설정만 사용하면 해당 파일이 없는 상태인 경우도 많기 때문에 404 요청이 반복해서 발생할 수 있습니다.
처음에는 단순 오류처럼 보이지만 요청 수가 많아지면:
- 불필요한 404 로그 증가
- Rank Math 오류 누적
- OpenLiteSpeed 로그 증가
- 크롤링 효율 저하
- 캐시 흐름 혼선
같은 문제가 같이 나타날 수 있습니다.
PNG 아이콘 파일 먼저 준비하기
apple touch icon 파일을 만들기 위해서는 먼저 배경이 제거된 PNG 아이콘 이미지가 필요합니다. 일반적으로는 사이트 로고를 PNG 형태로 준비한 뒤 사용하는 경우가 많습니다.
중요한 부분은 투명 배경 PNG를 사용하는 것입니다. 배경이 포함된 이미지를 사용하면 아이폰 홈 화면이나 브라우저 북마크 영역에서 아이콘이 어색하게 보일 수 있습니다.
특히 워드프레스 사이트는 파비콘만 설정하고 apple touch icon 파일은 따로 만들지 않는 경우가 많기 때문에 여기서부터 누락되는 경우가 많습니다.
여러 크기의 아이콘 파일 생성하기
PNG 파일을 준비했다면 다양한 크기의 apple touch icon 이미지를 생성해야 합니다. 가장 많이 사용하는 사이트 중 하나가 Favic-o-Matic 같은 favicon 생성 도구입니다.
여기서 중요한 부분은 “Every damn size, sir” 옵션을 활성화하는 것입니다. 이 옵션을 켜야 아이폰, 아이패드, 안드로이드, 브라우저 환경에서 사용하는 여러 크기의 아이콘이 함께 생성됩니다.
OpenLiteSpeed 환경에서는 특정 요청만 반복적으로 들어오는 경우도 있기 때문에 가능한 여러 사이즈를 같이 준비해 두는 편이 안정적입니다.
HTML 코드와 아이콘 파일 확인하기
아이콘 생성이 끝나면 압축 파일과 함께 HTML 코드가 같이 제공됩니다. 여기에는 각 아이콘 크기를 불러오는 <link rel> 코드가 포함되어 있습니다. 처음 보면 단순 HTML 코드처럼 보이지만, 실제로는 브라우저가 어떤 아이콘을 불러와야 하는지 알려주는 역할을 합니다.
다만 워드프레스에서는 이미 Site Icon 기능이나 SEO 플러그인이 일부 favicon 코드를 출력하는 경우가 있기 때문에 중복 삽입이 발생하지 않도록 확인하는 것이 좋습니다.
header.php에 HTML 코드 추가하기
직접 HTML 코드를 사용하는 경우에는 워드프레스 테마의 header.php 파일 안 <head> 영역에 코드를 추가해야 합니다. OpenLiteSpeed 환경에서는 캐시가 강하게 적용되는 경우가 많기 때문에 수정 후에도 바로 반영되지 않는 경우가 있습니다.
이런 경우에는 LiteSpeed Cache purge를 같이 진행하는 편이 좋습니다. 또한 테마 업데이트 시 header.php 수정 내용이 초기화될 수 있기 때문에 자식 테마(child theme)를 사용하는 방식이 더 안전합니다.
루트 디렉토리에 이미지 업로드하기
apple touch icon 파일은 루트 디렉토리에 업로드하는 방식이 가장 많이 사용됩니다. CyberPanel이나 FileZilla를 사용하면 직접 업로드할 수 있습니다.
특히 OpenLiteSpeed 환경에서는:
- /public_html
- /htdocs
- /home/domain/public_html
같은 실제 루트 위치를 정확히 확인하는 것이 중요합니다.
파일 이름이 정확하지 않거나 경로가 다르면 브라우저 요청이 계속 404로 남게 됩니다.
HTML 코드 없이 해결되는 경우도 있는 이유
실제로는 모든 HTML 코드를 넣지 않아도 해결되는 경우가 있습니다. 대표적으로:
- apple-touch-icon.png
- apple-touch-icon-precomposed.png
이 두 파일만 루트 디렉토리에 올려도 자동으로 브라우저가 크기를 조절해 사용하는 경우가 있기 때문입니다. 저 역시 처음에는 여러 사이즈를 모두 업로드했지만, 이후에는 대표 파일 2개만 유지하는 방식으로 바꿨습니다.
다만 브라우저 종류나 캐시 상태에 따라 다르게 동작할 수 있기 때문에 404 요청이 계속 발생한다면 HTML 코드 방식까지 같이 적용하는 편이 안정적입니다.
.htaccess 리다이렉트가 마지막 해결 방법이 된 이유
위 방법들을 적용했는데도 apple touch icon 404 요청이 계속 남는 경우가 있었습니다. 특히 외부 봇이나 오래된 브라우저 요청은 다양한 이름으로 아이콘을 찾는 경우가 많았습니다.
결국 가장 안정적으로 해결된 방법은 .htaccess 리다이렉트 추가였습니다.
RedirectMatch 301 (?i)/apple(-touch-icon-.*)?.png /apple-touch-icon.png이 코드는 여러 apple touch icon 요청을 대표 이미지 하나로 연결해 주는 방식입니다.
특히 OpenLiteSpeed 환경에서는 불필요한 404 요청이 줄어들면서:
- 로그 감소
- Rank Math 404 감소
- 캐시 흐름 안정화
- 불필요 요청 감소
변화가 체감되는 편이었습니다.
적용 후 확인한 변화
설정을 마친 뒤 가장 먼저 보인 변화는 Rank Math 404 로그에서 apple touch icon 오류가 거의 사라졌다는 점이었습니다. OpenLiteSpeed 로그에서도 반복 요청이 줄어들었고, 관리자 화면에서 404 관련 로그를 계속 정리해야 하는 흐름도 크게 줄었습니다.
특히 게시물 삭제 후 남는 일반 404 오류와 달리 apple touch icon 요청은 브라우저 자동 요청인 경우가 많기 때문에 한 번 정리해 두면 장기적으로 관리가 훨씬 편해집니다.
관련 설정 팁
- LiteSpeed Cache purge 후 확인
- 브라우저 캐시 삭제 후 테스트
- Site Icon 중복 설정 확인
- header.php 직접 수정 시 자식 테마 사용
- CyberPanel 루트 경로 재확인
- favicon.ico와 apple touch icon 중복 여부 확인
