추가 방법 Shopify 귀하의 파비콘 Shopify 스토어

무엇인가의 기초를 배우십시오 Shopify Favicon 및 온라인 상점에 하나를 넣는 방법.

이 페이지의 링크에서 서비스에 가입하면 Reeves and Sons Limited가 수수료를 받을 수 있습니다. 우리의 윤리 성명서.

의 정체성 전자 상거래 상점 로고, 사이트 색상 및 마케팅 자료. 이러한 아이덴티티는 전반적인 브랜드를 강화하고 고객에게 건전한 알림을 제공하여 브랜드 이미지와 색상을 볼 때 편안함과 신뢰성을 불러일으킵니다.

Although small in size, the Favicon also ties into that branding strategy. In this tutorial, we’ll show you how to create and add a favicon to your Shopify 저장, 온라인 외관을 마무리하고 고객이 방문 할 때 매장을 쉽게 알아볼 수 있도록합니다.

뭔가요 Shopify 파비콘?

A Shopify Favicon 또는 Favicon은 웹 사이트 이름 옆의 브라우저 탭에 표시되는 웹 사이트의 작은 아이콘입니다.

브라우저 주소 표시 줄은 Favicon 사이트를 볼 수있는 가장 일반적인 영역이지만 다음 위치에도 나타납니다.

  • 툴바 앱
  • 즐겨 찾기
  • 역사 결과
  • 검색 창
  • 때때로 소셜 미디어에 공유 될 때

기본적으로 브라우저가 웹 사이트에 대한 링크를 표시해야 하고 다른 콘텐츠를 위한 공간이 충분하지 않을 때마다 일반적인 전체 크기 로고를 Favicon으로 대체합니다.

Shopify Favicon 예

기본적으로, Shopify 추가 Shopify Favicon 로고를 변경해야합니다.

좋은 파비콘은 종종 로고의 더 작은 버전이지만 때로는 표시되도록하고 할당 된 공간을 모두 차지하고 웹 사이트 이름 옆에 약간의 색상을 추가하기를 원하기 때문에 약간 씩 다릅니다.

기본적으로 모든 브라우저는 32×32 픽셀 크기의 파비콘을 지원합니다. 그것은 다소 작은 이미지이지만 일부 온라인 생성기의 도움으로 자신만의 이미지를 만들 수 있습니다. Shopify 웹사이트용 파비콘. 또한 더 큰 이미지는 어쨌든 축소되므로 반드시 정확히 32×32로 가져올 필요는 없습니다.

Favicon은 온라인 상점에서 상당히 의미가 있습니다. Shopify 추가하기 쉽고 온라인 판매자로서 브랜드 아이덴티티를 강화하는 것이 중요하기 때문입니다. 어떤 사람들은 그것이 SEO에 도움이 된다고 주장하기도 합니다.

Favicon을 추가하는 방법에 대해 자세히 알아 보려면 계속 읽으십시오. Shopify 가게.

Favicon을 추가하는 방법 Shopify 스토어 – 빠른 단계 가이드

언급했듯이 사이트를 실행할 때 Shopify 그것은 자동으로 Shopify logo as your site’s Favicon. There’s nothing wrong with that, but it’s far more professional and brand-oriented to include your own logo. Here are the steps you need to follow:

1단계: 귀하의 Shopify 대시보드

따라서 귀하의 Shopify 대시 보드를 클릭하고 판매 채널에서 온라인 스토어를 클릭합니다.

2단계: 테마 설정으로 이동

테마로 이동하여 현재 테마 옆에있는 사용자 지정 버튼을 클릭합니다. 설정은 테마마다 다르지만 가장 최근의 Shopify 테마에는 Favicon을 변경하는 섹션이 있습니다.

온라인 상점

. Shopify 커 스터 마이저, 왼쪽 목록 하단으로 스크롤하여 테마 설정을 클릭합니다.

주제 설정

3단계: 파비콘 버튼 선택

새 섹션에서 Favicon 버튼을 찾아 선택합니다.

파비콘- Shopify 파비콘

그러면 이미지 선택 또는 무료 이미지 탐색 버튼이 나타납니다. 귀하의 로고와 일치하는 무료 이미지가 있다고 상상할 수 없으므로 이미지 선택을 클릭하여 컴퓨터에서 사용자 지정 이미지를 업로드하는 것이 가장 좋습니다.

이미지 선택

4단계: 파비콘 업로드

Favicon 파일을 선택하고 Shopify.

그러면 Favicon 아이콘의 미리보기가 표시됩니다. 변경 사항을 영구적으로 적용하려면 다음에서 저장 버튼을 선택하십시오. Shopify.

저장 버튼

당신의 Shopify favicon이 작동하는 경우 웹 사이트의 프런트 엔드로 이동하여 현재 브라우저 탭을 확인합니다. 사이트 제목 옆에 Favicon이 표시되어야합니다.

예 Shopify 파비콘

Favicon을 만들기위한 팁

작은 아이콘을 생성하는 것이 쉬워 보이지만 고객이 사이트를 방문할 때마다 Favicon을 보게 된다는 점을 고려하여 제대로 만드는 것이 중요합니다. 또한 흐릿하거나 전체 공간을 채우지 않는 Favicon을 쉽게 만들 수 있어 눈에 잘 보이지 않기 때문에 Favicon의 목적을 무산시킵니다.

문제를 해결하기위한 몇 가지 팁은 다음과 같습니다. Shopify 파비콘 :

  • 32×32보다 큰 디자인을 시작하고 필요한 경우 축소합니다. 더 작은 이미지를 공간으로 늘리려고 하면 이미지가 더 흐릿해질 수밖에 없습니다. 예를 들어, Hatchful에서 32×32 이미지를 가져와 로고의 쓰여진 부분을 없애기 위해 늘리려고 하면 문제가 발생할 수 있습니다.
  • 일반적으로 현재 로고를 가져와 Favicon으로 완벽하게 작동할 것으로 기대할 수는 없습니다.
  • Favicon은 제공된 공간의 모든 픽셀을 덮을 때 멋지게 보입니다. 공간이 많지 않으므로 모든 것을 활용해야 합니다. square 32x32 공간의 픽셀.
  • Favicon에서 읽기 어렵기 때문에 모든 텍스트를 제거합니다. 기본 로고 요소가 큰 글자인 경우는 예외입니다.
  • 단단하고 밝은 색상을 위해 촬영합니다. 단순하고 만화 같은 로고가 가장 좋습니다.
  • 좋아하는 브랜드의 Favicon을 살펴보십시오. 온라인 이미지가 파비콘을 통해 전달되도록하기 위해 그들은 무엇을 했습니까?
  • 단색 배경으로 전체 공간을 채우거나 전경 요소가 가장자리에 닿도록 늘어난 투명 배경을 만드는 것을 고려하십시오. 많은 대형 브랜드의 파비콘 배경이 투명하다는 것을 알 수 있습니다.
  • ICO 파일 format 작은 이미지에 적합합니다. 익숙하지 않은 경우 투명한 배경에는 PNG를 사용하고 단색 배경의 고해상도 파비콘에는 JPG를 사용하세요.

귀하를 위해 Favicon을 생성하는 방법 Shopify 스토어

원하는 디자인 소프트웨어에서 Favicon을 디자인할 수 있습니다. Photoshop을 선호한다면 그것으로 가십시오. GIMP 또는 Pixlr와 같은 무료 소프트웨어를 선호하는 경우 32×32의 필수 치수를 고수하는 한 모두 작동합니다.

Favicon을 만들 수있는 옵션도 있습니다. Shopify의 Hatchful 로고 및 무료 파비콘 생성기. 전체 가이드보기 사용 중 부화 로고를 만듭니다.

로고 다운로드

로고 작성자가 작업을 완료하면 여러 로고로 채워진 파일을 제공합니다. formats, 그 중 하나는 Favicon입니다.

Shopify Favicon 파일

당신이 만드는 많은 로고는 부화 (우리를 읽으십시오 해치 풀 리뷰) 로고 주위에 공백을 사용하므로 그래픽이 대부분의 공간을 차지하도록 조정해야 할 수 있습니다. 일반적으로 제공된 Hatchful 파비콘이 이미 좋아 보이는 경우에만 사용해야 한다는 것을 알았습니다(대부분의 공간을 채우고 텍스트와 같은 작은 요소가 없음).

그렇지 않은 경우 Photoshop 또는 Pixlr와 같은 타사 편집 소프트웨어를 사용하여 불필요한 요소를 잘라냅니다.

중대한: 텍스트와 여백을 잘라내기 위해 캔버스 위로 이미지를 늘이려는 경우 더 큰 버전의 이미지를 사용해야 합니다. 이를 위해 Hatchful을 사용하여 로고를 생성했지만 실제로 큰 로고 중 하나(제공된 Favicon 파일이 아님)를 사용했습니다.

편집 소프트웨어 내에서 너비와 높이가 모두 32로 설정된 새 캔버스를 선택합니다.

32로 32

새 이미지를위한 레이어를 만들고 확장 할 수 있으므로 이미지가 32x32 캔버스보다 큰지 확인합니다. 그런 다음 이미지를 캔버스에 업로드하거나 배치합니다.

다음 스크린 샷에서는 Favicon 디자인이 확대되어 있습니다. square 제대로. 흐릿하지만 축소하면 훨씬 더 잘 보일 것입니다.

큰 버전

보시다시피 Pixlr 디자이너의 Favicon 축소 버전이 좋아 보입니다. 할당된 대부분의 공간을 커버하고 밝고 단색 아이콘을 선택했으며 작은 텍스트의 모든 표시를 제거했습니다.

더 작은 버전

마지막 단계는 파일을 다운로드하는 것입니다. 이 시점에서 투명한 PNG로 만들도록 선택할 수 있습니다. 그러나이 튜토리얼에서는 가능한 한 선명하게 보이도록 고해상도 JPG를 사용합니다. 배경색이 단색인 것도 괜찮습니다.

다운로드- Shopify 파비콘

당신에게 돌아가 Shopify 계기반. 온라인 스토어> 테마> 사용자 지정을 클릭합니다.

그런 다음 테마 설정> Favicon으로 이동합니다.

새 Favicon을 업로드하고 Shopify 편집기.

이미지 미리보기

다시 말하지만 Favicon을 테스트하고 보는 기본 방법은 홈페이지 웹사이트 URL이 있는 탭을 여는 것입니다. 보시다시피, Favicon은 멋지게 표시되며 제공된 전체 32×32 공간을 채우지 않은 것을 보면 이전 Favicon보다 실제로 약간 더 좋습니다.

최종 제품- Shopify 파비콘

결론적으로

A Shopify Favicon은 사이트를 디자인하고 추가하는 데 몇 분도 걸리지 않지만 방문자가 어느 웹사이트에 있는지 알려줍니다. 또한 사람들이 해당 섹션을 탐색할 때 다른 사이트의 긴 목록을 통해 검색할 가능성이 높다는 점을 고려하여 사람들이 자신의 북마크 및 브라우저 기록에서 귀하의 웹사이트를 찾을 수 있는 방법이 될 수 있습니다.

흐리거나 읽을 수 없는 화면에 안주해서는 안 됩니다. Shopify 파비콘 이미지. 첫 번째 Favicon이 제대로 표시되지 않거나 일부 텍스트를 잘라내거나 투명한 배경을 추가하고 싶다면 처음으로 돌아가서 올바르게 설정하세요. 파비콘이 전혀 없는 것은 좋은 생각이 아니지만, 흐릿하거나 잘 보이지 않는 파비콘은 브랜드를 비전문적이고 다소 우스꽝스럽게 보이게 합니다.

Favicon을 추가하는 것에 대해 질문이있는 경우 Shopify, 또는 직접 만들기 Shopify Favicon, 아래 댓글 섹션에서 알려주십시오.

조 워니 몬트

Joe Warnimont는 전자 상거래 도구, WordPress 및 소셜 미디어에 중점을 둔 시카고 기반 작가입니다. 낚시를 하지 않거나 요가를 하지 않을 때는 국립공원에서 우표를 수집하고 있습니다(주로 어린이용이지만). 조의 포트폴리오를 확인하세요 그에게 연락하고 과거 작업을 볼 수 있습니다.

코멘트 0 응답

댓글을 남겨주세요.

귀하의 이메일 주소는 공개되지 않습니다. *표시항목은 꼭 기재해 주세요. *

평점 *

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.