파비콘을 모든 기기와 검색엔진에 나오도록 하는 방법 (2026)

아래처럼 구성하면 2026년 기준으로 모던 브라우저, 구글·네이버·빙 검색, iOS/Android 홈 화면, Windows PWA/Edge 환경까지 가장 안정적으로 커버할 수 있습니다. 단, 검색엔진은 가이드라인을 지켜도 “반드시” 노출을 보장하지는 않습니다. Google도 모든 조건을 만족해도 검색 결과에 파비콘이 표시되지 않을 수 있다고 명시합니다.

1. 결론: 추천 파일 세트

public/ 루트에 아래 파일들을 둡니다.

/public
  favicon.ico
  favicon.svg
  apple-touch-icon.png
  icon-192.png
  icon-512.png
  icon-512-maskable.png
  site.webmanifest
  safari-pinned-tab.svg        선택

가장 중요한 파일은 이 5개입니다.

/favicon.ico
/favicon.svg
/apple-touch-icon.png
/icon-192.png
/icon-512-maskable.png

그리고 <head>에는 이렇게 넣는 것을 추천합니다.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

<!-- Safari pinned tab까지 챙길 경우 -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111111">

favicon.ico를 먼저 두고, 그다음 favicon.svg를 두는 패턴은 web.dev의 적응형 파비콘 가이드와도 맞습니다.

2. 각 파일의 권장 규격

파일	권장 크기	용도
`favicon.ico`	16×16, 32×32, 48×48 포함	구형 브라우저, 검색엔진, Bing/Windows 계열 안정성
`favicon.svg`	정사각 viewBox	모던 브라우저 탭, 다크모드 대응 가능
`apple-touch-icon.png`	180×180	iPhone/iPad 홈 화면
`icon-192.png`	192×192	Android/Chrome/PWA 기본 아이콘
`icon-512.png`	512×512	PWA, 고해상도 아이콘
`icon-512-maskable.png`	512×512	Android adaptive/maskable icon
`safari-pinned-tab.svg`	단색 SVG	Safari pinned tab

Google 검색 기준으로는 파비콘이 정사각형, 최소 8×8px 이상, 권장 48×48px 초과, 안정적인 URL이어야 하며, Googlebot과 Googlebot-Image가 홈페이지와 파비콘 파일을 크롤링할 수 있어야 합니다.

네이버는 검색 결과 파비콘 기준으로 정사각형, 최소 16px 이상, 수집 가능한 URL, 자주 바뀌지 않는 URL을 요구하며, ICO/PNG/GIF/JPEG/APNG/SVG 등을 지원한다고 안내합니다. 특히 네이버는 href에 절대 경로 사용을 권장합니다.

3. `site.webmanifest` 예시

{
  "name": "Oaty",
  "short_name": "Oaty",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512-maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Manifest의 icons는 웹앱을 여러 기기·OS·화면 크기에서 대표하는 이미지 목록이고, src, sizes, type, purpose를 통해 브라우저/OS가 적절한 아이콘을 고르게 됩니다. MDN은 icons가 일부 주요 브라우저에서 완전한 Baseline은 아니라고 설명하므로, manifest만 믿지 말고 <link rel="icon">도 반드시 함께 둬야 합니다.

Windows/Edge PWA까지 신경 쓴다면 최소 512×512 아이콘이 기본 베이스가 되고, 더 정교하게는 44×44, 71×71, 150×150, 310×150, 310×310, 50×50, 620×300 PNG 타일 이미지를 manifest에 추가할 수 있습니다. 다만 개인 블로그라면 보통 512×512 + maskable 정도면 충분합니다.

4. 검색엔진별 체크포인트

Google

<link rel="icon" href="/favicon.ico">

또는 SVG/PNG도 가능하지만, Google 검색 결과 안정성만 보면 /favicon.ico를 루트에 두는 것이 가장 무난합니다. Google은 rel="icon", shortcut icon, apple-touch-icon, apple-touch-icon-precomposed를 인식하며, 파비콘 URL은 상대 경로나 절대 경로 모두 가능합니다.

주의할 점:

https://example.com/      → 하나의 파비콘
https://blog.example.com/ → 별도 파비콘 가능
https://example.com/blog/ → 하위 디렉터리별 별도 파비콘은 Google 검색 기준 지원 안 됨

Google은 사이트당, 정확히는 호스트명당 하나의 파비콘을 지원합니다.

네이버

네이버까지 확실히 챙기려면 절대 URL을 써도 좋습니다.

네이버 가이드는 shortcut icon, icon, apple-touch-icon, apple-touch-icon-precomposed를 지원 rel 값으로 안내합니다.

Bing

Bing은 공식 문서가 Google/네이버만큼 명확하게 파비콘 전용 페이지로 정리되어 있지는 않지만, 실무적으로는 다음 조합이 가장 안전합니다.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

그리고 /favicon.ico를 사이트 루트에 실제로 배치하세요. Bing 계열은 .ico 루트 파일을 잘 찾는 편이라, SVG만 두는 것보다 ICO를 함께 두는 것이 안전합니다.

다음/카카오

다음 검색용 파비콘 전용 공식 가이드는 Google·네이버처럼 공개적으로 잘 정리되어 있지 않습니다. 그래서 다음은 별도 마크업보다 웹표준 favicon + 루트 /favicon.ico + 크롤러 접근 허용 방식으로 맞추는 것이 현실적인 최선입니다.

5. SEO 관점에서 중요한 것

파비콘은 직접적인 랭킹 요소라기보다 검색 결과 식별성, 브랜드 신뢰도, 클릭 전 인지성에 영향을 주는 요소로 보는 게 맞습니다.

반드시 지켜야 할 것:

1. 루트에 /favicon.ico 배치
2. 모든 파비콘 URL 200 OK
3. robots.txt에서 차단 금지
4. noindex 페이지가 아니라 홈페이지 head에 포함
5. URL 자주 변경 금지
6. 16px/32px에서도 알아볼 수 있는 단순한 디자인
7. 배경 투명 또는 명확한 대비
8. CDN 사용 시 Googlebot, NaverBot, Bingbot 접근 허용
9. 파비콘 교체 후 Search Console / 네이버 서치어드바이저에서 재수집 요청

Google은 변경된 파비콘을 다시 크롤링하고 처리하는 데 며칠에서 몇 주가 걸릴 수 있다고 안내합니다. 네이버도 같은 URL의 이미지를 교체해도 재수집이 필요해 반영에 시간이 걸릴 수 있다고 설명합니다.

6. 디자인 제작 기준

파비콘은 로고를 그대로 축소하면 실패하는 경우가 많습니다. 16×16 또는 검색 결과의 작은 크기에서도 보여야 하므로, 아래처럼 만드는 게 좋습니다.

좋음:
- 단순한 심볼
- 굵은 획
- 높은 대비
- 정사각형 안에서 중앙 정렬
- 작은 크기에서도 한 덩어리로 식별 가능

나쁨:
- 얇은 선
- 긴 텍스트
- 복잡한 일러스트
- 그라데이션 과다
- 16px에서 뭉개지는 로고

SVG 파비콘은 prefers-color-scheme 미디어 쿼리로 라이트/다크 모드 대응도 가능합니다. web.dev는 SVG 내부 스타일과 @media (prefers-color-scheme: dark)를 이용한 적응형 파비콘 방식을 설명합니다.

7. Safari pinned tab까지 챙기는 경우

Safari pinned tab은 일반 컬러 SVG가 아니라 단색 SVG mask icon을 요구합니다.

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111111">

Apple 문서는 pinned tab 아이콘용 SVG를 투명 배경의 100% 검정 벡터로 만들고, mask-icon 링크를 추가하라고 안내합니다. 또한 SVG는 단일 레이어여야 하며 viewBox="0 0 16 16"을 요구합니다.

개인 블로그라면 필수는 아니지만, “애플까지 최대한 깔끔하게”가 목표라면 추가하는 것이 좋습니다.

8. 최종 추천 코드

개인 블로그/콘텐츠 사이트 기준으로는 아래가 가장 균형 좋습니다.

<!-- Basic favicon -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- iOS -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- PWA / Android / Windows -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

<!-- Safari pinned tab, optional -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111111">

네이버까지 더 보수적으로 맞추고 싶으면 이렇게 절대 URL 버전도 괜찮습니다.

<link rel="shortcut icon" href="https://example.com/favicon.ico">
<link rel="icon" href="https://example.com/favicon.ico" sizes="any">
<link rel="icon" href="https://example.com/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://example.com/apple-touch-icon.png">
<link rel="manifest" href="https://example.com/site.webmanifest">

9. 배포 후 확인 체크리스트

https://example.com/favicon.ico              200 OK
https://example.com/favicon.svg              200 OK
https://example.com/apple-touch-icon.png     200 OK
https://example.com/site.webmanifest         200 OK

Content-Type:
favicon.ico               image/x-icon 또는 image/vnd.microsoft.icon
favicon.svg               image/svg+xml
apple-touch-icon.png      image/png
site.webmanifest          application/manifest+json 또는 application/json

robots.txt에서 아래처럼 막고 있으면 안 됩니다.

User-agent: *
Disallow: /favicon.ico
Disallow: /icon-192.png
Disallow: /site.webmanifest

정리하면, 2026년 기준 최선의 조합은 /favicon.ico + /favicon.svg + apple-touch-icon.png + site.webmanifest + 192/512/maskable PNG입니다. 검색엔진 노출 안정성은 ICO가 담당하고, 모던 브라우저는 SVG가 담당하고, 모바일/OS 통합은 manifest와 apple-touch-icon이 담당하게 만드는 구조가 가장 안전합니다.