# 파비콘을 모든 기기와 검색엔진에 나오도록 하는 방법 (2026)
> Canonical: https://oaty.lol/posts/%ED%8C%8C%EB%B9%84%EC%BD%98%EC%9D%84-%EB%AA%A8%EB%93%A0-%EA%B8%B0%EA%B8%B0%EC%99%80-%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84%EC%97%90-%EB%82%98%EC%98%A4%EB%8F%84%EB%A1%9D-%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-2026
> Markdown alternate: https://oaty.lol/posts/%ED%8C%8C%EB%B9%84%EC%BD%98%EC%9D%84-%EB%AA%A8%EB%93%A0-%EA%B8%B0%EA%B8%B0%EC%99%80-%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84%EC%97%90-%EB%82%98%EC%98%A4%EB%8F%84%EB%A1%9D-%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-2026.md
> Published: 2026-05-12T11:13:29.082Z
> Category: Web
> Tags: SEO
2026년 기준으로 모던 브라우저, 구글·네이버·빙 검색, iOS/Android 홈 화면, Windows PWA/Edge 환경까지 가장 안정적으로 커버할 수 파비콘 설정 방법에 대해 알아보자.
아래처럼 구성하면 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
```
그리고 ``에는 이렇게 넣는 것을 추천합니다.
```HTML
```
`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` 예시
```JSON
{
"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만 믿지 말고 ``도 반드시 함께 둬야 합니다.
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
```HTML
```
또는 SVG/PNG도 가능하지만, Google 검색 결과 안정성만 보면 `/favicon.ico`를 루트에 두는 것이 가장 무난합니다. Google은 `rel="icon"`, `shortcut icon`, `apple-touch-icon`, `apple-touch-icon-precomposed`를 인식하며, 파비콘 URL은 상대 경로나 절대 경로 모두 가능합니다.
주의할 점:
```HTML
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/네이버만큼 명확하게 파비콘 전용 페이지로 정리되어 있지는 않지만, 실무적으로는 다음 조합이 가장 안전합니다.
```
```
```
```
그리고 `/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**을 요구합니다.
```HTML
```
Apple 문서는 pinned tab 아이콘용 SVG를 투명 배경의 100% 검정 벡터로 만들고, `mask-icon` 링크를 추가하라고 안내합니다. 또한 SVG는 단일 레이어여야 하며 `viewBox="0 0 16 16"`을 요구합니다.
개인 블로그라면 필수는 아니지만, “애플까지 최대한 깔끔하게”가 목표라면 추가하는 것이 좋습니다.
## 8. 최종 추천 코드
개인 블로그/콘텐츠 사이트 기준으로는 아래가 가장 균형 좋습니다.
```HTML
```
네이버까지 더 보수적으로 맞추고 싶으면 이렇게 절대 URL 버전도 괜찮습니다.
```HTML
```
## 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이 담당하게 만드는 구조가 가장 안전합니다.
## 10. 출처
1.
2.
3.
4.
5.
6.
7.
8.
9.