Framer 사이트를 발행한 뒤 브라우저 탭에 일반적인 지구 모양 아이콘이 표시된다면 다음 세 가지를 확인하세요. 프로젝트의 favicon 설정, 발행된 도메인, HTML 응답입니다. 프로젝트 수준에서 Framer favicon을 교체할 수 있으므로 페이지 디자인을 다시 할 필요는 없습니다.

우선 Framer의 기본 업로더를 사용하세요. 아이콘이 프로젝트에 연결된 상태로 유지되고, 별도의 HTML 코드 스니펫이 필요하지 않습니다. SVG, 특정 크기 또는 직접 관리하는 asset URL이 필요한 경우에만 custom code를 사용하세요.

시작하기 전에

더 넓은 범위의 업로드 방법은 no-code favicon 가이드에서 확인하세요. 아래에서는 Framer 설정, 발행 및 검증에 초점을 둡니다.

Framer favicon 추가 방법

  1. 프로젝트 설정을 여세요.

    Framer에서 프로젝트를 열고, 상단 프로젝트 메뉴에서 Settings를 선택한 다음 사이트 설정을 여세요. 일반적인 사이트 세부 정보 아래에서 Favicon 또는 Site Icon 필드를 찾으세요. 필드가 보이지 않으면 같은 패널의 SEO 또는 사이트 메타데이터 섹션을 확인하세요. 특정 한 페이지에만 설정하지 마세요.

  2. 정사각형 아이콘을 업로드하세요.

    Upload를 선택하고 PNG를 선택한 뒤 크롭을 확인하세요. 중앙에 맞추고, 탭 크기에서는 사라지는 작은 글자는 제거하세요. 변경 사항을 저장합니다. 필드에서 SVG 또는 ICO를 허용하면 해당 파일을 사용하고, 그렇지 않으면 PNG를 사용하세요.

  3. 프로젝트를 발행하세요.

    Publish를 선택한 다음 발행된 URL을 새 탭에서 여세요. 방문자에게 제공되는 화면은 편집기 canvas가 아닙니다.

  4. 실제 응답을 검증하세요.

    DevTools의 Elements 패널에서 rel='icon'을 검색하세요. URL이 업로드한 asset을 가리키는지 확인합니다. Network 패널에서 해당 asset을 요청하고 status를 확인하세요. 실패한 요청은 탭 아이콘을 업데이트할 수 없습니다.

  5. 명시적인 override가 필요할 때만 custom code를 사용하세요.

    프로젝트 설정에 Custom Code가 있다면 Head 섹션을 열고 아래 코드를 추가하세요. 이때 두 URL을 모두 공개적으로 접근할 수 있는 HTTPS asset URL로 바꾸세요.

    <link rel='icon' type='image/svg+xml' href='https://your-domain.com/favicon.svg'>
<link rel='icon' type='image/png' sizes='512x512' href='https://your-domain.com/favicon-512.png'>

    HTML Standard는 rel='icon'을 사용하는 외부 아이콘 링크를 정의합니다. 기본 업로더나 기존 코드 스니펫을 비활성화해 아이콘의 source가 하나뿐이도록 하세요.

흔히 빠지는 함정

결론

가장 깔끔한 구성은 관리 주체를 하나로 두는 것입니다. 프로젝트 설정에서 favicon을 관리하세요. 정사각형 PNG를 업로드하고 게시한 뒤 live HTML을 점검하며, custom code는 의도적으로 기본값을 재정의할 때만 사용하세요. 이렇게 하면 다음 favicon 교체도 예측 가능한 상태로 유지됩니다.