투명한 파비콘 가이드

파비콘의 단색 배경은 낡아 보이고 어두운 모드와 충돌합니다. 알파를 엔드 ​​투 엔드로 유지하는 방법은 다음과 같습니다.

3 분 분량

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

투명한 소스로 시작하세요

배경 채우기 없이 로고를 PNG-32로 내보내거나 SVG를 사용하세요. 대부분의 흐림 효과는 파비콘 도구가 아닌 구운 흰색 배경에서 발생합니다.

.ico는 알파를 지원합니다.

.ico 내의 PNG 압축 항목은 알파 채널을 유지합니다. 비트맵 항목은 크기별로 올바른 인코딩을 선택하는 도구를 사용하지 않습니다.

다크 모드 처리

<style>@media (prefers-color-scheme: dark) { ... }</style> 블록과 함께 SVG를 배송하고 .ico가 정적 폴백을 처리하도록 합니다.

자주 묻는 질문

How do I make a favicon with a transparent background?

Start from a PNG-32 or SVG with no baked-in background. Export to .ico using a tool that preserves the alpha channel.

Does .ico support transparency?

Yes when entries use PNG compression. Bitmap-encoded .ico entries do not preserve alpha.

How do transparent favicons work in dark mode?

Ship an SVG favicon with prefers-color-scheme styles, and keep a static .ico fallback for browsers that ignore SVG.

관련 가이드

도구 사용해 보기

계속 읽기