클라이언트의 목업을 만들거나, 경쟁사 분석 대시보드를 구축하거나, Toss가 다크 모드 탭 아이콘을 어떻게 처리하는지 리버스 엔지니어링하려고 할 때 벽에 부딪힌 적이 있을 것입니다. URL 끝에 /favicon.ico를 추가해 보지만 404 에러만 돌아옵니다. 브라우저는 이미 단일 루트 파일 방식을 훨씬 넘어섰습니다. 오늘날 웹사이트 파비콘을 복사하는 방법(how to copy a website favicon)을 정확히 알고 싶다면 DOM을 살펴봐야 합니다.
저는 클라이언트 사이트를 감사할 때 이 작업을 끊임없이 합니다. 아이콘 설정을 수정하기 전 첫 번째 단계는 기존 설정을 그대로 가져오는 것입니다. 브라우저에서 직접 사이트의 파비콘 구현을 복사하는 저만의 정확한 워크플로우를 소개합니다.
개발자의 워크플로우: 웹사이트 파비콘을 복사하는 방법
'페이지 소스 보기'는 무시하세요. Next.js나 Nuxt 같은 최신 JavaScript 프레임워크는 이러한 태그를 동적으로 주입하는 경우가 많습니다. 우리에게 필요한 것은 렌더링된 DOM입니다.
1단계: 요소(Elements) 패널 열기
대상 웹페이지의 아무 곳이나 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택합니다. Elements 패널 안에서 Cmd+F(또는 Ctrl+F)를 누르고 rel='icon'을 검색합니다.
2단계: HTML 노드 복사하기
여러 개의 태그를 발견할 가능성이 높습니다. 예를 들어 Toss는 SVG와 PNG 폴백을 혼합하여 사용합니다. <link> 노드를 마우스 오른쪽 버튼으로 클릭하고 '복사'를 선택한 다음 '요소 복사'를 클릭합니다. 이렇게 하면 아이콘을 제공하는 데 사용하는 정확한 마크업을 얻을 수 있습니다.
3단계: 콘솔을 통해 에셋 추출하기
이미지 파일 자체만 원한다면 상대 경로(/assets/images/icon.svg 등)를 파헤치는 것은 성가신 일입니다. DevTools 콘솔로 이동하여 이 짧은 스니펫을 실행하세요.
const icon = document.querySelector('link[rel="icon"]').href;
console.log(icon);이렇게 하면 절대 URL이 즉시 확인됩니다. 클릭해서 이미지를 저장하세요.
아이콘 복사 시 흔한 함정
아이콘을 가져오는 것은 쉽지만, 맹목적으로 재사용하면 대개 문제가 발생합니다. 다음 함정에 주의하세요.
- 상대 경로: HTML 태그를 로컬 프로젝트에 직접 복사하면
href='/favicon.svg'와 같은 경로가 localhost에서 파일을 찾으려고 하므로 빈 탭이 나타납니다. - Apple Touch Icon 누락: 표준
rel='icon'은 iOS 홈 화면을 커버하지 않습니다. 종종rel='apple-touch-icon'을 따로 찾아야 합니다. - SVG 미디어 쿼리: SVG 파비콘을 복사하는 경우 다크 모드를 위한 내부 CSS가 포함되어 있을 수 있다는 점에 유의하세요. 목업 환경이 일치하지 않으면 보이지 않을 수 있습니다.
여러 사이트에서 이 작업을 수동으로 하고 있다면 시간을 낭비하고 있는 것입니다. 콘솔 트릭은 일회성으로 사용하기에는 훌륭하지만, 저는 이 과정을 자동화하기 위해 Mzu favicondl을 만들었습니다. 대상 URL을 파싱하고 모든 경로를 확인하여 아이콘을 패키징해 줍니다.
다른 추출 방법에 대해 더 깊이 알고 싶다면 웹사이트에서 파비콘을 다운로드하는 방법에 대한 가이드를 확인하거나, 최신 사이트들이 왜 SVG 파비콘을 사용하는지 알아보세요. URL 추측은 그만두고 DOM 검사를 시작하세요.