Chỉ trong thời gian giới hạn - Tiết kiệm tới 67 %

+ Tên Miền MIỄN PHÍ trong 1 năm

Ưu đãi kết thúc trong:

02 :

10 :

02 :

40

Zyro blog

Tất Cả Các Chủ Đề
Blog thương mại điện tử Cảm hứng Điều bạn cần biết về website Marketing Mẹo cho doanh nghiệp nhỏ Thiết kế Ý tưởng kinh doanh

Một chi tiết nhỏ thôi, nhưng đủ để khiến doanh nghiệp của bạn trở nên nổi bật trong suy nghĩ của khách hàng – favicon. Hãy chắc chắn rằng bạn sẽ học cách tạo favicon khi xây dựng một thương hiệu.

Và tin vui là tạo favicon cho website không hề khó.

Mặc dù bạn có thể khởi chạy một trang web mà không cần có favicon, nhưng thực sự thì bạn không có lý do gì để làm như vậy.

Vậy, favicon là gì?

Favicon là biểu tượng nhỏ được hiển thị trên các tab hoặc trên đánh dấu trang trong các trình duyệt như Chrome, Mozilla và Safari.

Từ ‘favicon’ là một phiên bản rút gọn của ‘favorite icon’, nhưng nó còn có các tên khác:

  • Shortcut icon (Biểu tượng phím tắt)
  • Website icon (Biểu tượng trang web)
  • Bookmark icon (Biểu tượng dấu trang)

Tuy nhiên, chúng đều đang nói đến cùng một thứ.

Trở lại năm 1999, thời điểm các favicon đã được giới thiệu đến người dùng Internet đi cùng với sự ra mắt của Internet Explorer 5.

Các doanh nghiệp thường sử dụng phiên bản thu nhỏ của logo làm favicon, kích cỡ của nó là 16 × 16 pixel.

Chúng được sử dụng như những dấu hiệu rất dễ nhìn, giúp cho người dùng có thể duyệt qua nhiều trang web một cách dễ dàng.

Giả sử bạn đang mua quần áo mới. Hãy tưởng tượng rằng hàng chục tab bạn mở trên trình duyệt của mình là đại diện cho một trung tâm mua sắm.

Những gì bạn có thể thấy là một hàng logo nhỏ, để khi bạn so sánh các mặt hàng và giá cả, bạn có thể dễ dàng chuyển đổi giữa các cửa hàng.

Chắc chắn, sẽ có những tiêu đề meta bên cạnh mỗi favicon mà bạn có thể đọc, nhưng ai có thời gian để liên tục đọc đi đọc lại các mô tả đó và xác nhận đó là cửa hàng nào cơ chứ?

Cách tạo favicon

vẽ người đàn ông cận cảnh

Vậy là giờ bạn đã biết favicon là gì, có thể tiếp theo, bạn sẽ muốn học cách tạo favicon cho website của riêng mình.

Đó là một trong những cách dễ dàng nhất để làm cho doanh nghiệp của bạn trở nên đáng nhớ đối với người dùng internet và nó cũng sẽ mang lại cho bạn một vẻ ngoài chuyên nghiệp.

Và nếu bạn muốn biết cách tạo favicon, thì đơn giản thôi.

Bạn thậm chí có thể lựa chọn một cách tạo favicon online mà bạn thích. Bạn muốn tự làm hay muốn nhờ một favicon generator làm công việc đó cho bạn?

Vì đây là một kỹ năng hữu ích cần thiết, vậy nên trước tiên hãy cùng xem qua các bước bạn nên thực hiện để tạo favicon cho trang web của mình theo cách thủ công.

1. Tạo hình ảnh

Khi nói đến việc tìm kiếm một biểu tượng phù hợp cho một trang web, thì logo của thương hiệu là thứ nên được sử dụng nhất.

Nhưng bạn vẫn có thể chọn bất kỳ hình ảnh nào khác để đại diện cho trang web của mình. Chỉ cần đảm bảo rằng:

  • Nó phù hợp với thương hiệu của bạn. Sử dụng màu sắc, kiểu chữ và hình dạng giống cách thương hiệu đang sử dụng.
  • Nó nổi bật. Khách hàng của bạn sẽ có thể nhớ hình ảnh một cách dễ dàng.
  • Nó không sao chép bất kỳ biểu tượng hoặc hình ảnh nào khác. Đừng bị nhầm với một thương hiệu khác.

Bạn có thể thiết kế hình ảnh favicon bằng cách sử dụng trình chỉnh sửa như Photoshop hoặc phần mềm mã nguồn mở như Canva. Nếu việc chi tiền không phải là vấn đề của bạn, bạn thậm chí có thể thuê một nhà thiết kế chuyên nghiệp.

Có một vài yếu tố thiết kế nên tránh nếu bạn muốn favicon của mình trông bóng bẩy, chuyên nghiệp và dễ nhớ.

Hãy đảm bảo bạn không vi phạm các quy tắc bất thành văn này:

  • Không sử dụng ảnh. Ở kích thước của favicon (cần vừa với tab trình duyệt), không ảnh nào đủ rõ ràng để có thể chèn vào favicon mà có thể nhìn thấy từ xa.
  • Không câu chữ dài dòng. Bạn chắc chắn có thể làm nổi bật một, hai hoặc thậm chí ba chữ cái trong favicon của mình, đặc biệt nếu đó là một phần của logo bạn đang sử dụng, nhưng các từ đầy đủ? Quên nó đi!
  • Không marketing bừa bộn. Mặc dù favicon là một yếu tố rất phù hợp để xây dựng thương hiệu và tính nhất quán của hình ảnh, nhưng favicon không phải là nơi dành cho các công cụ quảng cáo như treo banner “mới” hoặc “khuyến mãi”.

Sử dụng đúng kích thước

Trong khi các tab của trình duyệt hiển thị favicon ở 16 × 16 pixel, chúng cũng có thể được hiển thị trên một trang web với kích thước lên đến 32 × 32 hoặc thậm chí là 64 × 64 pixel.

Đảm bảo rằng favicon của bạn sẽ trông đẹp nhất cho dù nó ở trên trang web nào và kể cả có tạo nó ở định dạng lớn hơn. Sau đó, nó luôn có thể được thu nhỏ xuống 16 × 16 pixel.

Sử dụng đúng định dạng

Mặc dù các favicon trước đây phải được lưu dưới dạng .ico, nhưng các tệp .png hiện cũng được chấp nhận. Bạn có thể sử dụng các công cụ như faviconer.com để chuyển đổi tệp sang định dạng .ico.

Tuy nhiên, nếu bạn muốn favicon của mình hiển thị dưới dạng biểu tượng Tab được ghim trong Safari, bạn cần lưu nó dưới dạng tệp .svg.

Sử dụng đúng phong cách

Cần nhớ rằng favicon không chỉ hiển thị trên các tab của trình duyệt và trong danh sách đánh dấu trang. Nó cũng sẽ hiển thị trên các thiết bị không dây và menu lối tắt.

Vì vậy, hãy tạo hai phiên bản favicon: một phiên bản solid fill (áp dụng một màu đồng nhất trong toàn bộ) và một phiên bản transparent (trong suốt không nền). Bằng cách đó, bạn có thể đảm bảo rằng nó sẽ trông đẹp ở bất cứ nơi nào nó được hiển thị.

2. Tải hình ảnh lên trang web

Cách tạo favicon

Khi bạn đã có một biểu tượng sẵn sàng để sử dụng, bước tiếp theo tương đối đơn giản.

Chỉ cần đổi tên tệp hình ảnh .png hoặc .ico của bạn thành ‘favicon’ và tải tệp lên thư mục gốc của trang web của bạn.

Nếu bạn đã tạo tệp .png, bạn có thể cần tải lên nhiều tệp để phù hợp với tất cả các yêu cầu về kích thước.

Đây là nơi có lợi khi chuyển đổi favicon của bạn thành định dạng .ico. Một tệp .ico có thể chứa nhiều hơn một biểu tượng, có nghĩa là các kích thước khác nhau của bạn có thể được tải lên trang web của bạn như một.

3. Thêm mã HTML cơ bản

Rất có thể bạn sẽ không cần thêm bất kỳ mã nào để giúp các trình duyệt hiện đại tìm thấy favicon của mình. Hầu hết chúng sẽ tự động phát hiện favicon.png hoặc favicon.ico và đặt nó làm biểu tượng của bạn.

Điều đó nói rằng, bạn nên thêm một mã cơ bản để đảm bảo biểu tượng hiển thị từ bất kỳ trình duyệt nào.

Bạn có thể triển khai mã HTML ‘link rel= shortcut icon’ bằng cách mở tệp header.php và nhập vào bên dưới hoặc sau thẻ </head>:

<link rel=“shortcut icon” type=“image/ico” href=”/favicon.ico>

Chỉ cần nhớ chuyển đổi loại phần file extension tùy thuộc vào định dạng bạn đã lưu favicon của mình.

4. Để nó trở nên linh hoạt

cách tạo favicon Apple logo ngoài trời

Ngày càng có nhiều giao dịch Thương mại điện tử đang diễn ra trên các thiết bị di động, vì vậy nếu bạn có thể tối ưu hóa trang web của mình để sử dụng không dây, bạn chắc chắn nên làm như vậy.

Mặc dù không phải tất cả mọi người trên thế giới đều sở hữu thiết bị Apple, nhưng bạn sẽ cần tạo biểu tượng Apple Touch nếu bạn muốn favicon của mình hoạt động bình thường cho những người dùng này.

Biểu tượng Apple Touch đại diện cho các trang web đã được lưu vào màn hình chính trên điện thoại hoặc máy tính bảng Apple.

Không phải mọi trang web đều tối ưu hóa các favicon của họ để sử dụng Apple Touch. Trong những trường hợp này, khi người dùng lưu URL của trang web vào màn hình chính của họ, một phiên bản thu nhỏ của landing page sẽ hiển thị.

Nhưng nếu bạn muốn trông cực kỳ bóng bẩy, bạn có thể tạo và tải lên một tệp biểu tượng được thiết kế riêng để sử dụng trên thiết bị Apple Touch.

Đối với người mới bắt đầu, tệp phải được cung cấp ở định dạng .png. Tốt nhất là bạn nên tạo biểu tượng với kích thước tối đa 180 × 180 pixel để đảm bảo biểu tượng trông đẹp mắt trên bất kỳ số lượng kích thước màn hình nào.

Cuối cùng, bạn nên thêm một mã HTML riêng vào trang web cho các biểu tượng Apple Touch. Mã sẽ trông giống như này:

<link rel=”apple-touch-icon” sizes=180×180” href=”/apple-touch-icon-180×180.png>

Có cách tạo favicon nào dễ hơn không

Hy vọng rằng bạn nhớ rằng ở ngay phần đầu của bài viết, chúng mình đã đề cập đến hai cách tạo favicon cho website.

Và có thể bạn đang tự hỏi làm thế nào tùy chọn thứ hai có thể đơn giản hơn tùy chọn đầu tiên. Bạn sẽ có câu trả lời ngay đây.

Đó là sử dụng trình tạo trang web.

Được thiết kế để giúp cuộc sống của bạn dễ dàng hơn về mọi mặt, ít nhất là khi nói đến việc tạo ra một trang web thành công, một trình tạo trang web tử tế luôn đi kèm với một trình tạo favicon.

Với một công cụ như Zyro favicon generator, bạn được cung cấp tất cả thông tin cần thiết để biết cách tạo favicon mà không cần thêm các bước mã hóa, chuyển đổi và tìm nhà thiết kế để làm ra nó.

Vậy, hãy xem qua các bước để tạo và tải favicon lên trang web của bạn bằng công cụ tạo favicon trực tuyến, như Zyro chẳng hạn.

cách tạo favicon với Zyro favicon generator

1. Chọn template

Bạn có thể chọn từ một trong các mẫu có sẵn của Zyro hoặc tải lên hình ảnh tùy chỉnh của riêng bạn.

2. Tùy chỉnh để hoàn thiện

Sử dụng các công cụ theo ý của bạn để chỉnh sửa màu sắc, bố cục và văn bản của hình ảnh hoặc mẫu có sẵn.

3. Tải xuống và sử dụng

Bạn đã hoàn tất – đã đến lúc tải xuống favicon của bạn dưới dạng tệp .png hoặc .ico và xuất bản nó trên trang web.

Khi nói đến việc tải favicon đã tạo lên trang web Zyro của bạn, không có công việc liên quan đến lập trình nào, không cần chuyển đổi và chỉ cần một vài cú nhấp chuột.

Chỉ cần truy cập trình chỉnh sửa Zyro. Nếu bạn có nhiều trang web, hãy chọn trang web bạn muốn tải favicon lên.

Chọn Cài đặt chung từ menu, tìm Favicon và mở rộng các tùy chọn có sẵn cho bạn.

Đi tới Duyệt tệp để tìm hình ảnh favicon mà bạn đã tạo bằng công cụ của Zyro và nhấp đúp để tải nó lên.

Tiếp theo, hãy xem bản xem trước về cách biểu tượng của bạn sẽ xuất hiện trên các trình duyệt.

Nếu bạn hài lòng với nó, hãy nhấp vào Lưu thay đổi và favicon của bạn đã hoàn thành việc tải lên.

Được viết bởi

Ảnh đại diện của tác giả

Mai Hương

Mai Hương là một cây bút dày dạn chuyên viết về thương mại điện tử, nhưng đam mê thực sự của cô là hỗ trợ sự tăng trưởng cho các doanh nghiệp vừa và nhỏ. Bạn có thể đặt niềm tin vào những chiến lược kinh doanh mà cô ấy gợi ý, từ cách xây dựng một thương hiệu vững chắc cho đến các phương pháp marketing ấn tượng. Trong thời gian rảnh rỗi, không có gì hấp dẫn cô ấy hơn một cuốn tiểu thuyết kinh điển và một chuyến leo núi đến ướt đẫm mồ hôi.

Tham gia cuộc trò chuyện

Địa chỉ email của bạn sẽ không bị công bố. Tất cả các mục đều bắt buộc.