새벽에 서비스 배포를 마치고 브라우저를 켜보니, 내 브랜드 로고 대신 익숙한 지구본 아이콘이 뜹니다. 개발자 도구 Console을 확인해보니 favicon syntax error fix 관련 경고가 잔뜩 쌓여있죠. 십중팔구는 HTML <link> 태그 작성 실수 때문입니다.

가장 빠른 favicon syntax error 해결 방법은 HTML 속성을 정확하게 교정하는 것입니다. 브라우저는 icon 선언 방식에 꽤 깐깐합니다. 따옴표 짝이 안 맞거나 닫는 태그를 빠뜨리면 parser는 조용히 해당 요소를 무시해버립니다. 아래는 검증된 안전한 패턴이니 그대로 복사해서 쓰시면 됩니다.

<link rel='icon' href='/favicon.svg' type='image/svg+xml' />
<link rel='apple-touch-icon' href='/apple-touch-icon.png' />

self-closing slash와 명시적인 type 속성에 주목하세요. type 선언은 브라우저에게 파일 포맷을 정확히 알려주어 parsing 혼란을 방지합니다. (태그 속성에 대한 자세한 분석이 필요하다면 Favicon HTML Code Cheat Sheet를 참고하세요.)

브라우저에서 Syntax Error가 발생하는 이유

HTML parser는 꽤 관대하지만 한계가 있습니다. 잘못된 syntax를 만나면 복구를 시도하는데, 이 과정에서 잘못 추측하여 icon을 통째로 건너뛰는 경우가 종종 발생합니다.

누락되거나 짝이 안 맞는 따옴표

Stack Overflow나 옛 블로그에서 코드를 복사해 오다 보면, 일반 따옴표 대신 스마트 따옴표가 들어가거나 닫는 따옴표가 빠지는 경우가 있습니다.

<!-- BROKEN: missing closing quote on href -->
<link rel='icon' href='/favicon.ico />

parser는 이 코드를 읽고 문서의 나머지 부분 전체가 href URL의 일부라고 간주합니다. icon은 사라지고, 뒤따르는 태그들을 브라우저가 삼켜버리면서 layout이 깨지는 연쇄 오류가 발생할 수 있습니다.

shortcut icon Rel 함정

구형 튜토리얼들을 보면 rel='shortcut icon'을 사용하라고 안내하는 경우가 많습니다. 이제 obsolete된 방식입니다. modern 브라우저는 rel='icon'만 있으면 충분합니다. 'shortcut'이라는 단어는 Internet Explorer 시절의 특이사항으로, 개발자들이 공백이 포함된 rel='shortcut icon'을 쓰도록 강제했습니다. rel 속성에 공백이 들어가면 여러 token value로 분리되어, 일부 깐깐한 HTML5 validator에서 syntax error로 간주합니다. 그냥 rel='icon'을 사용하세요.

실제 사례: GitHub는 어떻게 처리하는가

GitHub의 소스 코드를 직접 열어보세요. 그들은 dark mode media query가 내장된 단일 SVG favicon 하나만 서빙합니다. HTML은 흠잡을 데 없이 깔끔합니다.

<link rel='icon' class='js-site-favicon' type='image/svg+xml' href='https://github.githubassets.com/favicons/favicon.svg' />

syntax error도 없고, legacy shortcut 키워드도 없습니다. 정확한 MIME type을 선언해서 브라우저가 추측할 여지를 주지 않습니다. (이 접근 방식의 size 전략은 Favicon Best Size 2026 guide에서 자세히 다룹니다.)

향후 Syntax Error 방지 방법

syntax error는 결국 link 태그를 손으로 직접 코딩하다 발생합니다. 이제 이 문제를 근본적으로 해결하는 방법을 알려드립니다.

태그를 교정하고 validator를 한 번 돌린 뒤 배포하면, 모든 브라우저에서 탭이 깔끔하게 보일 겁니다. 더 이상 지구본 아이콘과 작별하세요.