FE
[SvelteKit] "[404] GET icon images"은 뭐지?!
| 서론
SvelteKit 기반의 Re:Log 프로젝트를 npm run dev로 실행했는데, 시작하자마자 콘솔에 아래와 같은 로그가 떴습니다.
[404] GET /apple-touch-icon-precomposed.png
[404] GET /apple-touch-icon.png
[404] GET /favicon.ico분명 페이지는 잘 열리는데 빨간 글씨로 [404]가 뜨게 되면서, 개발하기도 전에 당황스러움이 찾아왔습니다,, 하하
처음엔 “vite 설정이 잘못된 건가?” 했지만, 사실 이건 정상적인 현상이었습니다.
| 원인 분석
이 문제는 Vite나 SvelteKit의 오류가 아니라, 브라우저의 자동 요청 때문이었습니다.
Safari나 Chrome 같은 브라우저는 사이트를 열 때 아래 세 가지 이미지를 자동으로 찾습니다.
/favicon.ico → 탭 상단에 보이는 아이콘
/apple-touch-icon.png → iOS 홈 화면 바로가기용
/apple-touch-icon-precomposed.png → 구형 iOS용 (그림자 효과 X)
그런데 SvelteKit의 static/ 폴더 안에 이 파일들이 없으면 Vite 개발 서버가 “그런 파일 없음!”이라며 [404] 로그를 남기는 로직이더라고요.
즉, 사이트는 멀쩡히 작동하지만 브라우저가 못 찾은 파일만 404로 찍힌 거예요.
| 파일 생성
이 문제를 해결하기 위해 아이콘 파일을 직접 생성해주면 됐었는데요?
https://favicon.io/favicon-generator/
여러 사이트 중에서도 favicon.io에서 간단히 만들 수 있었습니다.
해당 페이지에 접속한 뒤엔, 위의 사진처럼 여러 정보들을 아래와 같이 기입한 뒤에 다운로드를 할 수 있었습니다.
텍스트: R
배경: Rounded
폰트: Marhey
배경색: #55F
다운로드 후 압축 해제
→ 안에 favicon.ico, apple-touch-icon.png 파일이 포함되어 있습니다.
하지만, 에러 메세지에 있었던 'apple-touch-icon-precomposed.png' 파일의 경우에는
해당 파일들을 static 폴더에 추가한 뒤에, apple-touch-icon.png 파일의 이름만 바꿔주면 됐었습니다.
cp static/apple-touch-icon.png static/apple-touch-icon-precomposed.png| 파일 추가 후 npm run dev
static/ 폴더 구조는 이렇게 변경됩니다
이제 다시 실행하면, 더 이상 [404] GET /apple-touch-icon.png 로그가 뜨지 않게 됩니다!
| 결론
결론적으로 이 현상은 브라우저가 자동으로 요청한 아이콘 파일이 없어서 생긴 404 로그였습니다.
즉, 오류가 아니라 단순한 정보성 로그이며, 필요하다면 static/ 폴더에 아이콘 파일만 추가해주면 깔끔하게 해결된다는 점을 경험할 수 있었습니다.