사용 방법
- 1
정사각형에 가까운 로고 이미지(PNG/SVG 권장)를 올립니다.
- 2
배경(투명/색상), 여백, 맞춤 방식을 고르고 미리보기에서 작은 크기의 모양을 확인합니다.
- 3
"ZIP으로 받기"를 누르고 압축을 풀어 사이트 최상위 폴더에 올린 뒤, 함께 나오는 HTML 코드를 <head>에 붙여 넣습니다.
이럴 때 쓰세요
파비콘 사이즈가 헷갈릴 때
브라우저 탭은 16·32px, 바탕화면 바로가기는 48px, 아이폰은 180px, 안드로이드는 192·512px을 씁니다. 이 도구는 모든 크기를 한 번에 만듭니다.
티스토리·워드프레스에 파비콘을 넣을 때
티스토리는 favicon.ico를, 워드프레스는 512px PNG(사이트 아이콘)를 올리면 됩니다. 둘 다 ZIP 안에 들어 있습니다.
PNG 로고를 ICO로 바꾸고 싶을 때
PNG·SVG·JPG 로고를 올리면 여러 크기가 담긴 진짜 .ico 파일을 만듭니다.
알아두면 좋은 점
- 16px에서는 세부 묘사가 보이지 않으니 단순한 심볼이나 첫 글자가 잘 보입니다.
- 애플 터치 아이콘은 투명 배경 대신 색 배경을 쓰는 것이 iOS에서 보기 좋습니다.
- site.webmanifest의 name 값은 사이트 이름으로 바꿔 주세요.
자주 묻는 질문
ICO 파일이 꼭 필요한가요?
최신 브라우저는 PNG 아이콘도 읽지만, 일부 브라우저와 도구가 /favicon.ico를 직접 찾기 때문에 함께 두는 것이 안전합니다.
정사각형이 아닌 이미지는요?
"맞춤"은 여백을 넣어 전체를 보이게 하고, "채우기"는 가운데를 기준으로 잘라 냅니다.
파일이 업로드되나요?
아니요. 모든 크기를 브라우저에서 만듭니다.