파비콘 생성기: ICO, PNG 아이콘, 매니페스트

파비콘은 브라우저 탭, 북마크, 방문 기록, 검색 결과에서 사이트 이름 옆에 나타나는 작은 아이콘입니다. 휴대폰에서는 누군가 사이트를 저장하면 홈 화면에 더 큰 버전이 나타납니다. 분명한 아이콘은 수십 개의 열린 탭 사이에서 사이트를 쉽게 찾게 해 주고 더 전문적으로 보이게 합니다.

곳마다 필요한 크기와 형식이 다릅니다. 브라우저는 여전히 favicon.ico를 찾고, Apple 기기는 180px PNG를, Android와 설치형 웹 앱은 웹 매니페스트의 아이콘을 읽으며, 검색 엔진은 48px 이상의 아이콘을 선호합니다.

필요한 크기

파비콘 크기를 한 줄씩 설명하면 이렇습니다. 16과 32px은 브라우저 탭용, 48px은 Windows와 검색 결과용, 180px은 Apple 터치 아이콘용, 192와 512px은 Android와 웹 앱 매니페스트용입니다. 이 생성기는 이 모두와 함께 다른 용도를 위한 64, 96, 128, 256, 384px 버전도 만듭니다.

정사각형이고 512×512픽셀 이상인 로고를 추가하세요. 배경이 투명한 PNG나 SVG가 가장 선명합니다. 투명 또는 단색 배경을 고르고, 그림이 가장자리에 닿으면 여백을 더하고, 앱 스타일 아이콘을 원하면 모서리를 둥글게 하세요. 미리보기는 밝은 배경과 어두운 배경 모두에서 16, 32, 48, 180px 아이콘을 보여 주므로 실제 탭에서 어떻게 보일지 판단할 수 있습니다.

매니페스트용 앱 이름과 테마 색상을 입력한 뒤 ‘파비콘 패키지 다운로드 (ZIP)’를 누르세요. favicon.ico나 512px PNG만 따로 다운로드할 수도 있습니다.

PNG에서 시작하기

PNG 그림으로 파비콘을 만들려면 가진 것 중 가장 큰 버전에서 시작하세요. 큰 이미지를 줄이면 선명한 작은 아이콘이 되고, 아주 작은 이미지를 키우면 흐려집니다. 로고가 가로로 길다면 16px에서는 글자를 읽을 수 없으니 심볼이나 첫 글자만 쓰는 것을 고려하세요.

favicon.ico

favicon.ico 파일은 16, 32, 48px 이미지를 한 파일에 담는 PNG→ICO 변환으로 만들어집니다. 최신 브라우저와 Windows는 PNG 압축 아이콘을 읽으므로 파일은 작고 윤곽은 깔끔합니다.

Apple 기기

Apple 터치 아이콘 크기는 180×180픽셀입니다. iOS는 투명 영역을 검은색으로 채우므로, 배경이 투명하면 생성기가 이 아이콘에만 테마 색상으로 단색 배경을 자동으로 넣습니다.

Android와 웹 앱

site.webmanifest의 웹 매니페스트 아이콘은 192와 512px PNG이며, 아이콘을 원이나 둥근 사각형으로 잘라 내는 Android용 마스커블 버전도 포함됩니다. 잘리는 부분이 없도록 중요한 그림은 아이콘 중앙 80% 안에 두세요.

패키지 압축을 풀고 파일을 홈페이지와 같은 위치인 웹사이트 루트 폴더에 올리세요. 그다음 HTML 코드를 모든 페이지의 head 섹션이나 사이트 템플릿에 복사하세요. 이 코드는 ICO, 16과 32px PNG, Apple 아이콘, 매니페스트를 연결합니다.

웹사이트 빌더와 콘텐츠 관리 시스템에는 대신 사이트 아이콘 설정이 있는 경우가 많습니다. 그럴 때는 512px PNG를 그곳에 올리면 플랫폼이 다른 크기를 직접 만듭니다.

문제 해결

업로드 후 파비콘이 보이지 않는다면 브라우저가 캐시된 버전을 쓰고 있을 수 있습니다. 아이콘 URL을 직접 열고 강력 새로고침으로 페이지를 다시 불러오거나, 시크릿 창을 써 보세요. 검색 결과의 아이콘이 바뀌기까지는 며칠에서 몇 주가 걸릴 수 있습니다.

단순하게 하세요. 16×16픽셀에서는 가는 선과 작은 글자가 사라집니다. 대비가 강한 굵은 심볼, 글자 하나, 또는 로고의 단순화 버전을 쓰세요. 밝은 미리보기와 어두운 미리보기를 모두 확인하세요. 투명 배경의 어두운 로고는 어두운 브라우저 테마에서 사라질 수 있으므로, 단색 배경이나 밝은 외곽선을 넣는 것이 좋습니다.

일관성도 중요합니다. 색상 추출기로 뽑을 수 있는 브랜드 색을 쓰고, 크기가 달라져도 아이콘을 알아볼 수 있게 하세요.

이미지는 브라우저에서 처리되며 업로드되지 않습니다. SVG 파일은 렌더링 전에 스크립트와 외부 참조가 제거됩니다. PNG, JPG, WebP, GIF, SVG 입력을 지원합니다. 이 도구는 무료, 무제한이며 EnhancerPro 크레딧을 쓰지 않습니다.

다음 단계

로고가 픽셀 이미지로만 있다면 이미지 SVG 변환기로 벡터 버전을 만들 수 있고, SVG PNG 변환 도구로 벡터 로고를 원하는 크기로 내보낼 수 있습니다.

브라우저 탭

데스크톱 브라우저는 보통 탭에 16이나 32px 아이콘을, 고해상도 화면에서는 32px 버전을 보여 줍니다. Chrome과 Edge는 바로가기와 새 탭 페이지에 더 큰 PNG 아이콘도 씁니다. 이 크기들은 아주 작으니 16px 미리보기를 꼼꼼히 확인하세요. 아이콘이 뭉개져 보이면 그림을 단순화하거나 여백을 조금 늘리세요.

검색 결과

검색 엔진은 모바일과 데스크톱 검색 결과에서 사이트 옆에 파비콘을 보여 줍니다. 48px의 배수인 정사각형 아이콘으로, 크롤러가 접근할 수 있는 것을 선호합니다. 생성된 코드처럼 홈페이지 head에 아이콘을 연결하는 것이 찾기 쉽게 하는 표준 방법입니다.

홈 화면

사람들이 휴대폰 홈 화면에 사이트를 추가하면 iPhone은 Apple 터치 아이콘을, Android 휴대폰은 매니페스트의 아이콘을 씁니다. 둘 다 단색 배경과 약간의 여백이 있을 때 가장 좋아 보이며, 그래야 심볼이 시스템이 더하는 둥근 모서리에 닿지 않습니다.

다크 모드

많은 사람이 어두운 브라우저 테마를 씁니다. 투명 배경의 검은 로고는 거기서 사라집니다. 도구의 어두운 미리보기가 이를 바로 보여 줍니다. 단색 배경, 밝은 외곽선, 두 가지 색의 로고 버전을 쓰면 어디서나 아이콘이 보입니다.

기존 아이콘 업데이트하기

파비콘을 교체할 때는 기존 링크가 계속 작동하도록 같은 파일명을 유지하세요. 브라우저는 아이콘을 적극적으로 캐시하므로 재방문자에게 새 아이콘이 보이기까지 시간이 걸릴 수 있습니다. HTML 링크에 favicon.ico?v=2 같은 버전 쿼리를 붙이면 브라우저가 새 파일을 가져옵니다.

게시 전 체크리스트

게시하기 전에 네 가지를 확인하세요. favicon.ico 파일이 브라우저에서 your-domain/favicon.ico로 열리는지. HTML 코드가 홈페이지 head에 있는지. Apple 아이콘에 단색 배경이 있고 iPhone 홈 화면에 사이트를 추가했을 때 보기 좋은지. 매니페스트 이름과 테마 색상이 브랜드와 맞는지. 이것들이 갖춰지면 아이콘이 탭, 북마크, 검색 결과, 홈 화면에서 일관되게 나타나고, 방문자가 한눈에 사이트를 알아봅니다.

원본 파일 보관하기

원본 로고와 ZIP을 프로젝트에 함께 보관하세요. 나중에 색을 바꾸거나 로고를 새로 디자인하면 같은 설정으로 1분 만에 전체 세트를 다시 만들 수 있고, 모든 크기가 일관되게 유지됩니다. 매니페스트와 아이콘이 다시 브랜드와 맞도록 사용한 테마 색상도 기록해 두세요. 로고, 설정, 생성된 파일이 정리된 폴더는 미래의 나를 포함해 사이트를 관리할 누구에게나 시간을 아껴 줍니다.