Framer 웹사이트에 파비콘 추가하는 방법: 다크 모드, Apple Touch Icon, 문제 해결 가이드

Framer에서 파비콘을 추가하려면: 사이트 설정(⌘ + ,)을 열고 "Site Images" → "Favicon"으로 스크롤한 다음, 64x64 PNG 파일을 업로드하고 사이트를 게시하면 됩니다. 이게 전부입니다.

이제 세부 사항과 발생할 수 있는 문제 해결 방법을 알아보겠습니다.

Framer 파비콘 사양

Framer에서 요구하는 파비콘 사양은 다음과 같습니다:

• 크기: 64 x 64 픽셀
• 형식: PNG (권장)
• 배경: 투명

1단계: 사이트 설정 열기

설정에 접근하는 두 가지 방법이 있습니다:

• 키보드: ⌘ + , (Mac) 또는 Ctrl + , (Windows) 누르기
• 메뉴: Framer 아이콘 → Site Settings → Open Settings 클릭

2단계: 파비콘 섹션 찾기

• "Site Images"까지 아래로 스크롤합니다
• "Favicon" 업로드 영역을 찾습니다

3단계: 파비콘 업로드

Framer는 두 개의 업로드 슬롯을 제공합니다:

• Light Theme Favicon: 라이트 모드 브라우저에서 표시됩니다
• Dark Theme Favicon: 다크 모드 브라우저에서 표시됩니다

파비콘이 하나뿐이라면 두 슬롯에 동일한 이미지를 업로드하면 됩니다.

4단계: 사이트 게시

• Publish 버튼을 클릭합니다
• 파비콘은 미리보기가 아닌 실제 게시된 사이트에서만 나타납니다

라이트 모드와 다크 모드 지원

왜 두 가지 버전이 필요한가요?

• 어두운 로고는 다크 모드 브라우저 탭에서 보이지 않습니다
• 밝은 로고는 라이트 모드 브라우저 탭에서 보이지 않습니다
• 별도의 버전을 사용하면 모든 모드에서 가시성을 보장할 수 있습니다

버전 만드는 방법

1. 기본 파비콘으로 시작합니다
2. 대체 버전을 위해 색상을 반전합니다
3. 동일한 형태와 디자인을 유지합니다
4. 두 버전 모두 투명 배경을 사용합니다

Apple Touch Icon 설정

2024년 9월부터 Framer는 Apple Touch Icon을 지원합니다:

• 위치: 동일한 Site Images 섹션
• 크기: 180 x 180 픽셀
• 용도: iOS 기기에서 홈 화면 아이콘으로 사용

문제 해결: 파비콘이 표시되지 않는 경우

기본 사항 확인

• 사이트를 게시했나요?
• 강력 새로고침: Cmd+Shift+R 또는 Ctrl+Shift+R
• 시크릿(비공개) 브라우저 창에서 확인해 보세요

업로드 위치 확인

• 페이지 설정이 아닌 사이트 설정에 있어야 합니다
• 파일이 유효한 PNG 형식이어야 합니다

문제 해결: Google에 이전 파비콘이 표시되는 경우

Google은 파비콘을 느리게 업데이트합니다 (며칠에서 몇 주 소요).

업데이트 속도를 높이는 방법

1. 파비콘이 사이트에 정상적으로 게시되었는지 확인합니다
2. Google Search Console을 엽니다
3. 홈페이지에 URL 검사 도구를 사용합니다
4. 색인 생성을 요청합니다

문제 해결: Safari 관련 문제

Safari는 파비콘을 매우 적극적으로 캐시합니다.

해결 방법

1. Safari 캐시를 완전히 삭제합니다
2. 파비콘 캐시를 삭제합니다: ~/Library/Safari/Favicon Cache/
3. Safari를 종료하고 다시 엽니다

문제 해결: Framer 로고가 계속 표시되는 경우

일반적인 원인:

• 파비콘 업로드 후 사이트를 게시하지 않은 경우
• 브라우저 캐시 문제
• 게시된 사이트가 아닌 미리보기를 보고 있는 경우

해결 방법: 사이트를 게시하고 브라우저 캐시를 삭제합니다.

모범 사례

• 파일 백업: 원본 파비콘 파일을 저장해 두세요
• 모든 환경에서 테스트: Mac, Windows, iOS, Android에서 확인하세요
• 검사 도구 사용: Favicon.im에서 설정을 검증할 수 있습니다
• 색상 기록: 브랜드 일관성을 위해 정확한 HEX 코드를 기록해 두세요

자주 묻는 질문

Framer에서 파비콘을 어떻게 추가하나요?

사이트 설정을 ⌘ + ,으로 열고 "Site Images"로 스크롤한 다음 "Favicon"을 클릭하고 64x64 PNG 파일을 업로드한 후 사이트를 게시합니다.

Framer 파비콘 권장 크기는 얼마인가요?

Framer는 투명 배경의 64 x 64 픽셀 PNG 형식을 권장합니다.

Framer 파비콘이 표시되지 않는 이유는 무엇인가요?

가장 흔한 원인: 사이트 미게시, 브라우저 캐시, 잘못된 업로드 위치입니다. 사이트를 게시하고, 강력 새로고침을 하거나, 시크릿 브라우저 창에서 확인해 보세요.

Google이 파비콘을 업데이트하는 데 얼마나 걸리나요?

Google은 파비콘을 느리게 업데이트합니다—보통 며칠에서 몇 주가 소요됩니다. Google Search Console을 통해 재색인을 요청하면 과정을 앞당길 수 있습니다.

Framer는 다크 모드 파비콘을 지원하나요?

네. 2024년 9월부터 Framer는 Site Images 설정에서 라이트 테마와 다크 테마 파비콘을 각각 업로드할 수 있습니다.

참고 자료

1. How to set up a favicon in Framer - Framer 공식 도움말
2. September 2024 Update: Apple Touch Icon and Favicons - Framer 업데이트
3. Why isn't Safari displaying the favicon? - Framer 문제 해결
4. Favicon.im - 파비콘 테스트 및 검증 도구