예전에 스타벅스 홈페이지 클론코딩 한 것을 살펴보다가 갑자기 궁금한 점이 생겼다. favicon
을 모든 페이지마다 불러오려면 모든 index.html
파일에 link
태그를 써야될까? 아니면 메인페이지 index.html
에만 link
태그를 쓰면 될까? (프로젝트를 HTML, CSS, JavaScript로만 구성했다고 가정)
📦starbucks
┣ 📂css
┣ 📂images
┣ 📂js
┣ 📂signin
┣ 📑index.html
┣ 📑README.md
┣ 🖼️favicon.png
┣ 🖼️favicon.icon
최상위 폴더에 있는 index.html
와 signin
폴더에 있는 index.html
에서 favicon.png
을 불러오고 있는데 모두 주석처리 하여도 favicon이 브라우저에서 정상적으로 출력되었다.
(캐싱 된 게 있을까 싶어 캐시 비우기 및 강력 새로고침도 해보았다.)
favicon
을 불러오는 link
태그를 주석처리 했는데 왜 정상적으로 출력이 될까?
메인페이지가 있는 최상위 디렉토리에서 favicon.png
와 favicon.icon
파일을 지우고 캐시 비우기 및 강력 새로고침 후에 브라우저를 다시 살펴보았다.
위 사진에서 알 수 있듯이 favicon 이미지가 보이지 않는다.
그렇다면 이번에는 favicon.png
파일만 다시 폴더에 넣어보고, 캐시 비우기 및 강력 새로고침 후 다시 브라우저를 살펴보자.
여전히 favicon 이미지가 보이지 않는다.
이번에는 favicon.icon
파일만 폴더에 넣어본 뒤, 캐시 비우기 및 강력 새로고침 후 다시 브라우저를 살펴보자.
엥?
엥??
좋다! favicon.icon
파일만 폴더에 넣어보았더니 이미지가 정상적으로 출력된다.
그럼 이번에는 favicon.icon
파일과 favicon.png
파일 모두를 넣어보고 브라우저를 살펴보자.
결과는 정상 출력이다.
위의 시도를 통해 알 수 있는것은 index.html
파일에
<!-- <link rel="icon" href="./favicon.png" /> -->
위와 같이 favicon을 불러오는 link
태그가 주석처리 되어져 있어도 favicon.icon
파일만 잘 들어있다면 favicon 이미지는 정상적으로 보여진다. 왜 이런 현상이 생길까? 내가 생각하는 원인은 브라우저가 알아서 잘 깔끔하고 센스있게 favicon 이미지를 보여주는게 아닐까? 싶다.
어디까지나 저의 개인적인 의견입니다. 혹시 틀린 내용이 있다면 알려주시면 감사하겠습니다!😁
(브라우저, 버전, 배포 등 환경마다 다르게 동작할 수 있습니다!)
파일명만 favicon.icon으로 명시해두면 알아서 가져가주나봐요 똑똑한 브라우저 칭찬해~!