모든 웹사이트에는 파비콘이 필요합니다 — 브라우저 탭, 북마크, 주소 표시줄에 나타나는 작은 아이콘입니다. ICO는 하위 호환성을 위해 모든 브라우저에서 필요한 전통적인 파비콘 형식입니다. PNG 로고나 이미지를 ICO로 변환하는 것은 무료 브라우저 기반 도구를 사용하면 몇 초면 됩니다. 알아야 할 내용을 정리했습니다.

무료로 PNG를 ICO로 변환하는 방법

Picovert의 PNG → ICO 변환기를 엽니다. 계정이나 설치 불필요.
PNG 파일을 드롭합니다. 최상의 결과를 위해 정사각형 PNG 사용 — 512×512 또는 256×256이 적합합니다.
변환기는 여러 크기 (16×16, 32×32, 48×48)를 포함하는 ICO 파일을 생성합니다. 이것들이 단일 .ico 파일에 내장됩니다.
.ico 파일을 다운로드하고 웹사이트 루트 디렉토리에 favicon.ico로 저장하세요.

ICO 파일이란?

ICO (아이콘)는 Microsoft의 아이콘용 컨테이너 형식입니다. .ico 파일은 단일 파일 내에 다양한 해상도와 색 깊이의 여러 이미지를 담을 수 있습니다. 브라우저가 파비콘을 표시할 때 ICO에 내장된 이미지 중 가장 적합한 크기를 선택합니다. 그래서 잘 만들어진 favicon.ico에는 16×16, 32×32, 때로는 48×48 버전이 포함됩니다 — 브라우저가 각 컨텍스트에 맞는 것을 사용합니다.

ICO 파일은 Windows 데스크톱 아이콘과 애플리케이션 아이콘에도 사용됩니다. 같은 형식이 웹 파비콘과 시스템 아이콘 모두에 사용됩니다.

파비콘 생성을 위한 권장 PNG 크기

정사각형 PNG로 시작하세요. 변환기가 대상 크기로 리사이즈하므로 소스 크기보다 정사각형 여부가 더 중요합니다:

512×512 또는 256×256 — 이상적인 시작 크기. 32×32과 16×16으로 깔끔하게 다운샘플링하기에 충분히 큽니다.
최소 64×64 — 이보다 작으면 16×16 버전이 매우 흐릿해집니다.
반드시 정사각형 — 파비콘은 항상 정사각형입니다. 로고가 높이보다 넓다면 변환 전에 패딩을 추가하여 정사각형으로 만드세요.

favicon.ico vs. PNG 파비콘 — 무엇을 사용해야 할까요?

최신 브라우저는 PNG 파비콘을 직접 지원하며, 많은 개발자들이 이제 ICO 대신 PNG를 사용합니다. 두 방법 모두 작동합니다. 각각 언제 사용하는지:

루트의 favicon.ico: 하위 호환성에 필요합니다. 구형 브라우저와 일부 이메일 클라이언트는 <link> 태그 없이도 자동으로 /favicon.ico를 가져옵니다. 모든 사이트에 favicon.ico가 있어야 합니다.
link 태그를 통한 PNG 파비콘: 더 큰 크기에서 더 나은 품질이며 정확한 크기를 지정할 수 있습니다. Apple Touch 아이콘 (180×180)과 최신 고DPI 화면에 사용됩니다.

모범 사례: 둘 다 갖추세요. 루트 디렉토리 자동 페치를 위한 favicon.ico와 최신 브라우저를 위해 HTML head에 선언된 PNG 파비콘.

웹사이트에 파비콘 추가하는 방법

웹사이트 루트에 favicon.ico를 배치하고 HTML <head>에 다음을 추가하세요:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.png" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

ICO 링크의 sizes="any" 속성은 이 파일이 여러 크기를 포함한다고 브라우저에게 알립니다. PNG 폴백은 PNG를 선호하는 최신 브라우저를 처리합니다. apple-touch-icon은 누군가 iPhone 홈 화면에 사이트를 추가할 때 사용됩니다 — 180×180 PNG여야 합니다.

Next.js에서 파비콘 만들기

Next.js App Router에서는 src/app/에 직접 favicon.ico를 배치하세요. Next.js가 자동으로 사이트 파비콘으로 제공합니다. 추가 크기의 경우 같은 디렉토리에icon.png 또는 apple-icon.png를 추가하세요.

PNG vs. ICO: 주요 차이점

PNG: 고정 크기의 단일 이미지. 완전한 투명도 지원. 개별 이미지에 대해 더 작은 파일 크기.
ICO: 단일 파일에 여러 크기를 담는 컨테이너. /favicon.ico요청에 필요. 여러 크기를 번들링하므로 약간 더 큽니다.

파비콘의 경우 ICO 형식의 다중 크기 기능이 유용합니다. 단일 파일에서 브라우저 탭용 16×16과 핀된 작업 표시줄 아이콘용 32×32를 처리합니다.

JPG를 ICO로 변환할 수 있나요?

네 — Picovert는 JPG를 ICO로도 변환합니다. 과정은 동일합니다. JPG는 투명도를 지원하지 않으므로, 로고에 투명 배경이 있다면 ICO에서 그것을 보존하기 위해 PNG 소스 파일을 사용하세요.

일반적인 파비콘 실수

정사각형이 아닌 소스 이미지 — 300×100 로고는 정사각형 파비콘으로 강제되면 왜곡됩니다. 먼저 정사각형으로 자르거나 패딩을 추가하세요.
작은 크기에서 너무 복잡한 이미지 — 상세한 일러스트는 16×16에서 읽기 어려워집니다. 로고의 단순화된 버전을 사용하세요 — 전체 워드마크가 아닌 심볼만.
favicon.ico를 잘못된 위치에 업로드 — favicon.ico는 루트 디렉토리에 있어야 하며yourdomain.com/favicon.ico로 접근 가능해야 합니다.
Apple Touch 아이콘 누락 — iOS는 홈 화면 북마크 아이콘으로 별도의 180×180 PNG를 사용합니다. 파비콘과 별개로 이것을 만드세요.