파비콘을 만드는 방법
파비콘을 만드는 데는 올바른 도구를 사용하면 2분이면 완료됩니다. 최소 512×512 픽셀의 정사각형 소스 이미지에서 시작하여 favicon generator를 통해 실행하고 다중 크기 .ico, SVG, apple-touch-icon 및 매니페스트 PNG와 같은 완전한 패키지를 얻습니다. 이 가이드는 소스 준비부터 브라우저 확인까지 모든 단계를 안내합니다. 심층적인 참고 자료는 full tutorial도 참조하세요.
파비콘은 브라우저의 탭 표시줄, 주소 표시줄, 북마크 목록에 표시되는 작은 아이콘입니다. 모바일에서는 사용자가 사이트를 저장하면 홈 화면 아이콘이 됩니다. Windows에서는 작업 표시줄 핀과 바탕 화면 바로 가기에 나타납니다. 파비콘을 올바르게 만드는 것은 브랜드 영향력이 큰 작은 노력입니다. 모든 페이지 보기는 사용자 탭에 있는 아이콘으로 시작됩니다.
최신 파비콘 설정은 단일 파일이 아니라 조정된 세트입니다. 다중 크기 .ico는 범용 브라우저 대체를 처리합니다. SVG는 다크 모드 지원을 포함하여 최신 브라우저에서 선명하고 확장 가능한 렌더링을 제공합니다. 180×180 PNG(apple-touch-icon)는 iOS가 홈 화면 설치에 사용하는 것입니다. 192×192 및 512×512 PNG는 Android PWA 설치 프롬프트를 제공합니다. 잘 준비된 하나의 소스 이미지는 이 모든 것을 한 번에 생성합니다.
소스 이미지 준비는 가장 간과되는 단계입니다. 로고는 정사각형이어야 합니다. 비대칭 자르기는 항상 늘어난 결과를 생성합니다. 미세한 선을 줄이고, 작은 텍스트를 제거하고, 대비를 높여 작은 크기에서도 명확하게 읽을 수 있는 단순화된 버전의 브랜드 마크를 디자인하세요. 이 단순화 단계를 건너뛰면 512×512에서는 우아해 보이는 것이 16×16에서는 읽을 수 없는 얼룩이 될 수 있습니다.
SVG는 해상도에 독립적이므로 이상적인 소스 형식입니다. 벡터 그래픽은 품질 손실 없이 모든 픽셀 밀도로 래스터화됩니다. 래스터 PNG 또는 JPG만 있는 경우 생성하기 전에 최소 512×512인지 확인하세요. 더 작은 것에서 크기를 줄이면 모든 크기 조정 단계에서 흐림이 발생하여 퍼지 탭 아이콘이 생성됩니다.
.ico 형식은 단일 이미지가 아닌 컨테이너입니다. 단일 파일에 여러 개의 래스터 프레임(일반적으로 16×16, 32×32, 48×48 및 64×64)을 보유합니다. 브라우저는 ICO 디렉토리를 구문 분석하고 필요한 디스플레이 밀도와 가장 근접하게 일치하는 프레임만 렌더링합니다. 이 단일 파일 접근 방식은 각 해상도에 대해 별도의 링크 태그가 필요하지 않음을 의미합니다. 하나의 태그가 모든 탭 크기를 포괄합니다.
소스 이미지를 favicon generator에 업로드하세요. 이 도구는 브라우저에서 모든 것을 로컬로 처리하므로 이미지가 장치를 떠나지 않습니다. 몇 초 안에 favicon.ico, favicon.svg, apple-touch-icon.png(180×180), android-chrome-192x192.png, android-chrome-512x512.png 및 site.webmanifest와 붙여넣기 가능한 HTML 링크 태그가 포함된 다운로드 패키지를 생성합니다.
파일을 배치하는 것은 간단합니다. 생성된 모든 파일을 사이트의 공개 루트 디렉터리(index.html를 제공하는 동일한 폴더)에 놓습니다. Vite 및 Create React App 프로젝트의 경우 이는 /public 폴더입니다. Next.js App Router 프로젝트의 경우 favicon.ico를 /app 안에 배치하고 PNG 파일을 /public에 배치합니다. 정적 사이트의 경우 HTML 파일과 함께 모든 것을 삭제하세요.
HTML 링크 태그는 각 컨텍스트에 사용할 파일을 브라우저에 알려줍니다. 최소값은 `<link rel='icon' href='/favicon.ico'>` 한 줄입니다. 전체 권장 세트에는 SVG 변형용 라인, apple-touch-icon용 라인, 웹 매니페스트용 라인이 3개 더 추가됩니다. 생성된 스니펫을 '<head>' 요소 안에 붙여넣으세요. 태그 순서는 `</head>` 앞에만 있으면 중요하지 않습니다.
브라우저 캐싱은 파비콘이 업데이트되지 않는 것처럼 보일 때 혼란을 일으키는 주요 원인입니다. 브라우저는 원본별로 /favicon.ico를 캐시하며 다른 자산과 마찬가지로 표준 캐시 제어 헤더를 따르지 않을 수 있습니다. 이전 아이콘이 지속되면 새 시크릿 창을 열거나 링크 태그의 href에 `?v=2`와 같은 캐시 버스터 쿼리 문자열을 추가하여 브라우저가 업데이트된 파일을 가져오도록 하세요.
일반적인 실수에는 정사각형이 아닌 이미지 업로드(아이콘이 늘어남), 256×256 픽셀 미만의 소스 사용(더 큰 디스플레이 크기에서는 흐려짐), apple-touch-icon 생략(iOS 홈 화면 설치에서는 페이지 스크린샷이 대신 표시됨) 등이 있습니다. 세 가지 문제 모두 정사각형 512×512 PNG 또는 SVG 소스에서 시작하여 생성기가 모든 출력 크기를 처리하도록 하여 해결됩니다.
다크 모드 지원은 처음부터 구축할 가치가 있습니다. 많은 브라우저는 사용자 시스템이 어두운 모드에 있을 때 탭 표시줄을 어두운 크롬으로 렌더링합니다. 아이콘이 투명한 배경에 어두운 색으로 표시된 경우 어두운 탭에서 사라질 수 있습니다. 채우기 색상을 전환하는 `@media (prefers-color-scheme: dark)` 스타일 블록이 내장된 SVG 파비콘을 배송하세요. 추가 HTML 태그는 필요하지 않으며 업데이트된 SVG 파일만 있으면 됩니다.
배포 후 live favicon tester를 사용하여 파비콘을 확인하세요. 테스터는 브라우저 탭, 북마크 및 설치 프롬프트 컨텍스트를 시뮬레이션하고 아이콘이 16, 32, 48, 128 및 512픽셀에서 나란히 렌더링되는 방식을 보여줍니다. 또한 Chrome 및 Safari에서 고정된 탭을 수동으로 확인하고 iOS에서 '홈 화면에 추가'를 사용하여 apple-touch-icon를 확인하세요.
플랫폼별 연습은 favicon for WordPress, favicon for Shopify, favicon for React 및 favicon for Next.js를 참조하세요. 생성된 파일 세트는 모든 플랫폼에서 동일합니다. 파일을 업로드하는 위치와 플랫폼이 HTML 링크 태그를 삽입하거나 재정의하는 방법이 다릅니다.
브랜드를 변경할 때마다 파비콘을 다시 방문하세요. 캐시된 파비콘은 사이트 재설계가 적용된 후에도 오랫동안 북마크와 모바일 홈 화면에 유지됩니다. 링크 태그 href의 버전 문자열을 업데이트하면 브라우저는 다음 방문 시 새 파일을 가져와 캐시된 모든 위치에서 이전 아이콘을 점차적으로 대체하게 됩니다. 파일 크기 및 호환성 장단점에 대한 형식별 분석은 best favicon format 가이드를 참조하세요.
작동 방식
- 1
정사각형 소스 이미지 준비
로고나 아이콘을 투명한 배경의 512×512 PNG 또는 정사각형 viewBox의 SVG(예: `viewBox='0 0 512 512'`)로 내보냅니다. 16×16에서는 보이지 않는 미세한 디테일을 단순화합니다.
- 2
파비콘 패키지 생성
[favicon generator](tool:favicon-generator)에 소스를 업로드하세요. 이 도구는 favicon.ico(다중 크기 16/32/48/64), favicon.svg, apple-touch-icon.png(180×180), android-chrome-192x192.png, android-chrome-512x512.png 및 site.webmanifest를 모두 한 번에 생성합니다.
- 3
모든 파일을 사이트 루트에 복사
다운로드 zip의 모든 파일을 프로젝트의 공개 루트(index.html를 제공하는 디렉터리)에 배치합니다. Next.js App Router의 경우 favicon.ico는 /app에 들어갑니다. PNG는 /public에 들어갑니다.
- 4
HTML 링크 태그를 <head>에 붙여넣습니다.
생성된 HTML 스니펫을 복사하여 '<head>' 요소 안에 추가하세요. 전체 세트에는 .ico 대체, SVG 변형, apple-touch-icon 및 매니페스트 링크(총 6줄)가 포함됩니다.
- 5
브라우저 및 장치 전반에 걸쳐 확인
Chrome, Safari, Firefox 및 Edge에서 사이트를 엽니다. 탭, 북마크바, 주소 표시줄을 검사하세요. iOS에서 공유 시트와 '홈 화면에 추가'를 탭하여 apple-touch-icon를 테스트하세요. 빠른 시뮬레이션을 위해 [favicon tester](utility:favicon-tester)를 사용하십시오.
- 6
기존 파비콘 업데이트 시 캐시 버스트
라이브 파비콘을 교체하는 경우 링크 태그 href(`?v=2`, `?v=3` 등)에서 버전 문자열을 늘립니다. 이렇게 하면 모든 브라우저가 캐시된 버전을 제공하는 대신 다음 페이지 로드 시 업데이트된 파일을 가져오게 됩니다.
지금 사용해 보기
지금 파비콘을 만들어보세요
파비콘 생성기자주 묻는 질문
파비콘을 만드는 가장 쉬운 방법은 무엇입니까?+
512×512 정사각형 PNG 또는 SVG를 FetchFavicon 생성기에 업로드합니다. 가입이나 서버 업로드 없이 1초 안에 모든 필수 파일(.ico, SVG, apple-touch-icon, 매니페스트 PNGs)과 붙여넣기 가능한 HTML를 생성합니다.
소스 이미지의 크기는 얼마나 되어야 합니까?+
최소 512×512 픽셀, 이상적으로는 SVG입니다. 더 작아지면 Windows에서 사용되는 256×256 크기와 PWA 설치 프롬프트에 필요한 512×512 크기에서 눈에 보이는 흐림 위험이 발생합니다. 작은 이미지를 확대하면 모든 크기 조정 단계에서 품질 손실이 발생합니다.
apple-touch-icon가 필요합니까?+
예, 방문자가 iPhone 또는 iPad를 사용하는 경우 가능합니다. 이 기능이 없으면 iOS 홈 화면 설치 시 브랜드 마크 대신 페이지의 저품질 스크린샷 썸네일이 표시됩니다. `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>`와 연결된 180×180 PNG만 있으면 됩니다.
내 파비콘이 브라우저 탭에 표시되지 않는 이유는 무엇입니까?+
대부분 캐싱 문제입니다. 비공개/시크릿 창을 열고 사이트로 이동합니다. 그래도 표시되지 않으면 favicon.ico가 도메인 루트에 제공되고 링크 태그 href 경로가 올바르게 확인되는지 확인하세요. 오타와 선행 슬래시 누락이 있는지 확인하세요.
.ico와 SVG가 모두 필요합니까?+
예, 전체 범위를 보장합니다. .ico는 레거시 브라우저, Windows 바로가기 및 /favicon.ico를 직접 가져오는 타사 도구를 처리합니다. SVG는 Chrome, Firefox, Edge 및 Safari 15+에서 선명한 렌더링을 처리하고 다크 모드 색상 전환을 지원합니다. 결합된 파일 크기는 일반적으로 30KB 미만입니다.
파비콘 변경 사항이 전파되는 데 얼마나 걸리나요?+
브라우저가 원본을 얼마나 적극적으로 캐시했는지에 따라 몇 초에서 며칠까지 가능합니다. 가장 빠른 수정은 파비콘 href에 새 쿼리 문자열(`?v=2`)을 추가하는 것입니다. 이렇게 하면 브라우저가 이를 새 URL로 처리하고 즉시 새 복사본을 가져옵니다.
파비콘 소스로 JPEG를 사용할 수 있나요?+
JPEG를 생성기에 업로드할 수 있지만 JPEG는 투명도를 지원하지 않습니다. 아이콘에 투명한 배경이 필요한 경우(브라우저 탭에서 가장 잘 표시됨) 대신 PNG-32 또는 SVG에서 시작하세요. 생성기는 .ico 및 PNG로 올바르게 변환합니다.