워드프레스 파비콘 설정하는 방법은 의외로 간단합니다.
기본 설정 방법: 커스마이저와 사이트 편집기에서 파비콘 넣기
클래식 테마
1) 관리자 > 외모 > 사용자 정의(커스마이저) > 사이트 아이덴티티 > 사이트 아이콘.
2) 최소 512×512의 정사각 PNG 업로드 후 자르기.
3) 저장하고 브라우저 새로고침으로 확인.
블록 테마(사이트 편집기) 1) 관리자 > 외모 > 편집기(사이트 편집기) 진입.
2) 우측 상단 톱니바퀴 아이콘 > 사이트 설정 또는 스타일에서 사이트 아이콘 항목을 찾는다.
3) 512×512 PNG 업로드 후 저장.
팁
- 원본은 투명 배경 PNG가 선명하다.
- 원형 디자인은 24px 이하에서 안쪽 여백을 충분히 남긴다.
- 한 번 적용 후 즉시 안 바뀌면 캐시 영향일 수 있다. 아래 해결법 참고.
적용했는데 파비콘이 안 바뀔 때 어떻게 하나요?
브라우저 캐시
- 강력 새로고침: Windows Ctrl+F5, macOS Cmd+Shift+R.
- 파비콘 URL을 주소창에 직접 열어 새 리소스 수신 여부 확인.
- 파일명 변경 또는 버전 쿼리 추가: /favicon-32.png?v=202508.
워드프레스·서버 캐시
- 캐시 플러그인(WP Rocket, LiteSpeed Cache 등) 전체 비우기.
- 객체 캐시(Redis/Memcached) 플러시.
- 서버 캐시(Nginx fastcgi_cache, Apache mod_cache) 비우기.
CDN 캐시
- CDN 대시보드에서 /favicon.*, /apple-touch-icon.png, /site.webmanifest 경로 퍼지.
- 파비콘 경로는 캐시 예외로 두면 교체가 쉬워진다.
워드프레스 멀티사이트
- 각 사이트 도메인/서브디렉터리 기준으로 별도 파비콘을 지정한다. 네트워크 공통 루트에 두면 섞일 수 있다.
실전 팁: 선명도·다크 모드·접근성
디자인
- 24px에서도 형태가 구분되는 단순한 실루엣으로 만든다.
- 배경과 대비(명도 차) 최소 3:1 이상을 유지한다.
- 테두리 1px 내외를 두면 밝은 탭에서도 경계가 또렷하다.
다크 모드
- PNG는 밝은/어두운 배경 모두에서 보이도록 대비를 충분히 준다.
- Safari pinned tab은 SVG + mask-icon을 쓰고 color 속성으로 색을 지정한다.
파일 최적화
- PNG는 8비트 팔레트/무손실 압축으로 용량을 낮춘다.
- 512×512는 100KB 내외를 목표로 한다.
- 불필요한 EXIF/메타데이터 제거.
운영 팁
- 교체 주기마다 파일명에 버전을 붙여 캐시 문제를 줄인다: favicon-2025-08.png.
- 크롤러가 파비콘을 찾는 기본 경로(/favicon.ico)도 준비해 호환성을 확보한다.
- 멀티 언어·서브도메인 환경은 도메인별 별도 세트를 둔다.
자주 묻는 질문(FAQ)
Q. .ico와 .png 중 무엇을 써야 하나?
A. 현대 브라우저는 PNG를 선호한다. 다만 /favicon.ico도 함께 두면 레거시 호환이 올라간다.
Q. SVG만 써도 될까?
A. 데스크톱 크롬/엣지는 SVG 파비콘을 지원하지만, 모든 환경에서 완전하지 않다. PNG 세트와 병행이 안정적이다.
Q. 워드프레스에서 이미지가 자동으로 잘리는데?
A. 기본 UI의 자르기 기능을 쓰기 전에 원본을 정사각형으로 맞춘다. 로고가 테두리에 닿지 않도록 안쪽 여백을 둔다.
Q. 테마나 빌더가 따로 파비콘 옵션을 제공한다. 어디 것을 써야 하나?
A. 우선순위 충돌을 피하려면 한 채널만 사용한다. 중복 선언 시 브라우저가 예측과 다르게 선택할 수 있다.
핵심 포인트 되짚기
- 워드프레스 기본 기능으로 512×512 PNG만 설정해도 대부분의 브라우저에서 표시된다.
- 애플·안드로이드·데스크톱 완전 대응을 원하면 크기별 세트와 manifest, mask-icon까지 준비한다.
- 변경 직후 미반영 문제는 캐시와 파일명 버전 관리로 해결한다.
- 가독성, 대비, 여백이 파비콘 품질을 좌우한다.
