파비콘 만들기 완전 가이드: 사이즈·HTML 적용·무료 생성기

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

브라우저 탭에 아이콘이 없는 사이트는 신뢰감이 절반으로 떨어진다. 여러 탭이 열려 있을 때 내 사이트를 즉시 알아볼 수 있게 해주는 것,
즐겨찾기에 브랜드를 새기는 것, iOS·Android 홈 화면에 앱처럼 추가되는 것,
이 모든 것이 파비콘 하나로 가능하다.

파비콘 생성기 바로 사용하기 →

파비콘이란?#

파비콘(Favicon)은 Favorites Icon의 줄임말로, 브라우저 탭·북마크·홈 화면·앱 아이콘 등에 표시되는 작은 이미지다. 1999년 Internet Explorer 5에서 처음 도입된 이후 지금은 모든 모던 브라우저에서 기본 지원한다.

파비콘이 없으면 브라우저는 기본 아이콘(빈 종이 모양)을 표시한다. 사용자는 탭을 여러 개 열었을 때 어느 탭이 내 사이트인지 구분하기 어렵고,
PWA(Progressive Web App)로 등록하거나 iOS 홈 화면에 추가할 때도 아이콘이 없어 신뢰감이 낮아진다.

파비콘 권장 사이즈 완전 정리#

단 하나의 이미지로는 모든 환경을 커버하기 어렵다. 브라우저·운영체제·기기마다 최적 크기가 다르기 때문이다.

크기	용도	비고
16×16 px	브라우저 탭 기본, `favicon.ico` 내장	가장 기본 크기
32×32 px	고해상도 탭, Windows 작업 표시줄, 바로가기 아이콘	Retina 디스플레이 대응
180×180 px	iOS 홈 화면(`apple-touch-icon`)	iPhone·iPad 대상
192×192 px	Android 홈 화면, PWA `manifest.json`	Android Chrome 대상
512×512 px	PWA 스플래시 화면, 고해상도 환경	선택 사항

핵심: 최소한 16px, 32px, 180px, 192px 4가지를 준비하면 대부분의 환경을 커버할 수 있다.

파비콘 파일 형식 비교: ICO vs PNG vs SVG#

형식	장점	단점	권장 용도
ICO	구형 브라우저 포함 전체 지원, 멀티 크기 내장	편집 도구 제한적	`favicon.ico` 기본 파일
PNG	투명 배경 지원, 모든 모던 브라우저 지원	크기별 개별 파일 필요	현대 환경 주력
SVG	모든 해상도에서 선명, 파일 크기 매우 작음	Safari 구버전·IE 미지원	모던 브라우저 추가 지원

2026년 기준 Chrome, Firefox, Edge, Safari 최신 버전은 모두 SVG 파비콘을 지원한다. 다만 넓은 호환성을 위해 PNG를 기본으로 사용하고 SVG를 보조로 추가하는 방식이 권장된다.

HTML head 삽입 코드#

파비콘 파일을 준비했다면 <head> 태그 안에 아래 코드를 추가한다.

기본 파비콘 (PNG)#

<!-- 브라우저 탭 기본 -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- 구형 브라우저 대비 (선택) -->
<link rel="shortcut icon" href="/favicon.ico">

Apple 홈 화면 아이콘#

<!-- iOS 홈 화면 아이콘 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Android / PWA 아이콘#

<!-- PWA manifest 연결 -->
<link rel="manifest" href="/manifest.json">

manifest.json 안에 아이콘 경로를 지정한다:

{
  "name": "My App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

SVG 파비콘 (모던 브라우저 추가 지원)#

<!-- SVG — 모든 해상도에서 선명 -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

프레임워크별 파비콘 적용법#

Next.js (App Router)#

Next.js 13+ App Router는 app/ 폴더에 파비콘 파일을 넣으면 자동으로 인식한다.

app/
├── favicon.ico        ← 자동 인식 (16×16, 32×32)
├── icon.png           ← <link rel="icon"> 자동 생성
└── apple-icon.png     ← apple-touch-icon 자동 생성

동적 파비콘이 필요하다면 app/icon.tsx로 코드 기반 생성도 가능하다:

// app/icon.tsx
import { ImageResponse } from 'next/og'

export const size = { width: 32, height: 32 }
export const contentType = 'image/png'

export default function Icon() {
  return new ImageResponse(
    <div style={{
      background: '#1e3a5f',
      width: '100%', height: '100%',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'white', fontSize: 20, fontWeight: 700,
    }}>
      B
    </div>
  )
}

React / Vue / 일반 HTML#

public/ 폴더에 파비콘 파일을 두고 index.html에 링크 태그를 추가한다:

<head>
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="manifest" href="/manifest.json">
</head>

WordPress#

외모 → 사이트 아이콘 메뉴에서 이미지를 업로드하면 자동으로 파비콘으로 설정된다. 권장 크기는 512×512 이상이며, WordPress가 각 환경에 맞게 자동으로 리사이즈한다.

무료 파비콘 만드는 법: 5분 완성#

별도 디자인 프로그램 없이 브라우저에서 바로 만들 수 있다.

파비콘 생성기 → 사용 순서:

텍스트 또는 이모지 입력: 사이트 이름 이니셜이나 이모지(최대 2자)
모양 선택: 정사각형, 둥근 모서리(Rounded), 원형 중 선택
배경색 선택: 8가지 프리셋 또는 컬러 피커로 직접 지정
텍스트 색상 선택: 4가지 프리셋 또는 커스텀 색상
PNG 다운로드: 16×16, 32×32, 180×180, 192×192 4가지 크기 동시 다운로드

색상 대비 팁: 배경이 어두우면 텍스트는 밝은 색, 배경이 밝으면 텍스트는 어두운 색으로 선택해야 작은 크기에서도 글자가 선명하게 보인다. 색상 대비 확인기로 WCAG 기준 충족 여부를 미리 체크해볼 수 있다.

이미지 파일 용량을 줄이고 싶다면 이미지 최적화 가이드도 참고해보자.

파비콘이 표시 안 될 때 해결법#

파비콘을 설정했는데도 탭에 나타나지 않는다면 아래 순서로 확인한다.

캐시 강제 새로고침: Ctrl+Shift+R (Windows/Linux) 또는 Cmd+Shift+R (Mac)
파일 경로 확인: href 값이 실제 파일 위치와 정확히 일치하는지 확인
MIME 타입 확인: 서버가 PNG 파일에 Content-Type: image/png를 반환하는지 확인
이전 favicon.ico 캐시: 브라우저가 캐시된 favicon.ico를 우선 사용하는 경우 → 개발자 도구 → Network 탭에서 파비콘 요청 상태 확인
빌드 결과물 확인: Next.js·Vite 등 사용 시 빌드된 dist/ 또는 .next/ 폴더에 파비콘이 실제로 포함되어 있는지 확인

자주 묻는 질문 (FAQ)#

Q. ICO 없이 PNG만 써도 되나요?

A. 모던 브라우저(Chrome, Firefox, Edge, Safari 최신)에서는 PNG만으로 충분하다. 다만 Windows XP·IE 구버전을 지원해야 하는 환경이라면 favicon.ico가 필요하다. 2026년 기준 실무에서는 PNG 위주로 구성하고 favicon.ico를 선택적으로 포함하는 방식이 일반적이다.

Q. 파비콘 크기가 맞지 않으면 어떻게 되나요?

A. 브라우저가 자동으로 스케일을 조정하지만 품질이 저하된다. 32px 이미지를 16px로 강제 축소하면 픽셀이 뭉개져 흐릿하게 보인다. 크기별로 최적화된 개별 이미지를 사용하는 것이 권장된다.

Q. PWA 아이콘은 꼭 필요한가요?

A. PWA로 등록할 계획이 있다면 manifest.json에 192×192와 512×512 아이콘이 필수다. 누락 시 홈 화면 추가 시 기본 아이콘 또는 스크린샷 썸네일이 표시되며,
Lighthouse PWA 감사에서 경고가 발생한다.

마무리#

파비콘은 작지만 웹사이트의 첫인상을 결정하는 중요한 요소다. 지금 바로 파비콘 생성기에서 브랜드에 맞는 아이콘을 만들고, 위 HTML 코드로 사이트에 적용해보자.