홈페이지 완성도를 높이는 파비콘의 올바른 설정 방법부터 브라우저별·기기별 최적화까지. 웹마스터를 위한 실무 가이드입니다.
작성 · 주식회사 도도컴즈발행 · 2025년 1월
핵심 요약
파비콘은 브라우저 탭, 주소창, 북마크에 표시되는 16×16픽셀의 작은 아이콘입니다. 사용자가 여러 탭을 열었을 때 사이트를 빠르게 인식하는 데 도움이 되며, 브랜드 신뢰감을 높입니다. ICO 또는 PNG 형식으로 제작하며, HTML head에 link 태그로 연결하면 됩니다.
📌 기준 — W3C 권고(favicon specification) / MDN Web Docs / 웹접근성 기준(KWCAG)
01파비콘이란?
파비콘(Favicon)은 'Favorite Icon'의 줄임말로, 웹사이트를 나타내는 16×16픽셀(또는 32×32)의 작은 아이콘입니다. 브라우저 탭 제목 옆, 주소창 왼쪽, 북마크 목록에 자동으로 표시됩니다.
사용자가 여러 탭을 열었을 때 파비콘만으로도 사이트를 구분할 수 있어 사용성을 높이고, 브랜드 아이덴티티를 강화합니다. 의료기관·회사 홈페이지라면 로고나 이니셜을 파비콘으로 설정하는 것이 전문적입니다.
설정하지 않으면 브라우저 기본 아이콘(지구본, 물음표 등)이 표시되며, 검색엔진은 파비콘의 유무를 신뢰도 신호로 간주하기도 합니다.
파비콘 형식과 지원 기기를 표로 정리했습니다.
형식
권장 크기
특징
ICO
16×16, 32×32, 64×64
전통 표준 형식 · 모든 브라우저 지원 · 여러 크기를 파일 하나에 저장 가능
PNG
32×32, 180×180
현대 브라우저 지원 · 투명도 표현 가능 · 용량 효율적
SVG
벡터
무한 확대축소 · 가볍고 선명 · 최신 브라우저만 지원
WebP
32×32
최고 압축률 · 차세대 포맷 · 호환성 고려 필요
이런 상황이라면 파비콘이 필요합니다
병원·의료기관 홈페이지를 새로 만들거나 개선 중인 경우
회사 홈페이지에 로고를 작게 표현하고 싶을 때
기존 사이트가 파비콘 없이 떠 있거나 기본 아이콘인 경우
브라우저 탭에서 브랜드 신뢰감을 높이고 싶을 때
검색 결과나 북마크에서 시각적 차별성을 원할 때
웹 전문가들 사이에서는 "파비콘은 홈페이지의 완성도를 보여주는 작은 신호"라고 평가합니다.
02도도컴즈 소개
주식회사 도도컴즈웹사이트 제작·마케팅 전문
2013년부터 온라인 마케팅과 홈페이지 제작을 담당해온 회사입니다. 병원·의료기관, 회사 홈페이지 200곳 이상을 직접 기획·제작·운영해왔습니다. 파비콘 설정을 포함한 모든 웹 기술 항목을 정확히 구현하며, 사소한 디테일도 놓치지 않습니다. 웹마스터와 개발자를 위한 실무 정보를 정기적으로 공유하고 있습니다.
2013년~ 마케팅제작 200곳+기술 정확성무료 상담
03파비콘 설정 6단계
HTML 코드에 파비콘을 연결하는 방법을 단계별로 설명합니다. 기본 설정부터 고급 호환성까지 다룹니다.
1
파비콘 파일 준비하기
16×16 또는 32×32 PNG 파일을 준비합니다. 로고나 이니셜이 들어간 작은 이미지면 충분합니다. 투명도(알파채널)를 지원하려면 PNG 형식을 추천합니다. 온라인 도구(favicon.io 등)로 로고 이미지를 파비콘으로 변환할 수 있습니다.
2
파일을 웹 서버에 업로드하기
/images/favicon.png 또는 루트 디렉토리(/)에 favicon.ico로 저장합니다. 도도컴즈 호스팅을 이용 중이면 관리자에게 파일 업로드 경로를 요청하면 됩니다. 일반적으로 /public/images/ 폴더에 업로드합니다.
3
HTML head에 기본 링크 추가하기
<link rel="icon" type="image/png" href="/images/favicon.png" sizes="32x32">를 HTML 파일의 <head> 섹션에 추가합니다. 이것이 표준 설정이며, 대부분의 브라우저가 인식합니다.
4
Apple 기기 지원 추가하기
iPhone·iPad 홈 화면 바로가기 아이콘을 위해 <link rel="apple-touch-icon" href="/images/apple-touch-icon-180.png">를 추가합니다. 180×180 크기 이미지를 사용합니다. Apple 기기에서만 인식됩니다.
5
Android·Chrome 호환성 추가하기
Android 기기와 Chrome에서 최적화된 아이콘 표시를 위해 192×192, 512×512 PNG 파일을 준비하고 각각 link 태그로 연결합니다. <meta name="theme-color" content="#1D5FA8">를 추가하면 모바일 주소창 배경색도 설정됩니다.
6
캐시 초기화 및 확인하기
설정 후 브라우저 캐시를 지우거나 시크릿 창에서 확인합니다(Ctrl+Shift+Delete). 새 탭을 열어 파비콘이 표시되는지, 북마크에 아이콘이 저장되는지 확인합니다. 스마트폰 홈 화면에 추가해서 Apple 터치 아이콘도 테스트합니다.
파비콘이 표시되는 방식은 브라우저와 기기에 따라 다릅니다. 각 환경에서 최적화하는 방법입니다.
Chrome·Edge·Firefox 데스크톱 브라우저에서는 탭 제목 왼쪽에 32×32 파비콘이 표시됩니다. ICO 또는 PNG 형식 모두 지원하며, href 경로만 정확하면 자동 인식됩니다.
Safari(Mac) 주소창 왼쪽과 탭, 북마크에 파비콘이 표시됩니다. 기본 link 태그로도 인식되지만, apple-touch-icon 설정이 있으면 우선 적용됩니다.
iPhone·iPad 홈 화면에 사이트를 추가할 때 apple-touch-icon(180×180)이 바로가기 아이콘이 됩니다. 설정되지 않으면 웹페이지 스크린샷이 사용됩니다.
Android Chrome 홈 화면 바로가기 아이콘으로 192×192 또는 512×512 파비콘이 사용됩니다. theme-color 메타 태그가 설정되면 주소창 배경색도 함께 적용됩니다.
주소창 왼쪽 모든 최신 브라우저의 주소창(URL 입력칸) 왼쪽에 32×32 파비콘이 표시됩니다. 이 부분이 가장 자주 노출되는 위치입니다.
북마크 목록 북마크에 추가했을 때 파비콘 이미지가 저장되어 다음 방문부터 북마크 목록에 표시됩니다. 한 번 저장되면 캐시되므로 이후 변경은 쉽지 않습니다.
주의: 파비콘은 첫 방문 시 브라우저에 캐시됩니다. 파비콘을 변경한 후 브라우저 캐시를 지우지 않으면 이전 이미지가 표시될 수 있습니다. 사용자별로 캐시 시점이 다르므로 모든 사용자 기기에 새 파비콘이 즉시 반영되지는 않습니다.
파비콘 설정을 확인해야 할 시점
새로운 홈페이지를 런칭할 때 · 모든 브라우저와 기기에서 테스트하기
로고나 브랜드 이미지를 변경했을 때 · 파비콘도 함께 업데이트하기
웹사이트를 다른 호스팅으로 이전할 때 · 경로가 변경되지 않았는지 확인하기
사용자가 "탭에 아이콘이 안 나온다"고 피드백할 때 · href 경로와 파일 존재 확인하기
파비콘 하나로 홈페이지 완성도가 한 단계 올라갑니다.
05파비콘 제작·설정 체크리스트
파비콘을 올바르게 제작하고 설정했는지 점검하기 위한 체크리스트입니다.
✓ 로고 또는 이니셜을 포함한 16×16, 32×32 이미지 파일 준비 완료
✓ PNG 또는 ICO 형식으로 저장 · 투명도(알파채널) 적용
✓ 웹 서버의 /images/ 또는 지정된 폴더에 파일 업로드 완료
✓ HTML head에 <link rel="icon"> 태그 추가 · href 경로 정확히 입력
✓ Apple 기기 지원을 위해 180×180 크기의 apple-touch-icon 준비
✓ Chrome 주소창 배경색 설정을 위해 <meta name="theme-color"> 추가
✓ 브라우저 캐시 삭제 후 모든 브라우저·기기에서 표시 확인
✓ 북마크 추가 · 홈 화면 바로가기 생성해서 아이콘 테스트 완료
06자주 묻는 질문
Q파비콘을 설정해도 탭에 나타나지 않는 이유가 뭘까요?
대부분의 경우 브라우저 캐시가 원인입니다. Ctrl+Shift+Delete(Chrome·Edge) 또는 Cmd+Shift+Delete(Safari)로 캐시를 지운 후 사이트를 다시 방문하면 됩니다. 파일 경로(href)도 확인해야 합니다. /images/favicon.png가 실제로 존재하는지 FTP로 확인하세요.
Q파비콘은 여러 개를 설정할 수 있나요?
네, 가능합니다. 다양한 크기와 형식을 각각 link 태그로 연결하면 되는데, 브라우저가 각 상황에서 가장 적합한 파비콘을 자동으로 선택합니다. 기본 32×32, Apple 180×180, Android 192×512 등을 함께 설정하는 것이 표준입니다.
QICO와 PNG 형식, 어느 것을 써야 하나요?
PNG를 추천합니다. 모든 현대 브라우저가 지원하고, 투명도를 표현할 수 있으며, 용량도 작습니다. ICO는 여러 크기를 한 파일에 담을 수 있다는 장점이 있지만, 요즘은 PNG를 표준으로 사용합니다.
Q파비콘을 변경한 후 모든 사용자에게 즉시 반영되나요?
아니요. 각 사용자의 브라우저와 기기에 캐시된 파비콘이 있으면, 캐시를 지울 때까지 이전 이미지가 표시됩니다. 북마크에 저장된 파비콘도 자동 업데이트되지 않습니다. 새로운 파비콘이 반영되려면 최대 몇 주가 소요될 수 있습니다.
QSVG 파비콘은 언제 사용하나요?
SVG는 벡터 이미지이므로 크기에 관계없이 항상 선명합니다. 최신 브라우저(Chrome 96+, Firefox 105+, Safari 16+)에서 지원하므로, 구버전 브라우저도 지원해야 한다면 PNG 폴백을 함께 설정하세요. 단순한 로고나 이니셜에는 SVG가 효율적입니다.
Qtheme-color는 무엇인가요?
<meta name="theme-color" content="#1D5FA8">는 모바일 브라우저(특히 Chrome, Edge)의 주소창 배경색을 지정합니다. 회사 브랜드 컬러를 설정하면 모바일 환경에서 더욱 브랜드스럽게 보입니다. 데스크톱 브라우저에는 영향을 주지 않습니다.
Q파비콘 제작을 외주 업체에 맡길 수 있나요?
당연히 가능합니다. 디자이너나 웹에이전시에 "32×32 PNG 파비콘" 또는 "favicon 제작"을 요청하면 됩니다. 투명도 지원, 작은 크기에서도 명확한 로고 표현, 다양한 브라우저 배경색에서 잘 보이는지 확인이 필요합니다. 도도컴즈는 홈페이지 제작 시 파비콘 제작·설정을 함께 진행합니다.
Q파비콘이 SEO에 영향을 주나요?
직접적인 순위 신호는 아니지만, 파비콘이 있는 사이트가 더 전문적으로 보이고 사용자 신뢰도가 높습니다. 또한 검색 결과나 북마크에서 시각적 차별성을 제공하므로 클릭률(CTR) 향상에는 도움이 될 수 있습니다.
Qfavicon.ico는 꼭 루트에 있어야 하나요?
예전에는 그랬지만, 지금은 HTML link 태그로 경로를 명시적으로 지정하므로 상관없습니다. /images/favicon.png처럼 언제든 원하는 경로에 저장할 수 있습니다. 다만 레거시 브라우저를 위해 /favicon.ico를 루트에 유지하는 것도 좋은 관례입니다.
Q파비콘은 모든 페이지에서 같아야 하나요?
네, 파비콘은 전사적(도메인 전체)으로 통일하는 것이 표준입니다. 사용자가 여러 페이지를 북마크했을 때, 모두 같은 파비콘으로 사이트를 구분할 수 있기 때문입니다. 페이지마다 다른 파비콘을 사용하면 혼란스러워집니다.
Q기존 홈페이지에 파비콘을 추가할 수 있나요?
물론 가능합니다. HTML 파일의 head에 link 태그만 추가하면 됩니다. 서버에 새로운 파비콘 이미지 파일을 업로드하고, HTML을 수정한 후 배포하면 신규 방문자부터 파비콘이 표시됩니다. 기존 방문자는 캐시를 지워야 볼 수 있습니다. 도도컴즈에서는 기존 사이트에 파비콘 추가 작업도 진행합니다.
Q병원 홈페이지에는 어떤 파비콘이 어울릴까요?
병원 로고(전체 또는 약자), 의료 심볼(예: 의료용 더하기 기호 · 십자), 병원명 이니셜 등이 적합합니다. 작은 크기에서도 명확하게 인식될 수 있어야 하므로, 복잡한 디자인보다는 단순하고 선명한 이미지를 추천합니다. 병원 CI(Corporate Identity)가 있다면 그것을 축소해서 사용하면 최고입니다.
파비콘 | 작은 아이콘, 큰 완성도
파비콘은 홈페이지의 첫 인상을 결정하는 작은 요소입니다. 올바르게 설정되면 브라우저 탭·주소창·북마크에서 브랜드를 강화하고, 사용자 신뢰도를 높입니다. 본 가이드를 참고해 홈페이지에 파비콘을 적용해 보시기 바랍니다.
