브라우저에서 다중 크기 ICO 파비콘 만들기

favicon ICO에 담아야 할 것

전통적인 favicon.ico는 여러 해상도를 포함해 Retina 탭, 북마크, 바탕화면 바로가기에서도 선명합니다. 16×16 한 장만 키워 쓰면 흐릿하고 낡아 보입니다.

WebP.Best는 Favicon(16/32/48), Standard(64 추가), Full(최대 256) 같은 팩을 제공해 각 크기를 손으로 만들지 않아도 일반적인 브라우저·Windows 요구에 맞출 수 있습니다.

• 브라우저 탭 → Favicon 팩의 작은 크기
• 바로가기 / 일부 OS 표면 → Standard 또는 Full
• 원본 → 가능하면 깔끔한 정사각형 로고나 심볼

원본 이미지 준비

정사각형 또는 거의 정사각형이고 가장자리가 깔끔한 마스터에서 시작하세요. 투명 PNG나 WebP가 잘 맞습니다. 정보가 많은 사진은 16px 아이콘에 약합니다. 먼저 단순화하거나 심볼만 잘라내세요.

로고가 가로로 긴 워드마크뿐이면 정사각형으로 만들 때 여백이나 잘림이 생깁니다. 변환 전에 아이콘을 심볼로 할지 이니셜로 할지 정하세요.

WebP.Best 사용 단계

홈 변환기를 열고 로고 파일을 추가합니다(투명 PNG 또는 WebP가 가장 좋음). 출력 형식은 ICO.

크기 팩 선택: Favicon(16/32/48 px)은 탭용, Standard는 64 px를 추가해 바로가기용, Full은 최대 256 px로 Windows 아이콘을 더 선명하게. 각 크기를 따로 내보낼 필요 없이 팩이 하나의 .ico로 묶습니다.

정사각형 채우기 방식: Fit inside는 원본이 정사각형이 아니어도 로고 전체를 여백과 함께 표시, Fill and crop은 확대해 채우며 가장자리가 잘릴 수 있습니다. 단순 심볼에 적합하고 작은 글자에는 부적합합니다.

변환 후 .ico를 받고 탭에서 가장 작은 크기를 확인하세요. 모든 처리는 기기에서 로컬로 실행됩니다.

Fit inside vs fill and crop: 무엇을 고를까

아이콘을 정사각형 프레임으로 생각하세요. Fit inside는 로고를 줄여 프레임 안에 전부 넣습니다. 잘리지 않지만 가로·세로로 긴 로고는 빈 띠가 생길 수 있습니다.

Fill and crop은 프레임을 가득 채울 때까지 확대한 뒤 넘치는 부분을 자릅니다. 단순 원이나 글자에는 좋지만, 긴 워드마크는 16 px에서 글자가 잘릴 수 있습니다.

ICO 전에 엄격한 정사각형 마스터가 필요하면 고급 옵션을 펼치고 정확한 너비×높이(예: 512×512)를 선택한 뒤 Fill and crop 또는 Fit inside로 PNG로 한 번 변환하고, 그 정사각형으로 ICO를 실행하세요. 기본 팩으로 충분하면 이 단계는 생략해도 됩니다.

• 가로 워드마크만 있음 → Fit inside, 또는 먼저 정사각형 심볼 제작
• 앱 스타일 원형 아이콘 → Fill and crop이 더 깔끔한 경우가 많음
• 확실치 않으면 → Fit inside 먼저, 여백이 거슬릴 때만 Fill and crop

사이트에 ICO 적용

favicon.ico를 사이트 루트에 두거나 HTML head에서 적절한 type으로 링크하세요. 많은 정적 호스트는 PNG 파비콘도 받지만, ICO는 구형 북마크와 일부 데스크톱 환경에 여전히 유용합니다.

배포 후 강력 새로고침이나 시크릿 창으로 확인하세요. 브라우저는 파비콘을 강하게 캐시합니다. 업로드 후 «잘못된 아이콘»은 종종 캐시 문제이지 ICO 자체 문제가 아닙니다.

하지 않는 것

이 경로는 정적 아이콘용입니다. 브랜드 디자인, 자동 배경 제거, SVG 생성은 하지 않습니다. 아주 가는 선은 16 px에서 사라질 수 있으니 최소 크기를 꼭 확인하세요.

팩 처리는 로컬에서 미리 정해진 크기로 실행됩니다. 휴대폰 «홈 화면에 추가» 아이콘이 필요하면 별도 PNG가 필요할 수 있으며 ICO 하나만으로는 부족할 수 있습니다.