파비콘 만들기: 기기별 필요한 크기 총정리

파비콘(favicon)은 "favorite icon"에서 나온 말로, 본래는 브라우저가 북마크와 함께 저장하던 아이콘을 가리켰습니다. 지금은 쓰임새가 훨씬 넓어졌습니다. 브라우저 탭과 주소 표시줄, 바탕 화면 바로가기, iOS·Android의 홈 화면, 구글 검색 결과, 그리고 PWA(프로그레시브 웹 앱)의 아이콘으로까지 쓰이죠. 그리고 상황마다 필요한 크기가 다릅니다.

가장 흔한 실수는 16×16 픽셀짜리 favicon.ico 하나만 만들어 놓고 끝냈다고 생각하는 것입니다. 그러면 고해상도 모니터나 아이폰에서 아이콘이 뻔까지게 보입니다. 답은 필요한 크기를 한 번에 다 만드는 것입니다. 복잡해 보이지만 도구만 있으면 몇 초면 됩니다.

.ico 파일이란 무엇이고 언제 쓰나

.ico는 90년대에 마이크로소프트가 만든 원조 파비콘 형식입니다. 특이한 점은 파일 하나 안에 여러 크기를 담을 수 있다는 것입니다. 예를 들어 16×16과 32×32를 동시에 넣을 수 있고, 브라우저가 상황에 맞는 크기를 골라 씁니다.

2026년에도 favicon.ico가 여전히 필요한 이유는 분명합니다. 구버전 브라우저와 일부 검색 봇은 사이트 루트의 /favicon.ico를 자동으로 찾아갑니다. 파일이 없으면 서버 로그에 불필요한 404 오류가 쌓입니다. 그러니 나머지를 전부 PNG로 쓴다 해도 루트에 favicon.ico 하나는 두는 편이 좋습니다.

파비콘 크기 전체 표

2026년 기준으로 완전한 파비콘 세트가 커버해야 할 크기 목록입니다.

크기	형식	사용되는 곳
16 × 16 px	.ico / PNG	브라우저 탭(기본)
32 × 32 px	.ico / PNG	Windows 바탕 바로가기, 고밀도 화면의 탭
48 × 48 px	.ico / PNG	Windows 탐색기 바로가기
57 × 57 px	PNG	아이폰(iOS 1–6, 일반 해상도)
60 × 60 px	PNG	아이폰(iOS 7 이상, 일반 해상도)
72 × 72 px	PNG	아이패드(iOS 1–6, 일반 해상도)
76 × 76 px	PNG	아이패드(iOS 7 이상, 일반 해상도)
96 × 96 px	PNG	Chrome 바로가기(Android)
114 × 114 px	PNG	아이폰 레티나(iOS 1–6)
120 × 120 px	PNG	아이폰 레티나(iOS 7 이상)
144 × 144 px	PNG	아이패드 레티나(iOS 1–6), Windows 8 타일
152 × 152 px	PNG	아이패드 레티나(iOS 7 이상)
167 × 167 px	PNG	아이패드 프로(iOS 9 이상)
180 × 180 px	PNG	아이폰 6 Plus 이후 기기
192 × 192 px	PNG	Android Chrome, PWA(manifest.json)
512 × 512 px	PNG	Android Chrome 스플래시 화면, 고해상도 PWA

💡 다행한 소식: 이 크기를 일일이 만들 필요는 없습니다. ImageTools의 파비콘 만들기 도구는 이미지 한 장만 올리면 모든 파일을 자동으로 만들어 줍니다. 여러 크기가 들어간 .ico와 모든 PNG가 담긴 ZIP까지 함께입니다.

어떤 이미지를 원본으로 쓰면 좋을까

원본 이미지는 최소 512×512 픽셀은 되어야 합니다. 이게 필요한 최대 크기이고, 큰 이미지에서 줄여야 작은 크기도 깔끔하게 나옵니다. 작은 이미지로 시작하면 큰 크기에서 아이콘이 뻔썻해집니다.

올릴 수 있는 형식

배경이 투명한 PNG — 가장 좋은 선택입니다. 탭이나 홈 화면의 배경색이 무엇이든 깔끔하게 보입니다.
배경색이 있는 PNG — 그 색이 사이트 디자인과 어울린다면 충분합니다.
JPG — 올릴 수는 있지만 투명도를 지원하지 않습니다.
SVG — 가지고 있다면 가장 이상적입니다. 벡터라 어떤 크기로 바꿔도 손실이 없습니다.

파비콘 디자인 요령

파비콘은 정말 좀은 공간입니다. 16×16 버전은 전체 픽셀이 256개뿐이죠. 그래서 많은 사람이 놓치는 디자인 제약이 생깁니다.

브랜드에서 가장 단순한 요소를 고르세요. 전체 로고는 16px에서 거의 안 보입니다. 머릿글자 하나, 심볼 하나, 혹은 단순화한 아이콘이 낫습니다.
가는 글씨는 피하세요. 32px 아래에서는 어떤 글자든 읽힐 수가 없습니다.
대비를 강하게 가져가세요. 파비콘은 수십 개의 다른 탭과 경쟁합니다. 대비가 약하면 있는 줄도 모르게 묻힙니다.
때로는 투명 배경보다 단색 배경이 낫습니다. 밝은 테마와 어두운 테마 양쪽에서 모두 아이콘이 살아남기 때문입니다.
끝내기 전에 반드시 16px로 확인하세요. 512px에서 멋진 디자인이 16px에서는 뭔지 알아보기 어려울 수 있습니다.

모든 크기를 한 번에 만들어 보세요

이미지를 올리면 .ico와 브라우저·아이폰·Android·PWA용 PNG가 모두 들어간 ZIP을 받을 수 있습니다. 무료이고 가입도 필요 없습니다.

무료로 파비콘 만들기

사이트에 파비콘 적용하기

파일을 만들었다면 HTML의 <head>에서 연결해 줘야 합니다. 2026년 기준 권장 코드는 다음과 같습니다.

<!-- 브라우저용 기본 파비콘 -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon(아이폰·아이패드) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android 및 PWA -->
<link rel="manifest" href="/site.webmanifest">

favicon.ico는 사이트 루트, 즉 index.html과 같은 폴더에 있어야 합니다. 나머지 PNG는 HTML의 경로만 맞다면 루트든 하위 폴더든 상관없습니다.

site.webmanifest 파일

PWA를 쓰거나 Android Chrome이 아이콘을 제대로 인식하게 하려면 루트에 site.webmanifest 파일이 있어야 합니다. 기본 내용은 다음과 같습니다.

{
  "name": "사이트 이름",
  "short_name": "사이트",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

📦 파비콘 만들기의 ZIP에는 경로가 미리 설정된 site.webmanifest가 함께 들어 있습니다. 압축을 풀고 사이트 루트에 올리기만 하면 됩니다.

주요 플랫폼별 설정 방법

WordPress

워드프레스에서는 파비콘을 "사이트 아이콘"이라고 부릅니다. 외모 → 사용자 정의 하기 → 사이트 아이덴티티로 들어가 "사이트 아이콘 선택"을 누르면 됩니다. 올린 이미지에서 필요한 크기는 워드프레스가 알아서 만들어 주므로, 512×512 픽셀 이상의 정사각형 이미지만 준비하면 됩니다.

Shopify

온라인 스토어 → 기본 설정으로 들어가 "스토어 아이콘" 항목을 찾아, 512×512 픽셀 이상의 정사각형 PNG나 JPG를 올립니다.

Wix

설정 → 브랜드 아이덴티티 → 파비콘에서 설정합니다. 정사각형 PNG나 JPG를 쓰세요.

Squarespace

Design → Browser Icon 항목에서 설정합니다. 100×100 픽셀 정사각형 PNG를 권장하며, 나머지는 Squarespace가 처리합니다.

순수 HTML/CSS 또는 프레임워크

만든 파일을 프로젝트 루트에 넣고, 위에서 본 <link> 태그를 각 페이지의 <head>에 추가합니다. Next.js나 Nuxt 같은 프레임워크라면 공통 레이아웃에 한 번만 넣으면 됩니다.

제대로 적용됐는지 확인하기

적용한 뒤 브라우저에서 사이트를 열어 탭에 아이콘이 뜨는지 보세요. 바로 안 보인다면 다음을 시도해 보세요.

브라우저 캐시를 비웁니다(Windows는 Ctrl+Shift+R, Mac은 Cmd+Shift+R).
캐시를 쓰지 않는 시크릿 모드 창에서 엽니다.
잠시 기다립니다. 브라우저마다 파비콘 캐시 유지 시간이 다릅니다.
HTML에 적은 경로가 맞는지, 그리고 파일이 서버에 실제로 있는지 확인합니다.

자주 묻는 질문

파비콘을 만들 때 원본 이미지는 최소 얼마여야 하나요?

512×512 픽셀입니다. Android PWA 스플래시 화면에 쓰이는 가장 큰 크기가 이만큼이고, 여기서 줄여야 작은 크기까지 모두 선명하게 나옵니다. 더 작은 이미지로 시작하면 큰 크기에서 아이콘이 뻔썻해집니다.

파비콘은 PNG와 ICO 중 어느 쪽이 나을까요?

둘은 서로를 보완하는 관계입니다. .ico는 구버전 브라우저와 검색 봇 호환을 위해 루트에 두고, PNG는 Apple Touch Icon과 Android Chrome, PWA에 씁니다. 이쪽은 .ico를 받지 않기 때문입니다. 권장 방식은 둘 다 갖추는 것입니다. 루트에 favicon.ico를 두고, HTML의 <link> 태그로 PNG를 연결하세요.

이 크기를 정말 전부 만들어야 하나요?

대부분의 사이트는 favicon.ico(16+32px), favicon-32x32.png, apple-touch-icon.png(180×180), android-chrome-192x192.png 네 개면 실상 충분합니다. 이면 최신 브라우저와 아이폰, Android가 모두 커버됩니다. 나머지는 구버전 iOS나 Windows 타일 같은 특수한 경우용입니다. 생성기가 어차피 한 번에 만들어 주니, 전체 세트를 갖춰 두어서 손해 볼 것은 없습니다.

구글 검색 결과에 파비콘이 안 나옵니다

구글이 파비콘을 수집해 검색 결과에 반영하기까지는 시간이 걸립니다. 보통 공개 후 며칠에서 몇 주 정도입니다. 표시되려면 세 가지 조건이 필요합니다. 파비콘이 공개적으로 접근 가능해야 하고(robots.txt로 막힌 상태가 아니어야 하고), 루트에 favicon.ico가 있거나 HTML에 유효한 <link rel="icon"> 태그가 있어야 하며, Googlebot이 해당 페이지를 크롤링한 상태여야 합니다. 새로 만든 사이트라면 더 오래 걸리는 편입니다.

회사 로고를 그대로 파비콘으로 써도 되나요?

단순화한 버전이 16×16 픽셀에서도 알아볼 수 있다면 가능합니다. 다만 글자가 들어가거나 선이 가늘거나 요소가 많은 로고는 그렇게 작은 크기에서 분간하기 어렵습니다. 가장 좋은 방법은 파비콘 전용으로 로고의 "아이콘" 버전을 따로 만드는 것입니다. 심볼이나 머릿글자, 혹은 브랜드에서 가장 특징적인 요소 하나만 남기는 식입니다.

파비콘이 SEO에도 영향을 주나요?

직접적인 순위 요소는 아닙니다. 하지만 간접적으로는 영향이 있습니다. 잘 만든 파비콘은 검색 결과에서 사이트 이름 옆에 나타나 브랜드 인지를 높이고, 클릭률(CTR) 개선으로 이어지기도 합니다. 반대로 파비콘이 없는 사이트는 기본 아이콘으로 표시되어 아무래도 성의가 덜해 보입니다.