Shopify용 파비콘
Shopify를 사용하면 테마 편집기에서 파비콘을 몇 초 만에 업로드할 수 있습니다. 모든 최신 Shopify 테마는 테마 설정 아래에 파비콘 필드를 표시하며 Shopify의 CDN은 매장의 모든 페이지에 아이콘을 제공합니다. favicon generator를 사용하여 먼저 정사각형 512×512 PNG를 만듭니다. Shopify는 자동으로 필요한 32×32 디스플레이 크기로 크기를 조정합니다.
파비콘은 잠재 고객이 여러 탭을 열 때 보게 되는 첫 번째 브랜드 신호 중 하나입니다. Shopify 스토어에서는 파비콘이 브라우저 탭, 북마크바, 주소 표시줄에 나타납니다. 선명하고 알아보기 쉬운 파비콘은 브랜드 신뢰를 강화하고 쇼핑객이 열려 있는 수십 개의 탭 중에서 매장 탭을 빠르게 찾을 수 있도록 도와줍니다.
모든 최신 Shopify 테마(Dawn, Refresh 및 대부분의 프리미엄 테마)에는 테마 설정 아래 Theme Editor에 파비콘 필드가 포함되어 있습니다. 액세스하려면 Shopify 관리자에 로그인하고 온라인 스토어 > 테마로 이동한 후 라이브 테마 옆에 있는 사용자 정의를 클릭하세요. 왼쪽 사이드바에서 테마 설정(또는 기어 아이콘)을 클릭한 다음 파비콘 섹션을 찾으세요.
Shopify에서는 파비콘 필드에 32×32 픽셀의 정사각형 PNG를 업로드할 것을 권장합니다. 실제로 512×512 PNG를 업로드하면 Shopify가 32×32 원본에서 시작할 때보다 품질이 더 좋은 32×32로 다운샘플링되기 때문에 더 선명한 결과가 생성됩니다. 항상 가지고 있는 가장 큰 정사각형 소스부터 시작하세요. 생성기를 사용하면 이 작업이 쉬워집니다.
파비콘을 업로드한 후 Theme Editor 오른쪽 상단에 있는 저장을 클릭하세요. Shopify는 이미지를 처리하여 CDN에 업로드하고 몇 분 안에 모든 매장 페이지에 전파합니다. 테마를 다시 게시하거나 다른 코드를 변경할 필요가 없습니다.
오래되었거나 심하게 맞춤화된 Shopify 테마는 테마 설정에서 파비콘 필드를 노출하지 않을 수 있습니다. 이 경우 테마의 Liquid 코드를 직접 편집해야 합니다. 테마 파일 편집기(온라인 스토어 > 테마 > 코드 편집)를 열고 theme.liquid 파일을 찾은 다음 '<head>' 섹션을 찾으세요. favicon.png를 테마의 Assets 폴더에 업로드한 후 '<link rel='icon' type='image/png' href='{{ 'favicon.png' | asset_url }}'>'를 삽입하세요.
2.0 테마 프레임워크의 Shopify 스토어의 경우 파비콘은 Shopify가 테마 설정에서 자동으로 생성하는 site.webmanifest를 통해 관리됩니다. 스토어에서 Progressive Web App 셸을 사용하는 경우 Shopify의 매니페스트에는 파비콘이 앱 아이콘으로 포함됩니다. 테마 파비콘을 업데이트하면 매니페스트 아이콘이 자동으로 업데이트되므로 추가 JSON 편집이 필요하지 않습니다.
투명 배경은 Shopify 파비콘에서 올바르게 작동합니다. 테마 편집기는 CDN에 업로드할 때 PNG 알파 채널을 유지합니다. 그러나 로고 배경이 흰색인 경우 어두운 모드 브라우저 탭에 흰색 상자가 표시됩니다. 이를 방지하려면 업로드하기 전에 배경 채우기 없이 로고를 내보내세요.
여러 Shopify 매장을 운영하는 경우(해외 매장의 공통 설정) 각 매장에는 파비콘이 독립적으로 설정되어 있어야 합니다. 파비콘은 Shopify 파트너 또는 조직 수준 설정이 아닌 매장별 설정입니다. 각 매장의 관리자에 로그인하고 Theme Editor 단계를 반복하세요.
캐시 무효화로 인해 Shopify에서 파비콘 업데이트가 지연될 수 있습니다. Shopify의 CDN은 TTL이 긴 자산을 캐시합니다. 파비콘을 변경한 후에도 브라우저는 몇 시간 동안 이전 파비콘을 계속 표시할 수 있습니다. 캐시 간섭 없이 업데이트된 아이콘을 보려면 비공개/시크릿 창을 엽니다. 또는 브라우저에 새로 고침을 지시하세요(Windows에서는 Ctrl+Shift+R, Mac에서는 Cmd+Shift+R).
Shopify는 테마 템플릿에 포함되어 있지 않는 한 apple-touch-icon 또는 웹 앱 매니페스트 링크 태그를 기본적으로 삽입하지 않습니다. iOS 홈 화면 설치에서 페이지 스크린샷 대신 로고를 표시하려면 온라인 스토어 > 테마 > 코드 편집 > theme.liquid를 통해 apple-touch-icon 태그를 수동으로 추가하세요. `<link rel='apple-touch-icon' size='180x180' href='{{ 'apple-touch-icon.png' | '<head>' 섹션의 asset_url }}'>`을 입력하고 180×180 PNG를 자산에 업로드하세요.
Shopify Plus 매장의 경우 결제 브랜딩을 사용하여 기본 매장 파비콘과 별도로 결제 흐름에서 파비콘을 맞춤 설정할 수 있습니다. Checkout 브랜딩은 설정 > Checkout 및 계정 > 사용자 정의에서 구성됩니다. 이를 통해 결제 페이지에 메인 스토어와 다른 파비콘을 표시할 수 있으며, 이는 멀티 브랜드 설정에 유용합니다.
Shopify 파비콘이 작동하는지 확인하려면 live favicon tester를 사용하고 매장 URL을 입력하세요. 테스터는 아이콘이 공개적으로 액세스 가능함을 확인하고 아이콘이 16, 32 및 48픽셀에서 어떻게 렌더링되는지 보여줍니다. 또한 best favicon size를 확인하여 PWA 설치 환경을 개선할 수 있는 추가 크기를 알아보세요.
일반적인 Shopify 파비콘 실수에는 사각형 로고를 먼저 정사각형으로 자르지 않고 업로드하는 것(눌린 아이콘 생성), 매우 작은 이미지 업로드(레티나 디스플레이에서 흐릿함), 업로드 후 저장을 클릭하는 것을 잊어버리는 것(명시적으로 저장할 때까지 변경 사항이 커밋되지 않음) 등이 있습니다. favicon generator는 직접 Shopify 업로드를 위해 준비된 512×512의 올바른 정사각형 PNG를 내보냅니다.
작동 방식
- 1
512×512 정사각형 PNG 생성
로고나 브랜드 마크가 있는 [favicon generator](tool:favicon-generator)를 사용하세요. 다운로드 패키지에서 512×512 PNG를 내보냅니다. 이는 Shopify의 올바른 입력 크기입니다.
- 2
Theme Editor에서 테마를 엽니다.
Shopify 관리자에서 온라인 스토어 > 테마로 이동하여 라이브 테마 옆에 있는 사용자 정의를 클릭하세요.
- 3
테마 설정 > 파비콘으로 이동하세요.
왼쪽 사이드바에서 테마 설정(대부분의 테마 하단에 있는 기어 아이콘)을 클릭하고 파비콘 또는 브랜드 섹션을 찾으세요. 정확한 라벨은 테마에 따라 다릅니다.
- 4
PNG를 업로드하고 저장하세요.
파비콘 업로드 필드를 클릭하고 512×512 PNG를 선택한 후 확인하세요. 오른쪽 상단에서 저장을 클릭합니다. Shopify는 아이콘을 CDN에 업로드하고 모든 페이지에 전파합니다.
- 5
시크릿 창에서 확인
비공개/시크릿 브라우저 창을 열고 스토어 URL로 이동하세요. 브라우저 탭에 새 파비콘이 나타나는지 확인하세요. 신속한 외부 점검을 위해 [favicon tester](utility:favicon-tester)를 사용하십시오.
지금 사용해 보기
Shopify 지원 파비콘 생성
파비콘 생성기자주 묻는 질문
Shopify에 파비콘을 어디에 추가하나요?+
온라인 스토어 > 테마 > 사용자 정의 > 테마 설정 > 파비콘. 정사각형 PNG(512×512 권장)을 업로드하고 저장을 클릭하면 Shopify가 자동으로 모든 매장 페이지에 아이콘을 삽입합니다.
Shopify는 어떤 크기의 파비콘을 사용합니까?+
Shopify는 브라우저 탭에 파비콘을 32×32픽셀로 표시합니다. 가장 선명한 결과를 얻으려면 512×512를 업로드하세요. Shopify는 32×32로 다운샘플링됩니다. 32×32보다 작은 소스를 업로드하지 마십시오. 그렇지 않으면 흐릿하게 나타납니다.
내 Shopify 파비콘이 흐릿하거나 늘어나 보이는 이유는 무엇입니까?+
아마도 정사각형이 아닌 이미지나 매우 작은 소스를 업로드했을 것입니다. 업로드하기 전에 로고를 완벽한 정사각형으로 자르고 최소 256×256픽셀에서 시작하세요. [favicon generator](tool:favicon-generator)는 Shopify에 대해 준비된 정사각형 512×512 PNG를 자동으로 생성합니다.
새 Shopify 파비콘이 표시되지 않는 이유는 무엇입니까?+
브라우저와 CDN 캐시는 업데이트를 지연합니다. 시크릿/비공개 창을 열고 스토어 URL로 이동하여 캐시 간섭 없이 업데이트된 파비콘을 확인하세요. 일반 탐색 시 이전 아이콘이 계속 표시되면 CDN 캐시가 만료될 때까지 몇 시간 정도 기다리세요.
내 Shopify 스토어에 apple-touch-icon를 추가할 수 있나요?+
예, 하지만 수동으로 코드를 편집해야 합니다. 180×180 apple-touch-icon.png를 테마 자산 폴더에 업로드한 다음 `<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" | `<head>` 섹션 내부 theme.liquid의 자산 URL }}'>`.
Shopify는 SVG 파비콘을 지원합니까?+
내장된 Theme Editor 파비콘 업로드는 SVG를 허용하지 않습니다. SVG 파비콘을 사용하려면 theme.liquid에 링크 태그를 수동으로 추가하십시오: `<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | Asset_url }}'>` SVG를 자산 폴더에 업로드한 후.
Shopify 파비콘을 변경하려면 개발자가 필요합니까?+
아니요. Theme Editor(온라인 스토어 > 테마 > 사용자 정의 > 테마 설정 > 파비콘)를 사용하면 코드 없이 2분 안에 새로운 파비콘을 업로드하고 저장할 수 있습니다. 개발자 액세스는 SVG 또는 apple-touch-icon 추가에만 필요합니다.