본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

파비콘이란?

파비콘(favicon)은 웹 브라우저 탭, 즐겨찾기 목록 등에서 웹사이트를 대표하는 작은 아이콘입니다. 사이트의 브랜드 인식도를 높이는 데 효과적입니다.
Framer에서는 별도의 코드 수정 없이, 설정 메뉴를 통해 간단히 파비콘을 업로드할 수 있습니다.

파비콘 설정하는 방법

1. Framer 프로젝트 열기

2. 왼쪽 상단의 Site Settings 아이콘 클릭

3. General 섹션으로 이동

4. 스크롤하여 Favicon 항목에서 이미지 업로드

Note: Light Theme, Dark Theme 용 이미지를 각각 업로드할 수 있고, 권장 사이즈의 형식은 64 x 64 픽셀, PNG 파일 입니다.

파비콘이 보이지 않는 경우

어떤 경우에는 파비콘을 업로드 해도 브라우저나 검색 결과에 바로 반영되지 않을 수 있습니다.
그럴 때에는 아래의 내용을 참고해보세요.

1. Google 검색 결과에서 안 보일 때

• Google은 파비콘을 매우 드물게 갱신하기 때문에 파비콘을 업로드한 직후에는 새로운 파비콘이 제대로 보이지 않을 수 있습니다.(보통 며칠에서 수 주가 걸릴 수 있습니다.)

• Google의 파비콘 가이드라인을 준수했는지 확인해보세요.

2. Safari에서 안 보일 때

• Safari는 캐시 문제로 인해 파비콘이 제대로 보이지 않을 수 있습니다. 이런 경우엔 Apple 관련 설정이나 캐시 삭제가 필요할 수 있습니다.

• 자세한 해결 방법은 Framer의 관련 문서를 참고하세요.

자주 묻는 질문

Q. 파비콘이 여러 플랫폼에서 다르게 보여요!

각 브라우저마다 캐시 처리 방식이 다르기 때문일 수 있습니다. 몇 번 새로고침하거나, 브라우저 캐시를 삭제해보세요.

Q. 파비콘을 GIF나 SVG로 만들 수 있나요?

기술적으로는 가능하지만, 호환성과 성능 면에서 PNG 사용이 가장 안정적입니다.

본 글은 Framer 공식 블로그의 ‘How to set up a favicon in Framer’ 를 번역·각색한 콘텐츠입니다.