Khi bạn mở hàng chục trang web, biểu tượng yêu thích có thể giúp bạn theo dõi các trang web khác nhau.
Favicon là các biểu tượng xuất hiện trên tab của một trang cùng với tiêu đề của trang. Chúng không chỉ có thể giúp tăng cường khả năng hiển thị trong trình duyệt của khách hàng mà còn có thể giúp củng cố bản sắc thương hiệu của bạn.
Chúng có ảnh hưởng đến SEO như thế nào, các tạo nó và thêm vào trang web của bạn.
Favicon là gì?
Favicon là một biểu tượng trình duyệt đại diện cho một thương hiệu hoặc trang web. Thường thấy nhất bên cạnh tiêu đề của trang web trong tab trình duyệt, biểu tượng cũng có thể được tìm thấy trong thanh địa chỉ, danh sách dấu trang, trang kết quả của công cụ tìm kiếm, lịch sử trình duyệt và những nơi khác trên trang web.
Google có một trong những favicon được công nhận nhất. Bạn có thể thấy chữ G nhiều màu trong thanh địa chỉ của trình duyệt bên dưới. Favicon thậm chí còn xuất hiện trong kết quả tìm kiếm di động trên google. Bạn có thể xem kết quả cho lần tìm kiếm cuối cùng của tôi cho “how often should succulents be watered” bên dưới.
Bạn có thể xem favicon ở đâu?
Nhìn vào tab Hubspot trong trình duyệt của bạn. Bạn sẽ nhận thấy biểu tượng bên dưới bên cạnh tiêu đề của bài viết này.
Đây được gọi biểu tượng yêu thích và hầu hết các trang web sẽ có một biểu tượng này, cho phép bạn theo dõi các tab của mình ngay cả khi bạn không thể nhìn thấy tiêu đề của trang.
Favicon cũng nằm trên:
- Thanh tìm kiếm.
- Lịch sử tìm kiếm.
- Ứng dụng thanh công cụ.
- Dấu trang.
- Đề xuất cho thanh tìm kiếm của bạn.
- Trình đơn thả xuống của dấu trang của bạn.
Các favicon này có thể giúp người dùng web dễ dàng xác định các trang họ đã truy cập và bạn có thể đảm bảo rằng trang web của mình có thể dễ dàng nhận dạng bằng cách sử dụng một biểu tượng yêu thích.
Tại sao favicon lại quan trọng?
Favicon không chỉ tác động đến trải nghiệm người dùng và nhận thức về thương hiệu mà còn làm trang web của bạn trông chuyên nghiệp hơn.
Trong công cụ tìm kiếm một vài trang có biểu tượng sặc sỡ trong khi các web khác có hình cầu màu xám. Điều đó bởi vì quả địa cầu là favicon mặc định mà google chrome đặt cho các trang web không có favicon.
Nếu tôi đang nhanh chóng quét trang kết quả. Có một vài lý do khiến tôi chọn website có favicon sặc sỡ đặc biệt nếu nó liên quan trực tiếp đến chủ đề tôi đang tìm kiếm.
Tiếp theo khi trong rất nhiều tab đang mở, nhiều khả năng tôi sẽ nhấp lại vào website có favicon đẹp mắt và dành nhiều thời gian cho trang web đó.
Cuối cùng khi tôi truy cập vào trang web. Tôi nhận thấy ngay favicon sặc sỡ đó trên logo của trang web. Logo đầy màu sắc được hiển thị bên dưới, bạn sẽ ngay lập tức ghi nhớ thương hiệu này.
Kích thước của favicon là bao nhiêu?
Kích thước tối ưu cho favicon là 16×16 pixel. Đó là cách chúng xuất hiện trong tab trình duyệt, thanh địa chỉ và danh sách dấu trang. Lý tưởng nhất là bạn sẽ tạo biểu tượng yêu thích của mình ở nhiều kích cỡ. Bằng cách đó, bạn sẽ thấy các phiên bản được chia tỷ lệ phù hợp trên màn hình lớn hơn thay vì phiên bản 16×16 được kéo dài ra.
Dưới đây là một số kích thước kích thước phổ biến nhất cho favicon tùy mục đích riêng của chúng.
- 16×16: Kích thước của favicon trình duyệt.
- 32×32: Kích thước của các biểu tượng lối tắt trên thanh tác vụ.
- 96×96: Kích thước của các biểu tượng lối tắt trên màn hình.
- 180×180: Kích thước của biểu tượng cảm ứng của Apple.
- 300×300: Kích thước mà Squarespace yêu cầu.
- 512×512: Kích thước mà WordPress yêu cầu.
Làm thế nào để favicon ảnh hưởng đến SEO?
Mặc dù favicon không ảnh hưởng trực tiếp đến xếp hạng tìm kiếm của bạn, nhưng chúng ảnh hưởng đến lượng thời gian trên trang dành cho những người tương tác với trang web của bạn.
Hãy nghĩ về nó theo cách, nếu khách hàng của bạn không thể xác định nhanh chóng tab nào là của bạn bằng favicon, họ sẽ không truy cập lại trang đó.
Cơ quan thương hiệu và hình ảnh
Có một logo độc đáo và sử dụng nó làm biểu tượng yêu thích của bạn sẽ đưa hình ảnh thương hiệu của bạn lên hàng đầu trong tâm trí khách hàng.
Khi chọn biểu tượng yêu thích của bạn, hãy đảm bảo rằng không có thương hiệu nào khác có biểu trưng tương tự. Bạn có thể kiểm tra điều này bằng cách đảo ngược hình ảnh tìm kiếm logo của bạn để xem những thương hiệu khác đưa ra ý tưởng gì.
Đảm bảo rằng biểu tượng yêu thích của bạn đủ độc đáo cả về màu sắc và hình thức để người tiêu dùng có thể dễ dàng nhận ra thương hiệu của bạn.
Trải nghiệm người dùng
Favicon tăng khả năng khách truy cập sẽ lưu trang của bạn dưới dạng dấu trang. Điều này có rất nhiều lợi ích trong tìm kiếm. Google tăng cường trang web của bạn và cải thiện thứ hạng SEO nếu người dùng đánh dấu trang của bạn.
Không có favicon chắc chắn sẽ tác động tiêu cực đến xếp hạng vì dấu trang không có favicon thân thiện với người dùng.
Hơn nữa, nếu khách hàng muốn xem lại một bài báo hoặc sản phẩm trên trang web, họ sẽ đi đến lịch sử của họ. Biểu tượng favicon sẽ hiển thị trong lịch sử tìm kiếm trên web, cải thiện trải nghiệm người dùng bằng cách giúp họ nhanh chóng xác định các tìm kiếm trước đây.
Bây giờ chúng ta đã hiểu favicon là gì, mục đích của nó và các kích thước khác nhau, hãy xem cách tạo một favicon.
Cách thiết kế một Favicon
Bạn muốn tạo một favicon yêu thích, dễ nhận biết và nhất quán với bản sắc thương hiệu của mình. Thay vì bắt đầu từ đầu, bạn nên dựa trên logo của công ty mình.
Cân nhắc việc thuê một nhà thiết kế đồ họa hoặc một dịch vụ để tạo một logo chuyên nghiệp. Sau khi có logo, đã đến lúc tạo một favicon yêu thích.
Hãy nhớ rằng: favicon của bạn phải khớp với các thành phần của logo nhưng không nhất thiết phải chính xác. Favicon thường cần đơn giản hơn logo thương hiệu vì kích thước nhỏ của chúng.
Các công ty như Google và Facebook sử dụng chữ cái đầu tiên của doanh nghiệp cho favicon và cùng tông màu với logo. Một số doanh nghiệp sử dụng bảng màu đảo ngược của logo cho favicon của họ, thêm nhiều không gian âm.
Nếu bạn không có nền tảng về thiết kế đồ họa hoặc nghệ thuật, việc tạo một logo có thể khiến bạn lạc lõng. Nếu bạn thuê một nhà thiết kế, hãy yêu cầu thông tin đầu vào về cách phối màu, loại phông chữ và hình ảnh tổng thể.
Cách tạo favicon
Sau khi hài lòng với logo, có thể tạo favicon của mình. Thật không may nó không đơn giản như nén logo của bạn thành một hình vuông 16×16. Ví dụ: logo của bạn có thể có văn bản sẽ không đọc được khi thu nhỏ lại.
Đó là lý do tại sao bạn muốn lấy phần dễ nhận biết nhất của logo và biến nó thành favicon của bạn. Easy to Grow đã làm bằng cách lấy hoa tulip từ logo của họ và biến thành favicon.
Để thực hiện những thay đổi như thế này bạn cần sử dụng phần mềm chỉnh sửa như Photoshop hoặc Paint.
Sau khi hài lòng với hình ảnh và kích thước favicon của mình, bạn có thể lưu tệp ở định dạng PNG hoặc JPG và tải đó lên website.
Cách thêm Favicon trong HTML
Khi bạn đã tạo favicon của mình, bạn phải cho trình duyệt và các ứng dụng web khác biết nơi tìm thấy nó. Để làm như vậy, bạn phải thêm một dòng mã vào phần của tệp HTML.
Giả sử bạn lưu tệp PNG của mình dưới dạng “favicon.ico”. Sau đó, bạn sẽ thêm đoạn mã sau vào bất kỳ đâu giữa các thẻ của mình:
Xin lưu ý: favicon của bạn không nhất thiết phải được đặt trong thư mục gốc của trang web. Nếu bạn lưu nó ở một vị trí khác, chỉ cần đảm bảo rằng thuộc tính href là chính xác. Vì vậy, nếu bạn đã lưu nó vào thư mục con có tên “images” thì bạn sẽ nhập
Sử dụng Favicon
Favicons là một yếu tố quan trọng của thiết kế web. Chúng có thể cải thiện trải nghiệm của khách truy cập, củng cố bản sắc thương hiệu của bạn và làm cho trang web của bạn có vẻ đáng tin cậy hơn.
Đừng phạm sai lầm khi bỏ qua chúng – đặc biệt khi chúng dễ tạo và thêm vào trang web của bạn. Bạn chỉ cần một trình tạo logo miễn phí và một chút hiểu biết về HTML
