Làm thế nào để thêm một Shopify Favicon cho bạn Shopify Cửa hàng sách

Tìm hiểu những điều cơ bản về thế nào là Shopify Favicon và cách đặt một Favicon trên cửa hàng trực tuyến của bạn.

Nếu bạn đăng ký một dịch vụ từ một liên kết trên trang này, Reeves and Sons Limited có thể kiếm được hoa hồng. Xem của chúng tôi Chuẩn mực đạo đức.

Danh tính của cửa hàng thương mại điện tử của bạn tập hợp một số yếu tố như logo, màu sắc trang web và tài liệu tiếp thị. Nhận dạng này củng cố thương hiệu tổng thể của bạn và tạo ra lời nhắc nhở lành mạnh cho khách hàng, gợi lên cảm giác thoải mái và đáng tin cậy khi họ nhìn thấy hình ảnh và màu sắc thương hiệu của bạn.

Mặc dù có kích thước nhỏ nhưng Favicon cũng gắn liền với chiến lược xây dựng thương hiệu đó. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo và thêm favicon vào Shopify hàng, hoàn thiện giao diện trực tuyến của bạn và giúp bạn dễ dàng nhận ra cửa hàng của mình hơn khi khách hàng ghé thăm.

Cái gì Shopify Biểu tượng yêu thích?

A Shopify Favicon hoặc bất kỳ Favicon nào liên quan đến vấn đề đó, là một biểu tượng nhỏ cho trang web của bạn xuất hiện trên tab trình duyệt bên cạnh tên trang web của bạn.

Thanh địa chỉ trình duyệt là khu vực phổ biến nhất để xem Favicon của trang web, nhưng nó cũng xuất hiện ở các vị trí sau:

  • Ứng dụng thanh công cụ
  • Đánh dấu
  • Kết quả lịch sử
  • Thanh tìm kiếm
  • Đôi khi được chia sẻ trên mạng xã hội

Về cơ bản, bất cứ khi nào trình duyệt cần hiển thị liên kết đến trang web của bạn và không còn nhiều chỗ cho nội dung khác, trình duyệt sẽ thay thế logo kích thước đầy đủ thông thường của bạn bằng Favicon.

Shopify Ví dụ về biểu tượng yêu thích

Theo mặc định, Shopify thêm vào Shopify logo cho Favicon của bạn, vì vậy chúng tôi cần thay đổi điều đó.

Một favicon tốt thường là một phiên bản nhỏ hơn của logo, nhưng đôi khi chúng thay đổi một chút vì bạn muốn đảm bảo chúng hiển thị, chiếm hết không gian được phân bổ và thêm một chút màu sắc bên cạnh tên trang web của bạn.

Theo mặc định, tất cả các trình duyệt đều hỗ trợ Favicon có kích thước 32×32 pixel. Đó là một hình ảnh khá nhỏ, nhưng với sự trợ giúp của một số công cụ tạo trực tuyến, bạn có thể tạo ra hình ảnh của riêng mình Shopify Favicon cho trang web của bạn. Ngoài ra, hình ảnh lớn hơn dù sao cũng sẽ được thu nhỏ lại, do đó bạn không nhất thiết phải thu nhỏ kích thước chính xác là 32×32.

Favicon khá có ý nghĩa đối với các cửa hàng trực tuyến trên Shopify vì chúng dễ dàng thêm vào và điều quan trọng là củng cố nhận diện thương hiệu của bạn với tư cách là người bán hàng trực tuyến. Một số người cũng cho rằng nó giúp ích cho SEO.

Hãy đọc tiếp để tìm hiểu thêm về cách thêm Favicon vào Shopify cửa hàng.

Cách thêm Favicon vào của bạn Shopify Cửa hàng – Hướng dẫn bước nhanh

Như đã đề cập, khi chạy một trang web thông qua Shopify nó tự động thêm một Shopify logo làm Favicon của trang web của bạn. Không có gì sai với điều đó, nhưng sẽ chuyên nghiệp hơn và hướng đến thương hiệu hơn nếu bao gồm logo của riêng bạn. Dưới đây là các bước bạn cần phải làm theo:

Bước 1: Vào trang của bạn Shopify bảng điều khiển

Vì vậy, hãy đến với bạn Shopify bảng điều khiển và nhấp vào Cửa hàng trực tuyến trong Kênh bán hàng.

Bước 2: Điều hướng đến Cài đặt chủ đề

Điều hướng đến Chủ đề của bạn và nhấp vào nút Tùy chỉnh bên cạnh chủ đề hiện tại của bạn. Mặc dù cài đặt thay đổi từ chủ đề này sang chủ đề khác, tất cả các cài đặt gần đây nhất Shopify chủ đề có một phần để thay đổi Favicon.

thông qua cửa hàng trực tuyến của chúng tôi,

Trong tạp chí Shopify tùy biến, cuộn xuống cuối danh sách ở bên trái và nhấp vào Cài đặt chủ đề.

cài đặt chủ đề

Bước 3: Chọn nút Favicon

Trong phần mới tìm và chọn nút Favicon.

biểu tượng yêu thích - Shopify Favicon

Thao tác này sẽ hiển thị nút Chọn Hình ảnh hoặc Khám phá Hình ảnh Miễn phí. Tôi không thể tưởng tượng họ có bất kỳ hình ảnh miễn phí nào phù hợp với logo của bạn, vì vậy tốt nhất bạn nên nhấp vào Chọn Hình ảnh để tải lên hình ảnh tùy chỉnh từ máy tính của mình.

chọn ảnh

Bước 4: Tải lên Favicon của bạn

Chọn tệp Favicon và tải nó lên Shopify.

Sau đó, bạn sẽ thấy bản xem trước của biểu tượng Favicon. Để thực hiện các thay đổi vĩnh viễn, hãy chọn nút Lưu trong Shopify.

nút lưu

Để xem của bạn Shopify favicon đang hoạt động, hãy đi tới giao diện người dùng của trang web của bạn và xem tab trình duyệt hiện tại. Bạn sẽ thấy Favicon bên cạnh tiêu đề trang web của bạn.

ví dụ Shopify Favicon

Mẹo để tạo Favicon của bạn

Mặc dù việc tạo một biểu tượng nhỏ có vẻ dễ dàng nhưng điều quan trọng là phải làm đúng, vì khách hàng sẽ nhìn thấy Favicon bất cứ khi nào họ truy cập vào trang web của bạn. Cũng dễ dàng tạo ra một Favicon bị mờ hoặc không lấp đầy toàn bộ không gian, làm mất đi mục đích của Favicon vì nó không thể nhìn thấy bằng mắt.

Để giải quyết bất kỳ vấn đề nào, đây là một số mẹo để tạo Shopify Biểu tượng yêu thích:

  • Bắt đầu thiết kế của bạn với kích thước lớn hơn 32×32 và thu nhỏ nó xuống nếu cần. Bạn chắc chắn sẽ có một hình ảnh mờ hơn nếu bạn cố gắng kéo dài một hình ảnh nhỏ hơn vào không gian. Ví dụ: lấy một hình ảnh 32×32 từ Hatchful và cố gắng kéo dài nó ra để loại bỏ phần chữ của logo có thể gây ra sự cố.
  • Thông thường, bạn không thể chỉ lấy logo hiện tại của mình và mong đợi nó hoạt động hoàn hảo như một Favicon.
  • Favicon trông tuyệt vời khi bạn bao phủ mọi pixel của không gian được cung cấp. Bạn không có nhiều chỗ, vì vậy bạn nên tận dụng mọi pixel vuông trong không gian 32×32.
  • Xóa tất cả văn bản vì nó khó đọc trong Favicon. Ngoại lệ là nếu thành phần logo chính của bạn là một chữ cái lớn.
  • Chụp để có màu sắc chắc chắn, sáng hơn. Những logo đơn giản, mang phong cách hoạt hình hoạt động hiệu quả nhất.
  • Nhìn vào Favicons từ các thương hiệu yêu thích của bạn. Họ đã làm gì để đảm bảo hình ảnh trực tuyến của họ được hiển thị bằng favicon?
  • Hãy cân nhắc việc lấp đầy toàn bộ không gian bằng nền đồng màu hoặc tạo nền trong suốt với phần tử tiền cảnh được kéo dài để nó chỉ chạm vào các cạnh. Bạn sẽ nhận thấy rằng nhiều thương hiệu lớn hơn có nền trong suốt cho Favicon của họ.
  • Định dạng tệp ICO hoạt động tốt với hình ảnh nhỏ hơn. Nếu bạn không quen, hãy sử dụng PNG cho nền trong suốt hoặc JPG cho Favicon có độ phân giải cao với nền đặc.

Cách tạo Favicon cho bạn Shopify Cửa hàng sách

Bạn có tùy chọn thiết kế Favicon trong bất kỳ phần mềm thiết kế nào bạn chọn. Nếu bạn thích Photoshop, hãy làm theo điều đó. Nếu bạn muốn một phần mềm miễn phí như GIMP hoặc Pixlr, tất cả chúng đều hoạt động miễn là bạn tuân thủ kích thước yêu cầu là 32×32.

Bạn cũng có tùy chọn tạo Favicon với ShopifyLogo Hatchful và Trình tạo Favicon miễn phí của nó. Xem toàn bộ hướng dẫn của chúng tôi về việc sử dụng nở nang để xây dựng một logo.

tải về biểu tượng

Sau khi trình tạo logo hoàn tất công việc, nó sẽ cung cấp cho bạn một tệp chứa nhiều định dạng logo, một trong số đó là Favicon.

Shopify Tệp biểu tượng yêu thích

Hãy nhớ rằng nhiều logo bạn tạo bằng nở nang (đọc của chúng tôi Đánh giá đáng chú ý) sử dụng khoảng trắng xung quanh logo, vì vậy bạn có thể phải điều chỉnh nó để đồ họa bao phủ hầu hết không gian. Nói chung, tôi nhận thấy rằng bạn chỉ nên sử dụng biểu tượng yêu thích Hatchful được cung cấp nếu nó trông đẹp mắt (nó chiếm phần lớn không gian và không có các thành phần nhỏ như văn bản).

Nếu không, hãy sử dụng phần mềm chỉnh sửa của bên thứ ba như Photoshop hoặc Pixlr để loại bỏ một số yếu tố không cần thiết.

Quan trọng: Bạn cần sử dụng phiên bản hình ảnh lớn hơn nếu bạn dự định kéo dài nó trên canvas để cắt văn bản và khoảng trắng. Đối với điều này, tôi đã sử dụng Hatchful để tạo biểu tượng nhưng thực tế đã lấy một trong những biểu tượng lớn (không phải tệp Favicon được cung cấp) vì tôi không muốn hiện tượng mờ xảy ra khi tôi kéo căng nó trên khung vẽ 32×32.

Trong phần mềm chỉnh sửa của bạn, hãy chọn một khung vẽ mới có cả Chiều rộng và Chiều cao được đặt ở mức 32.

32 bởi 32

Tạo một lớp cho hình ảnh mới và đảm bảo rằng hình ảnh đó lớn hơn khung vẽ 32×32 vì bạn có thể kéo dài nó ra. Sau đó tải lên hoặc đặt hình ảnh vào khung vẽ.

Trong ảnh chụp màn hình sau, tôi đã phóng to thiết kế Favicon để đảm bảo nó vừa với hình vuông. Nó bị mờ, nhưng tôi biết nó sẽ đẹp hơn nhiều khi tôi thu nhỏ lại.

phiên bản lớn

Như bạn có thể thấy, phiên bản thu nhỏ của Favicon trong trình thiết kế Pixlr trông rất đẹp. Tôi đã bao phủ hầu hết không gian được phân bổ, chọn biểu tượng màu sáng và đồng nhất, đồng thời xóa tất cả các dấu hiệu của văn bản nhỏ hơn.

phiên bản nhỏ hơn

Bước cuối cùng là Tải tập tin. Bạn có thể chọn biến nó thành PNG trong suốt tại thời điểm này. Nhưng đối với hướng dẫn này, tôi sử dụng JPG có độ phân giải cao để nó trông sắc nét nhất có thể. Và tôi không ngại có nền với một màu đồng nhất.

Tải xuống - Shopify Favicon

Quay lại với Shopify bảng điều khiển. Bấm vào Cửa hàng trực tuyến > Chủ đề > Tùy chỉnh.

Sau đó đi tới Cài đặt chủ đề > Favicon.

Tải Favicon mới đó lên và nhấp vào nút Lưu trong Shopify biên tập viên.

Xem trước hình ảnh

Xin nhắc lại, cách chính để kiểm tra và xem Favicon của bạn là chỉ cần mở một tab có URL trang chủ của bạn. Như bạn có thể thấy, Favicon hiển thị đẹp mắt và thực sự tốt hơn một chút so với Favicon trước đây của tôi, vì cái đó không lấp đầy toàn bộ không gian 32×32 được cung cấp.

sản phẩm cuối cùng - Shopify Favicon

Kết luận

A Shopify Favicon không mất quá vài phút để thiết kế và thêm vào trang web của bạn, tuy nhiên, nó cung cấp lời nhắc tuyệt vời cho khách truy cập về trang web họ đang truy cập. Ngoài ra, nó có thể là một cách để mọi người tìm thấy trang web của bạn trong dấu trang và lịch sử trình duyệt của họ, vì rất có thể họ đang tìm kiếm qua một danh sách dài các trang web khác khi xem qua các phần đó.

Hãy nhớ rằng bạn không nên sử dụng chữ mờ hoặc khó đọc Shopify Hình ảnh Favicon. Nếu bạn nhận thấy Favicon đầu tiên trông không ổn lắm hoặc bạn muốn cắt bỏ một số văn bản hoặc thêm nền trong suốt, hãy quay lại từ đầu và thực hiện đúng. Mặc dù việc không có Favicon không phải là một ý kiến ​​hay, nhưng một Favicon mờ hoặc khó nhìn sẽ khiến thương hiệu của bạn trông thiếu chuyên nghiệp và có phần ngớ ngẩn.

Nếu bạn có bất kỳ câu hỏi nào về việc thêm Favicons vào Shopify, hoặc tự làm Shopify Favicon, hãy cho chúng tôi biết trong phần bình luận bên dưới.

Joe Warnimont

Joe Warnimont là một nhà văn có trụ sở tại Chicago, chuyên viết về các công cụ thương mại điện tử, WordPress và mạng xã hội. Khi không câu cá hay tập yoga, anh ấy đi sưu tập tem ở các công viên quốc gia (mặc dù hoạt động đó chủ yếu dành cho trẻ em). Kiểm tra danh mục đầu tư của Joe để liên hệ với anh ấy và xem công việc trước đây.

Nhận xét Responses 0

Bình luận

Chúng tôi sẽ không công khai email của bạn. Các ô đánh dấu * là bắt buộc *

Xêp hạng *

Trang web này sử dụng Akismet để giảm spam. Tìm hiểu cách xử lý dữ liệu nhận xét của bạn.

shopify-first-one-dollar-promo-3-months