파비콘 만들기와 사이즈: 필요한 파일·태그와 구글·네이버 요건

파비콘은 브라우저 탭, 북마크, 스마트폰 홈 화면, 그리고 구글·네이버 검색 결과에서 사이트 이름 옆에 보이는 작은 아이콘입니다. 생성기 사이트에 로고를 올리면 파일은 금방 나오지만, 어떤 파일을 어떤 태그로 넣어야 검색 결과에도 제대로 뜨는지는 따로 확인해야 합니다. 이 가이드는 홈페이지 담당자를 위해 필요한 파일 세트와 사이즈, HTML 태그, 구글과 네이버의 현재 요건, 워드프레스 설정, 흔한 실수를 2026년 10월 기준 공식 문서로 정리했습니다.

파비콘이란? 어디에 보이나요

파비콘(favicon)은 웹사이트를 대표하는 작은 정사각형 아이콘으로, 「favorite icon」의 줄임말입니다. 지금은 쓰이는 곳이 늘어 아래 네 곳을 모두 고려해 만들어야 합니다.

• 브라우저 탭과 북마크: 16~32px 크기로 가장 작게 보입니다.
• 검색 결과: 구글과 네이버가 사이트 이름 옆에 아이콘을 표시합니다. 검색 결과에서 사이트를 구분하는 단서가 됩니다.
• 스마트폰 홈 화면: 아이폰에서 「홈 화면에 추가」를 누르면 apple-touch-icon이 앱 아이콘처럼 쓰입니다.
• 안드로이드·설치형 웹앱: 웹 앱 매니페스트(manifest)에 지정한 192px, 512px 아이콘이 쓰입니다.

파비콘 사이즈: 필요한 파일 세트와 태그

기업 홈페이지에 권장하는 기본 세트는 다섯 파일입니다. 원본은 512×512px 이상 정사각형으로 한 장 만들고, 거기서 아래 크기로 내보내면 됩니다.

web.dev 문서는 크로미움 계열 브라우저에 최소 192×192px과 512×512px 아이콘을 매니페스트에 넣으라고 안내합니다. apple-touch-icon 180×180px은 애플의 웹 앱 설정 문서 예시와 현재 아이폰 해상도(60pt×3배)에 맞춘 값으로, 한 장만 넣으면 작은 크기는 iOS가 줄여서 씁니다.

HTML 태그 넣는 법

파비콘은 모든 페이지의 <head> 안에 <link> 태그로 지정하고, 구글 기준으로는 최소한 홈페이지 head에 들어가 있어야 합니다. 국내 기업 홈페이지라면 구글과 네이버 요건을 함께 만족하도록 아래처럼 쓰는 방식을 권장합니다.

<link rel="shortcut icon" href="https://www.example.co.kr/favicon.ico">
<link rel="icon" type="image/png" sizes="96x96" href="https://www.example.co.kr/favicon-96x96.png">
<link rel="apple-touch-icon" href="https://www.example.co.kr/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

이렇게 쓰는 이유는 세 가지입니다.

• 절대 경로: 네이버 가이드는 파비콘 href에 상대 경로가 아닌 절대 경로를 쓰라고 안내합니다. 구글은 상대·절대 경로를 모두 지원합니다.
• rel 값마다 하나씩: 네이버 가이드는 동일한 rel 속성값이 여러 개 있으면 반영되지 않는 원인이 될 수 있다며 한 개만 두라고 안내합니다. shortcut icon, icon, apple-touch-icon을 각각 하나씩만 씁니다.
• 검색엔진이 읽는 형식: 구글이 지원한다고 밝힌 형식은 BMP, GIF, ICO, PNG, JPEG, PPM, TIFF입니다. ICO와 PNG를 쓰면 두 검색엔진 모두에서 안전합니다.

매니페스트 파일(site.webmanifest)에는 아이콘을 아래처럼 적습니다.

{
  "name": "회사명",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

구글·네이버 검색 결과 파비콘 요건

구글 검색 결과 요건

구글 검색 결과에 파비콘이 뜨려면 홈페이지 head에 파비콘 link 태그가 있고, 파비콘이 정사각형(1:1)이며 최소 8×8px 이상이어야 합니다. 구글 검색 센터 문서(2026년 8월 28일 갱신)가 밝힌 요건은 다음과 같습니다.

• 크기: 정사각형, 최소 8×8px. 여러 화면에서 보기 좋도록 48×48px보다 큰 파비콘을 권장합니다.
• 형식: BMP, GIF, ICO, PNG, JPEG, PPM, TIFF.
• 크롤링: Googlebot-Image가 파비콘 파일을, Googlebot이 홈페이지를 크롤링할 수 있어야 합니다. robots.txt로 막으면 안 됩니다.
• 안정적인 URL: 파비콘 URL을 자주 바꾸지 않습니다.
• 사이트당 하나: 호스트 이름 단위로 하나만 지원합니다. example.com과 news.example.com은 각각 가질 수 있지만 example.com/news 같은 하위 디렉터리는 따로 지정할 수 없습니다.
• 브랜드 대표성: 사이트 브랜드를 시각적으로 나타내야 하며, 부적절한 이미지는 기본 아이콘으로 대체됩니다.

파비콘을 바꾼 뒤 반영까지는 며칠에서 몇 주가 걸릴 수 있고, 서치 콘솔의 URL 검사 도구로 홈페이지 색인을 요청할 수 있습니다. URL 검사 사용법은 구글 서치콘솔 사용법 핵심 기능별 가이드를 참고하세요. 모든 요건을 지켜도 표시가 보장되지는 않는다는 점도 문서에 명시되어 있습니다.

네이버 검색 결과 요건

네이버 검색 결과에 파비콘이 뜨려면 너비와 높이가 같은 정사각형이고 최소 16px 이상이어야 하며, 네이버는 32px 이상을 권장합니다. 네이버 서치어드바이저 파비콘 가이드의 내용을 정리하면 다음과 같습니다.

• 형식: ICO, PNG, GIF, 움직이는 GIF, JPEG, APNG, SVG를 지원하며 배경을 투명으로 지정할 수 있습니다.
• 마크업: head 안 link 태그, 절대 경로. rel은 shortcut icon, icon, apple-touch-icon, apple-touch-icon-precomposed 중 하나를 씁니다.
• 우선순위: 마크업이 여러 개면 shortcut icon, icon, 기본 아이콘(호스트/favicon.ico), apple-touch-icon, apple-touch-icon-precomposed 순으로 처리합니다.
• 수집: 네이버 검색 로봇이 파비콘을 수집할 수 있어야 하고, 파비콘 수집에도 로봇 방문이 따로 필요해 반영에 시간이 걸릴 수 있습니다.
• URL 유지: URL과 이미지를 자주 바꾸면 업데이트가 늦어지거나 검색 결과의 파비콘이 일정하지 않을 수 있습니다.

네이버에 사이트를 아직 등록하지 않았다면 네이버 웹마스터 도구(서치어드바이저) 등록 방법 단계별 가이드를 먼저 진행하세요.

워드프레스 사이트 아이콘 설정

워드프레스에서는 파일을 직접 올리지 않고 관리자 화면의 「사이트 아이콘」 기능을 쓰는 것이 기본입니다. 워드프레스 6.5부터는 설정 > 일반 > 사이트 아이콘에서 이미지를 선택할 수 있고, 클래식 테마는 외모 > 사용자 정의하기 > 사이트 아이덴티티에서도 설정할 수 있습니다.

1. 512×512px 이상의 정사각형 PNG를 준비합니다. 워드프레스 코어는 사이트 아이콘 최소 크기를 512px로 정하고 있어 그보다 작으면 쓸 수 없고, 정사각형이 아니면 자르기 화면이 나옵니다.
2. 사이트 아이콘에서 이미지를 선택하고 저장합니다.
3. 워드프레스가 32px·192px 아이콘(rel=”icon”), 180px apple-touch-icon, 270px 타일 이미지를 자동으로 만들고 태그를 출력합니다.

파비콘 만들기 순서

1. 마크 정하기: 로고 심볼 또는 첫 글자 마크를 정합니다. 세부 장식은 16px에서 사라지므로 단순한 형태를 고릅니다.
2. 원본 제작: 512×512px 정사각형 캔버스에 상하좌우 여백을 조금 두고 배치합니다. 여백 없이 꽉 채우면 원형으로 잘리는 화면에서 모서리가 잘립니다.
3. 배경 결정: 탭용은 투명 배경도 괜찮지만, 다크 모드 탭에서 어두운 마크가 사라지지 않는지 확인합니다. 홈 화면용 apple-touch-icon과 매니페스트 아이콘은 배경색을 채워 두는 편이 안전합니다.
4. 파일 내보내기: 생성기 사이트나 디자인 툴로 ICO(16·32·48), PNG 96, PNG 180, PNG 192·512를 만듭니다.
5. 업로드와 태그: 사이트 루트에 올리고 head에 태그를 넣습니다.
6. 검수: 브라우저 탭, 아이폰 홈 화면 추가, 페이지 소스의 태그 개수, robots.txt 차단 여부를 확인합니다.

파비콘 파일은 용량이 작아야 합니다. PNG는 압축 도구를 한 번 거치고, 원본 512px 이미지를 탭 아이콘으로 그대로 쓰지 않도록 하세요. 이미지 용량 관리는 이미지 최적화 방법 총정리에, 공유 미리보기 이미지 크기는 OG태그 이미지 사이즈 가이드에 정리되어 있습니다.

흔한 실수와 해결법

• 바꿨는데 예전 아이콘이 보입니다: 브라우저가 파비콘을 오래 캐시하기 때문입니다. 강력 새로고침이나 시크릿 창으로 확인하고, 방문자에게 바로 반영하려면 파일 이름을 바꾸거나 주소 뒤에 ?v=2 같은 버전 표시를 붙입니다. 다만 구글·네이버 모두 URL을 자주 바꾸지 말라고 하므로, 바꾼 뒤에는 그 주소를 유지하세요.
• 검색 결과에 기본 지구본 아이콘이 뜹니다: 홈페이지 head에 태그가 있는지, robots.txt가 파비콘 경로나 이미지 폴더를 막고 있지 않은지, 이미지가 정사각형인지 확인합니다.
• 투명 배경이 다크 모드에서 사라집니다: 검은 마크에 투명 배경이면 어두운 탭에서 보이지 않습니다. 마크에 밝은 테두리를 넣거나 배경색을 채웁니다.
• 태그가 중복되어 있습니다: 테마, 플러그인, 직접 넣은 코드가 각각 태그를 출력하는 경우입니다. 페이지 소스에서 「icon」을 검색해 하나로 정리합니다.
• 하위 폴더 사이트에 다른 파비콘을 넣었습니다: 구글은 호스트 이름당 하나만 지원하므로 example.com/brand 같은 하위 디렉터리의 파비콘은 검색 결과에 따로 쓰이지 않습니다.
• http 주소로 넣었습니다: https 사이트에서 http 파비콘을 쓰면 혼합 콘텐츠로 차단될 수 있습니다. 절대 경로는 https로 적습니다.

자주 묻는 질문

파비콘을 하나만 만든다면 어떤 크기가 좋나요?

최소 구성이라면 사이트 루트의 favicon.ico(16·32·48px 묶음)와 96px 이상 PNG 하나입니다. 다만 아이폰 홈 화면 아이콘과 안드로이드 아이콘까지 생각하면 180px, 192px, 512px PNG를 함께 두는 것이 좋습니다.

파비콘을 바꿨는데 검색 결과에는 예전 것이 나옵니다.

검색엔진이 파비콘을 다시 수집해야 반영됩니다. 구글은 며칠에서 몇 주가 걸릴 수 있다고 안내하고, 서치 콘솔 URL 검사에서 홈페이지 색인을 요청할 수 있습니다. 네이버도 로봇이 다시 방문해야 하며 같은 파일 이름으로 바꾸면 캐시 때문에 늦어질 수 있다고 안내합니다.

SVG 하나만 쓰면 안 되나요?

최신 브라우저 탭에서는 SVG만으로도 표시되지만, 구글 검색이 밝힌 지원 형식에는 SVG가 없고 아이폰 홈 화면은 PNG를 씁니다. SVG는 보조로 두고 ICO·PNG 세트를 기본으로 갖추세요.

파비콘이 검색 순위에 영향을 주나요?

구글과 네이버 문서는 파비콘을 순위 요소로 설명하지 않습니다. 검색 결과에서 사이트를 알아보게 하는 표시 요소로 보고, 요건을 지켜 정확히 노출되게 하는 데 집중하면 됩니다.

웹닷은 파비콘 파일 세트, 매니페스트, 구글·네이버 요건에 맞춘 head 태그를 메타태그·OG 이미지와 함께 빌드 단계에서 처리합니다.

정리

파비콘은 작지만 브라우저, 검색 결과, 홈 화면에서 회사를 대표합니다. 원본 한 장을 잘 만들고, 쓰이는 곳별 파일과 태그를 갖춘 뒤 URL을 바꾸지 않고 유지하는 것이 핵심입니다.