워드프레스로 사이트를 운영하다 보면 언젠가 한 번은 꼭 부딪히는 게 바로 로고와 파비콘(파비콘 = 브라우저 탭에 뜨는 작은 아이콘) 입니다.
콘텐츠가 아무리 좋아도 로고와 파비콘이 없으면 사이트가 임시 사이트처럼 보이고,
반대로 로고·파비콘만 잘 만들어도 “브랜드 느낌”이 확 살아납니다.
이 글에서는 로고는 어떻게 만들면 좋은지, 파비콘은 몇 픽셀로 준비해야 하는지, 워드프레스에 적용하는 방법까지 한 번에 정리해 드리겠습니다.
1️⃣ 로고 vs 파비콘, 어떤것이 다른걸까?
먼저 두 가지 개념부터 나눠서 이해하시면 훨씬 정리가 잘 됩니다.
- 로고(Logo)
- 헤더(상단 메뉴), 푸터, 썸네일, 카드 이미지 등에 들어가는 브랜드 대표 이미지
- 보통 가로형/정사각형 두 종류를 준비하면 활용도가 높습니다.
- 파비콘(Favicon / 사이트 아이콘)
- 브라우저 탭, 모바일 홈 화면, 북마크에 보이는 작은 아이콘
- 아주 작게 보이기 때문에 심볼만, 단순한 형태가 좋습니다.
- 워드프레스에서는 “사이트 아이콘”이라는 이름으로 등록합니다.
두 개를 완전히 다른 그림으로 만들 필요는 없습니다.
대부분 같은 로고를 기반으로 하나는 가로형, 하나는 심볼형(정사각형)으로 나누어 사용하는 것이 가장 실용적인 방법입니다.
2️⃣ 로고 만들 때 권장사항 (파일 형식·사이즈·컬러)
로고 디자인을 거창하게 할 필요는 없지만,
아래 기준만 지키면 초보자도 깔끔하고 오래 써도 괜찮은 로고를 만들 수 있습니다.
✔ 파일 형식
- 추천: PNG, SVG
- PNG: 배경 투명(transparent) 처리 가능 → 헤더에 올렸을 때 깔끔
- SVG: 벡터 형식이라 크기를 키워도 깨지지 않음 (지원하는 테마에서 사용)
✔ 기본 사이즈 (웹용 로고)
- 가로형 로고:
- 가로 600~1000px, 세로 150~300px 정도 권장
- 너무 작게 만들면 헤더에서 흐릿하게 보일 수 있습니다.
- 정사각형/심볼형 로고:
- 400×400px 정도로 만들어두면 다양하게 활용하기 좋습니다.
워드프레스에서는 테마에서 자동으로 축소해서 보여주기 때문에
원본 로고는 약간 넉넉한 사이즈로, 하지만 1MB를 넘지 않게 만들어두는 것이 좋습니다.
✔ 컬러 & 형태
- 배경은 투명(transparent) 또는 사이트 메인 배경색과 맞추기
- 너무 많은 색보다는 2~3가지 색으로 통일
- 글자가 많은 로고보다,
→ 심볼 + 짧은 텍스트 조합이 훨씬 깔끔하게 보입니다.
3️⃣ 파비콘(사이트 아이콘) 적합한 사이즈 정리
파비콘은 워드프레스에서 한 번만 업로드하면
브라우저·모바일에서 자동으로 여러 사이즈로 생성해 줍니다.
그래도 처음 만들 때 기본 사이즈를 잘 맞춰 두는 것이 중요합니다.
✔ 파비콘 기본 가이드
- 권장 기본 이미지 사이즈:
👉 512×512px PNG (배경 투명 또는 단색)
이 한 장만 있으면 워드프레스가 32×32, 48×48 등 다양한 크기로 알아서 변환해 줍니다. - 디자인 팁
- 작은 크기로 줄어들기 때문에 글자 말고 심볼 중심으로 디자인
- 선 두께를 너무 얇게 하지 않기
- 여백을 로고 주위로 조금 남겨두면 동그랗게 잘려도 자연스럽습니다.
✔ 용도별 추천 사이즈 표
| 용도 | 권장 사이즈 | 비고 |
|---|---|---|
| 워드프레스 사이트 아이콘(파비콘) | 512×512px PNG | 한 장만 업로드하면 자동 리사이즈 |
| 브라우저 탭 기본 아이콘 | 32×32px | 워드프레스가 자동 생성 |
| 모바일 홈 화면 아이콘 | 180×180px 이상 | 역시 512×512로 커버 가능 |
4️⃣ 워드프레스에 로고·파비콘 적용하는 꿀팁
✔ 로고 적용 (테마에 따라 위치가 다를 수 있음)
- 워드프레스 관리자 접속
- 외모 → 사용자 정의하기(또는 커스터마이저)
- “사이트 기본 정보” 또는 “헤더 → 로고” 메뉴 선택
- 미디어 라이브러리에서 로고 이미지 선택
- PC·모바일에서 깨지지 않는지 미리보기 확인 후 발행
GeneratePress, Astra 등 테마를 쓰고 있다면
“레이아웃 → 헤더 → 로고 영역”에서 세부 여백·크기 조절도 가능합니다.
✔ 파비콘(사이트 아이콘) 적용
- 외모 → 사용자 정의하기
- “사이트 기본 정보” 또는 “사이트 아이콘” 메뉴로 이동
- 512×512px PNG 업로드
- “브라우저 탭, 북마크, 모바일에서 이렇게 보입니다” 미리보기 확인
- 저장/발행
브라우저 캐시 때문에 바로 안 바뀌어 보일 수 있으니,
- 다른 브라우저
- 시크릿 모드
- 모바일
에서 한 번씩 확인해 보시면 더 정확합니다.
✔ 로고·파비콘 적용 후 최종 체크리스트
- PC·모바일에서 로고가 너무 작거나 흐릿하게 보이지 않는지
- 다크모드/밝은 배경에서 모두 잘 보이는 색인지
- 파비콘이 너무 복잡하지 않고 심볼이 한눈에 들어오는지
- 북마크/모바일 홈 화면에 추가했을 때도 브랜드가 잘 보이는지
로고와 파비콘은 한 번 잘 만들어두면
워드프레스뿐 아니라 유튜브, 인스타, 썸네일, 명함까지 계속 재활용할 수 있는 내 자산이 됩니다.