로고·파비콘 준비, 홈페이지 제작 전 챙길 파일 형식과 크기 6가지

로고·파비콘 준비는 확대해도 깨지지 않는 벡터 원본, 배경이 투명한 PNG, 가로형·심볼 같은 변형, 밝은 배경과 어두운 배경용 색 버전, 정사각형 파비콘 원본을 갖추면 끝납니다. 이 글에서는 파일 형식별 쓰임새와 크기 기준, 제작 전에 점검할 항목을 정리했습니다.

로고와 파비콘이 홈페이지에서 쓰이는 곳

로고는 홈페이지 맨 위 머리글, 맨 아래 바닥글, 공유 미리보기 이미지, 관리자 화면, 문의 알림 메일 등 생각보다 여러 곳에 들어갑니다. 위치마다 배경색과 크기가 달라서 로고 파일 하나로 모든 자리를 해결하기 어렵습니다. 어두운 사진 위에 올라가는 첫 화면에서는 흰색 로고가, 좁은 휴대폰 머리글에서는 심볼만 있는 로고가 필요할 수 있습니다.

파비콘은 브라우저 탭, 즐겨찾기, 휴대폰 홈 화면, 검색 결과의 사이트 이름 옆에 보이는 작은 아이콘입니다. 아주 작게 보이므로 로고 전체를 줄이기보다 심볼이나 첫 글자처럼 단순한 모양을 쓰는 편이 알아보기 쉽습니다.

로고 파일 형식과 쓰임새

아래 표는 홈페이지 제작을 맡길 때 함께 전달하면 좋은 로고 파일 형식과 각 파일의 쓰임새를 비교한 것입니다.

파일	형식	쓰임새
벡터 원본	AI, SVG, PDF, EPS	크기를 바꿔도 깨지지 않는 원본, 다른 파일을 만드는 출발점
투명 배경 이미지	PNG	사진이나 색 배경 위에 올리는 로고
웹용 벡터	SVG	홈페이지 머리글처럼 선명하게 보여야 하는 자리
가로형·세로형	위 형식과 같음	머리글은 가로형, 정사각형 자리는 세로형
심볼	위 형식과 같음	좁은 모바일 머리글, 파비콘, SNS 프로필
색 버전	위 형식과 같음	밝은 배경용 기본색, 어두운 배경용 흰색·단색

벡터 원본이 없을 때

그림의 첫 카드인 벡터 원본이 가장 중요합니다. 로고를 만든 디자이너나 업체에 원본 파일을 요청하는 것이 먼저이고, 명함 인쇄소에 원본이 남아 있는 경우도 있습니다. 끝내 찾을 수 없다면 작은 JPG를 늘려 쓰기보다 로고를 벡터로 다시 그리는 작업을 검토하는 것이 좋습니다. 작은 이미지를 키우면 경계가 흐려져 큰 화면에서 바로 티가 납니다.

로고 크기와 여백

PNG처럼 픽셀로 된 파일은 실제로 보일 크기보다 넉넉하게, 가로 1,000px 이상으로 준비해 두면 고해상도 화면에서도 선명합니다. 로고 둘레에 불필요한 여백이 많으면 머리글에 넣었을 때 로고가 작아 보이므로, 투명 PNG는 로고 모양에 맞춰 여백을 줄여 저장합니다. 반대로 로고 사용 규정에 최소 여백이 정해져 있다면 제작 업체에 함께 전달합니다.

파비콘 형식과 크기 기준

Google 검색 센터의 검색 결과 파비콘 안내에 따르면 파비콘은 가로세로 1:1 정사각형이어야 하고, 최소 8×8px이지만 여러 화면에서 잘 보이도록 48×48px보다 크게 만들 것을 권합니다. 지원 형식으로는 ICO, PNG, GIF, JPEG 등이 나와 있고, 홈페이지 첫 화면의 머리 부분에 링크 태그로 지정합니다. 호스트 이름 하나에 파비콘 하나만 지원하며, 파비콘 주소를 자주 바꾸지 말라고 안내합니다.

브라우저는 여러 아이콘이 지정되어 있으면 형식과 크기 정보를 보고 알맞은 것을 고릅니다. MDN의 rel 속성 문서는 iOS가 일반 아이콘 대신 apple-touch-icon이라는 별도 지정을 쓴다고 설명합니다. 그래서 정사각형 원본을 512×512px 이상으로 하나 만들어 두고, 거기서 필요한 크기를 뽑아 쓰는 방식이 편합니다.

작게 줄여 보고 고르기

파비콘 후보를 만들었다면 실제 탭 크기 정도로 줄여서 확인합니다. 가는 선, 작은 글자, 복잡한 그러데이션은 줄이면 뭉개집니다. 굵은 선의 심볼이나 첫 글자 한두 개를 배경색과 대비가 뚜렷하게 배치하는 것이 대체로 잘 보입니다.

제작 전 로고·파비콘 점검 체크리스트

홈페이지 제작을 맡기기 전에 아래 항목을 확인해 두면 자료를 주고받는 시간을 줄일 수 있습니다.

• 로고 벡터 원본을 갖고 있고, 로고에 대한 권리를 회사가 갖고 있는가
• 투명 배경 PNG를 넉넉한 크기로 준비했는가
• 가로형과 심볼 등 필요한 변형이 있는가
• 어두운 배경에서 쓸 흰색 또는 단색 버전이 있는가
• 파비콘으로 쓸 정사각형 원본이 있고, 작게 줄여도 알아볼 수 있는가
• 회사 대표 색상 값을 정리해 두었는가

그림의 여섯 항목을 기획 자료와 함께 넘기면 디자인 시안 단계가 훨씬 빨라집니다. 업체에 넘길 자료 전체는 홈페이지 기획서 작성법에서 함께 정리할 수 있고, 로고 이미지의 용량 관리는 홈페이지 이미지 용량 줄이기를 참고하세요.

디코랩이 돕는 방식

디코랩의 원페이지 홈페이지는 제작비 330,000원(VAT 포함)에 도메인·웹호스팅·유지관리 1년이 포함되며, 자료를 받은 날부터 1주일 이내에 오픈합니다. 로고 같은 자료를 미리 갖춰 두면 일정이 수월해집니다. 자세한 조건은 원페이지 홈페이지 제작 안내에서 확인할 수 있습니다.

자주 묻는 질문

로고가 JPG 파일 하나뿐인데 홈페이지를 만들 수 있나요?

만들 수는 있지만 배경이 흰색으로 고정되고 크게 키우면 흐려질 수 있습니다. 원본을 먼저 찾아보고, 없다면 벡터로 다시 그리는 작업을 함께 검토하는 것이 좋습니다.

파비콘은 ICO 파일로만 만들어야 하나요?

꼭 그렇지는 않습니다. Google 검색 센터 안내에는 ICO 외에 PNG, GIF, JPEG 등도 지원 형식으로 나와 있습니다. 브라우저와 기기별로 필요한 형식이 다를 수 있어 보통 여러 크기와 형식을 함께 지정합니다.

파비콘을 바꿨는데 검색 결과에는 예전 아이콘이 보여요.

Google 안내에 따르면 파비콘 변경이 검색 결과에 반영되기까지 며칠에서 몇 주가 걸릴 수 있습니다. 브라우저 탭에서는 캐시 때문에 예전 아이콘이 남아 있을 수 있으니 새로고침이나 다른 브라우저로 확인해 보세요.

로고를 홈페이지 업체가 새로 만들어 주기도 하나요?

업체마다 다르므로 상담 때 확인해야 합니다. 새로 만든다면 원본 파일과 사용 권리를 누가 갖는지 계약서에 적어 두세요.

로고와 자료를 준비해 홈페이지 제작을 시작하고 싶다면 가지고 있는 파일 목록을 적어 디코랩 프로젝트 문의로 보내 주세요.