파비콘을 만드는 방법

최신 favicon는 16×16 이미지 이상입니다. 이 가이드는 소스 준비, 다중 크기 생성, HTML 설정, 실제 사례 및 대부분의 팀을 괴롭히는 문제에 대한 수정 사항을 안내합니다.

2026. 1. 12. 6 분 분량

favicon란 무엇입니까?

favicon는 탭, 북마크 바, 기록 목록 및 주소 표시줄에 표시되는 작은 아이콘 브라우저입니다. 휴대폰에서는 누군가 사이트를 저장하면 홈 화면 아이콘이 됩니다. Windows에서는 작업 표시줄 핀과 바탕 화면 바로 가기에 나타납니다.

이 단어는 즐겨찾기 아이콘에서 유래했지만 작업은 단일 16×16 GIF를 훨씬 넘어섰습니다. 오늘날의 favicon는 루트 수준 favicon.ico, 선택적 SVG 및 PNG 변형, iOS용 사과 터치 아이콘, 설치 가능한 PWA용 매니페스트 아이콘 등 작은 자산 제품군입니다.

사용자는 좋은 favicon에 대해 거의 댓글을 달지 않지만 누락되거나 흐릿한 항목이 즉시 발견됩니다. 선명한 아이콘은 세련됨을 나타내며 열려 있는 20개의 페이지 중에서 탭을 식별할 수 있게 해줍니다.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

소스 이미지 준비

최소 512×512 픽셀의 정사각형 이미지에서 시작하세요. 정사각형 viewBox가 있는 SVG는 내보낼 모든 래스터 크기에 맞게 깔끔하게 확장되므로 이상적입니다.

얇은 획, 미세한 타이포그래피, 복잡한 그라데이션을 피하세요. 16×16에서는 헤어라인 디테일이 회색 진흙으로 합쳐집니다. 마크를 단순화하세요. 모양이 적고, 대비가 높으며, 글리프 주위에 패딩이 더 많이 추가됩니다.

로고가 가로인 경우 워드마크 없이 기호를 중앙에 배치하는 정사각형 자르기를 만듭니다. 높이가 8px 미만인 문자 형식은 축소 시에도 거의 유지되지 않습니다.

래스터가 유일한 옵션인 경우 투명도를 사용하여 PNG-32를 내보냅니다. 구운 흰색 배경은 어두운 브라우저 크롬과 색조 모바일 런처에서 제대로 보이지 않습니다.

다중 크기 .ico 생성

하나의 favicon.ico 파일에 16, 32, 48, 64, 128 및 256픽셀 프레임을 묶습니다. 브라우저와 Windows는 디렉터리 헤더를 읽고 필요한 크기만 디코딩합니다.

사이트 루트(/favicon.ico)에 favicon.ico를 배치합니다. 최신 <link> 태그를 선언하더라도 크롤러와 이전 클라이언트는 여전히 규칙에 따라 해당 경로를 검색합니다.

당사의 favicon 생성기는 클라이언트 측의 모든 크기를 1초 이내에 래스터화합니다. 소스 이미지는 브라우저를 떠나지 않습니다. 이는 마크가 출시되지 않은 제품 로고인 경우 중요합니다.

HTML 태그 추가

2026년 설정을 완료하려면 <head>에 다음 태그를 삭제하세요.

SVG 라인은 Chromium 및 Firefox에 날카로운 탭을 제공합니다. .ico 라인에는 Safari 대체, Windows 바로가기 및 SVG를 무시하는 RSS 리더가 포함됩니다.

실제 사례

정적 마케팅 사이트: 로고마크의 512×512 PNG 업로드, favicon.ico 및 180×180 사과 터치 아이콘 생성, 4개의 <link> 라인 추가, /public 또는 웹 루트에 배포. 총 시간: 5분 미만.

React / Vite 앱: 아이콘을 /public에 배치하고 index.html의 루트 상대 경로로 참조합니다. Vite는 빌드 시 변경되지 않은 /public을 복사하므로 /favicon.ico는 프로덕션에서 올바르게 확인됩니다.

WordPress: 수동 HTML 건너뛰기 - 모양 → 사용자 정의 → 사이트 ID → Site Icon를 사용합니다. 512×512 소스를 업로드하세요. WordPress는 올바른 태그를 자동으로 내보냅니다. 캐시 무효화 팁은 WordPress 튜토리얼을 참조하세요.

다크 모드 브랜드: @media(prefers-color-scheme: dark) 내부에 채우기 스위치가 있는 SVG를 내보냅니다. SVG를 로드하지 않는 클라이언트를 위해 중립 .ico 폴백과 페어링합니다.

모든 브라우저에서 확인

Chrome, Safari, Firefox 및 Edge에서 강제 새로 고침(Ctrl+Shift+R 또는 Cmd+Shift+R). 일반적인 재로드는 캐시된 favicon를 며칠 동안 유지하는 경우가 많습니다.

브라우저 탭, 북마크 바, iOS의 홈 화면에 추가, 고정된 Windows 작업 표시줄 아이콘 등 네 가지 표면을 확인하세요. 각 표면은 번들에서 다른 해상도를 요청할 수 있습니다.

DevTools → Network를 열고 ico 또는 png로 필터링하고 다시 로드한 후 선언한 모든 아이콘 URL에 대해 200개의 응답을 확인하세요. apple-touch-icon.png의 단일 404는 일반적인 누락입니다.

자주 묻는 질문

SVG가 있는 경우에도 favicon.ico가 필요합니까? 예. .ico를 범용 폴백으로 유지하세요. SVG는 대체품이 아닌 향상된 기능입니다.

최소 실행 가능한 favicon는 얼마입니까? /favicon.ico의 다중 크기 favicon.ico. 그 밖의 모든 기능은 높은 DPI 화면과 모바일 홈 화면의 선명도를 향상시킵니다.

JPG를 사용할 수 있나요? 가능하지만 투명성을 잃게 됩니다. PNG 또는 SVG는 거의 항상 인터페이스 아이콘에 더 좋습니다.

favicon를 얼마나 자주 업데이트해야 합니까? 브랜드 마크가 바뀔 때마다. <link> 태그에 대한 ?v=2 쿼리를 한 번 실행하여 공격적인 브라우저 캐시를 물리치세요.

문제 해결

배포 후 아이콘이 업데이트되지 않습니다. 브라우저는 HTML와 독립적으로 favicon를 캐시합니다. 새로고침을 하거나, 사이트 데이터를 지우거나, 일시적으로 아이콘 URL에 ?v=2를 추가하세요.

흐릿한 탭 아이콘: 소스가 너무 작거나 정사각형이 아닙니다. 512×512 또는 SVG에서 재생성합니다. .ico에 실제로 32×32 프레임이 포함되어 있는지 확인하십시오.

로고 주변의 흰색 상자: 소스의 배경이 불투명했습니다. 투명하게 다시 내보내고 PNG 압축 항목으로 .ico를 다시 생성하십시오.

로컬에서는 작동하지만 프로덕션에서는 작동하지 않습니다. 파일이 src/뿐만 아니라 공개 웹 루트에 있는지 확인합니다. Linux 서버에서 CDN 캐시와 대소문자 구분 경로를 확인하세요.

단계별 체크리스트

512×512 이상의 크기로 정사각형 마스터를 내보내거나 찾습니다. 디자인 파일에 투명도, sRGB 색상 프로필, 숨겨진 배경 레이어가 없는지 확인하세요.

클라이언트 측 favicon 생성기를 통해 마스터를 실행합니다. favicon.ico, 해당하는 경우 favicon.svg, apple-touch-icon.png를 다운로드하고 한 번에 PNG를 매니페스트합니다.

모든 파일을 공개 웹 루트에 업로드하세요. index.html과 동일한 폴더를 의미하는 정적 호스트에서; 프레임워크에서는 /에 매핑되는 /public 또는 /static 디렉터리를 사용합니다.

렌더링 차단 스크립트 앞에 권장 <link> 블록을 <head>에 붙여넣습니다. 초기 배치는 브라우저가 첫 번째 페인트에서 아이콘을 발견하는 데 도움이 됩니다.

Chrome, Safari 및 Firefox에서 강제 새로 고침으로 유효성을 검사합니다. iOS 트래픽이 중요한 경우 탭을 고정하고 페이지를 북마크에 추가하고 실제 iPhone에서 홈 화면에 추가를 테스트해 보세요.

README 또는 디자인 시스템에 설정된 아이콘을 문서화하여 다음 리브랜딩이 이메일에서 발견된 단일 32×32 PNG 누군가로부터 시작되지 않도록 하세요.

피해야 할 일반적인 실수

16×16 슬롯으로 크기가 조정된 전체 수평 로고를 사용하면 텍스트를 읽을 수 없게 됩니다. 기호까지 자릅니다.

적절한 다중 크기 디렉토리 없이 .ico로 이름이 변경된 16×16 PNG만 배송합니다. — Windows 및 Retina 탭은 고급스럽고 흐릿합니다.

데스크톱 탭에 집착하면서 사과 터치 아이콘을 잊어버린 경우 — iOS 사용자는 모바일 웹 트래픽의 큰 부분을 차지합니다.

환경 인식 빌드 없이 스테이징과 프로덕션 간에 다른 CDN 경로에서 <link href>를 가리킵니다.

WordPress, Shopify 또는 Webflow가 저해상도 소스 업로드를 마법처럼 수정한다고 가정합니다. 모든 크기의 쓰레기가 들어오고, 쓰레기가 나옵니다.

도구 사용해 보기

파비콘 생성기 PNG ICO 변환기 SVG PNG 변환기