[Blog] Fix Favicon issue
문제 상황
- 예전에 블로그 초기 세팅 하면서 favicon을 설정했던 것 같은데, 어느 날 보니까 아무것도 안보임.
- 모든 파일 삭제했다가 다시 넣어보고,
custom.html이랑head.html건드려가며 별 짓을 다 해도 favicon이 등장하지 않음. - StackOverflow에 달린 답변도 수십 개는 확인해봤으나 원하는 답을 얻지 못함.
- GPT한테 물어봐도 파일 위치 확인해라, 파일 경로 수정해봐라 외에 다른 답을 제공하지 않았음..
문제 원인
- favicon 관련 link태그가
head안에 들어가있어야 하는데, 개발자도구(Chrome에서command + option + i)를 열고 Elements를 확인했을 때 favicon 관련 태그가head가 아닌body태그 내에 렌더링되고 있었음.
해결 방법
custom.html내부의 favicon 관련 코드들을 통째로default.html로 옮겨 보니 적용이 되었음.- 근데 결국 이것도 큰 관점에서는 2번 방법이랑 같긴 함
- 나는
custom.html과default.html을 확실히 분리하고 싶었음.default.html이custom.html을 참조하니까.
default.html에서 하단 코드 위치를 위로 바꿔줌.
- 이렇게
<script>태그보다 더 상단으로.. - 리소스 호출 순서
- 브라우저는 HTML문서를 위에서 아래로 순차적으로 parsing하는데,
<html>태그가<!doctype html>바로 다음에 위치하지 않고<script>다음에 위치해서 파비콘이 올바르게 로드되지 않은 듯. <script>태그가 너무 일찍 시작되면 DOM이 완전히 로드되기 전에 JavaScript가 실행되어 문서 구조에 영향을 미칠 수도 있고,<html>태그 전에 있으면 브라우저가 HTML을 올바르게 해석하지 못할 수도 있다고 함.- DOM(Document Object Model): 웹 페이지의 모든 요소들이 어떻게 서로 연결되어있고, 어떤 계층 구조를 가지고 있는지를 트리 구조로 나타낸 것
- 브라우저는 HTML문서를 위에서 아래로 순차적으로 parsing하는데,
« 현재 정상적으로 적용됐음을 확인할 수 있음.
Leave a comment