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

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

크기는 작지만 Favicon은 해당 브랜딩 전략과도 관련이 있습니다. 이 튜토리얼에서는 파비콘을 만들고 추가하는 방법을 보여 드리겠습니다. Shopify 저장, 온라인 외관을 마무리하고 고객이 방문 할 때 매장을 쉽게 알아볼 수 있도록합니다.

뭔가요 Shopify 파비콘?

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

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

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

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

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

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

기본적으로 모든 브라우저는 32x32 픽셀 크기의 Favicon을 지원합니다. 그것은 다소 작은 이미지이지만 일부 온라인 생성기의 도움으로 나만의 이미지를 만들 수 있습니다. Shopify 귀하의 웹 사이트를위한 Favicon. 또한 큰 이미지는 어쨌든 축소되므로 정확히 32x32로 만들 필요는 없습니다.

Favicon은 온라인 상점에서 상당히 의미가 있습니다. Shopify 추가하기 쉽고 온라인 판매자로서 브랜드 아이덴티티를 강화하는 것이 중요합니다. 일부는 또한 SEO에 도움이된다고 주장합니다.

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

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

언급했듯이 사이트를 실행할 때 Shopify 그것은 자동으로 Shopify 로고를 사이트의 파비콘으로 사용하세요. 아무 문제가 없지만 자신의 로고를 포함하는 것이 훨씬 더 전문적이고 브랜드 지향적입니다. 따라야 할 단계는 다음과 같습니다.

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

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

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

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

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

3단계: 파비콘 버튼 선택

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

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

4단계: 파비콘 업로드

Favicon 파일을 선택하고 Shopify.

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

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

Favicon을 만들기위한 팁

작은 아이콘을 생성하는 것은 쉬운 것처럼 보이지만 고객이 귀하의 사이트를 방문 할 때마다 Favicon을 볼 수 있다는 점을 고려할 때 올바르게 만드는 것이 중요합니다. 또한 흐릿하거나 전체 공간을 채우지 않는 Favicon을 쉽게 만들 수있어 눈에 보이지 않기 때문에 Favicon의 목적을 무너 뜨립니다.

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

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

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

원하는 디자인 소프트웨어에서 Favicon을 디자인 할 수있는 옵션이 있습니다. 포토샵을 선호한다면 그것으로 가십시오. GIMP 또는 Pixlr와 같은 무료 소프트웨어를 선호하는 경우 필요한 크기 인 32x32를 고수하는 한 모두 작동합니다.

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

로고 제작자가 작업을 마치면 여러 로고 포맷으로 채워진 파일을 제공하는데, 그 중 하나가 파비콘입니다.

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

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

중대한: 텍스트와 공백을 잘라 내기 위해 캔버스 위에 이미지를 늘릴 계획이라면 더 큰 이미지를 사용해야합니다. 이를 위해 Hatchful을 사용하여 로고를 생성했지만 실제로 32x32 캔버스 위로 늘릴 때 흐려지는 현상이 발생하지 않도록 큰 로고 (제공된 Favicon 파일이 아님) 중 하나를 사용했습니다.

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

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

다음 스크린샷에서 Favicon 디자인을 확대하여 사각형에 제대로 맞는지 확인했습니다. 흐릿하지만 축소하면 훨씬 더 좋아 보일 거라는 걸 알고 있습니다.

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

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

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

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

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

다시 말하지만, Favicon을 테스트하고 보는 기본 방법은 단순히 홈페이지 웹 사이트 URL이있는 탭을 여는 것입니다. 보시다시피, Favicon은 멋지게 나타나고 실제로 이전 Favicon보다 약간 낫습니다. 제공되는 전체 32x32 공간을 어떻게 채우지 않았는지 알 수 있습니다.

결론적으로

A Shopify Favicon은 사이트를 디자인하고 추가하는 데 몇 분도 걸리지 않지만 방문자가 어느 웹 사이트에 있는지 훌륭한 알림을 제공합니다. 또한 사람들이 해당 섹션을 살펴볼 때 다른 사이트의 긴 목록을 검색 할 가능성이 높기 때문에 북마크 및 브라우저 기록에서 웹 사이트를 찾는 방법으로도 사용할 수 있습니다.

흐리거나 읽기 어려운 것에 만족해서는 안된다는 점을 명심하십시오. Shopify 파비콘 이미지. 첫 번째 Favicon이 제대로 보이지 않거나 일부 텍스트를 잘라내거나 투명한 배경을 추가하려는 경우 처음으로 돌아가 올바르게 설정하십시오. Favicon이 전혀없는 것은 좋은 생각이 아니지만, 흐리거나보기 어려운 Favicon은 브랜드를 비전문적이고 다소 어리석게 보이게 만듭니다.

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