파비콘 만들기 · PNG를 ICO와 모든 크기로
로고나 그림 한 장을 올리면 브라우저 탭용 favicon.ico(16·32·48), 아이폰·안드로이드 홈 화면용 PNG(180·192·512), site.webmanifest와 붙여 넣을 HTML 코드를 한 번에 만듭니다.
🔒 사진이 서버로 업로드되지 않습니다실제 크기 미리보기 — 밝은 탭과 어두운 탭에서 어떻게 보이는지 확인하세요. 16px에서 알아볼 수 없으면 단순한 모양으로 바꾸는 것이 좋습니다.
로고의 흰 배경을 먼저 지우려면 흰 배경 투명하게를, 필요한 부분만 남기려면 이미지 자르기를, 브랜드 색 코드를 맞추려면 색상 코드 변환을 쓰세요.
왜 크기가 이렇게 많이 필요한가
favicon.ico — 브라우저 탭·북마크·주소창. 한 파일 안에 16·32·48px 세 장을 담아 두면 화면 배율에 따라 알맞은 것을 골라 씁니다. 가장 오래된 형식이라 어디서나 읽힙니다.
favicon-16x16 · 32x32.png — ICO 대신 PNG를 요구하는 최신 브라우저용.
apple-touch-icon.png (180) — 아이폰·아이패드에서 "홈 화면에 추가"할 때 나오는 아이콘. 모서리는 iOS가 알아서 둥글게 깎습니다.
android-chrome-192 · 512.png + site.webmanifest — 안드로이드 홈 화면과 설치형 웹앱(PWA). 512는 설치 화면과 스플래시에 쓰입니다.
크기가 작을수록 세부가 사라지므로, 글자가 들어간 로고는 16px에서 알아볼 수 없습니다. 탭용은 심벌이나 머리글자 하나가 좋습니다.
붙여 넣는 방법
ZIP을 풀어 파일들을 사이트 뿌리 폴더(index.html이 있는 곳)에 넣고, 위의 코드를 모든 페이지의 <head> 안에 붙입니다.
뿌리가 아닌 하위 폴더에 두려면 코드의 / 경로를 그 폴더로 바꾸세요. 브라우저는 파비콘을 오래 기억하므로 바꾼 뒤 바로 안 보이면
새 탭에서 /favicon.ico를 직접 열어 보거나 캐시를 지우세요. 워드프레스는 "외모 → 사용자 정의 → 사이트 아이콘"에 512 PNG를 올리면 됩니다.
자주 묻는 질문
그림이 서버로 올라가나요?
아니요. 크기를 줄이고 ICO·PNG·ZIP으로 묶는 일이 전부 브라우저 안에서 이뤄집니다. 인터넷을 끊어도 동작합니다. 공개 전인 로고를 올려도 어디에도 남지 않습니다.
어떤 그림을 올려야 하나요?
정사각형에 가깝고 512px 이상이면 모든 크기가 선명합니다. SVG를 올리면 어떤 크기도 또렷합니다. 배경이 투명한 PNG가 가장 좋지만, 흰 배경이면 "배경"을 그대로 두고 쓰거나 흰 배경 투명하게에서 먼저 지우세요.
ICO 파일 하나로 끝낼 수 없나요?
탭 아이콘만 필요하면 "favicon.ico만 저장"으로 충분합니다. 다만 아이폰 홈 화면·안드로이드·설치형 웹앱은 ICO를 읽지 않고 PNG를 요구하므로, 휴대폰까지 생각하면 ZIP 전체를 쓰는 편이 좋습니다.
여백은 왜 넣나요?
안드로이드는 아이콘을 둥근 모양 등으로 잘라 보여 주는데(마스크), 그림이 가장자리까지 꽉 차 있으면 잘려 나갑니다. 여백 10~15%를 두면 어떤 모양으로 잘려도 안전합니다. 탭 아이콘은 반대로 꽉 채워야 커 보입니다.
투명 배경을 넣었는데 검게 나와요
ICO 안의 그림은 32비트(투명 포함)로 담으므로 정상이라면 투명합니다. 일부 오래된 윈도우 프로그램은 ICO의 투명을 검정으로 보여 줍니다. 브라우저에서는 문제없습니다. 걱정되면 "배경"을 흰색으로 지정하세요.
site.webmanifest에 사이트 이름이 왜 들어가나요?
안드로이드에서 홈 화면에 추가할 때 아이콘 아래에 보이는 이름입니다. 비워 두면 브라우저가 페이지 제목을 씁니다. 나중에 파일을 메모장으로 열어 바꿀 수 있습니다.