Favicon là gì? Hướng dẫn khắc phục lỗi logo favicon website wordpress 2021

Có lẽ bạn đã nghe thoáng ở đâu đó từ “Favicon”? Bạn thắc mắc không biết Favicon là gì? Nó có cần thiết cho website không? Nếu bị lỗi Favicon thì cách khắc phục nó như thế nào. Cùng Én Web tìm hiểu ngay sau đây nhé!

Tìm hiểu Favicon là gì?

Đối với mỗi thương hiệu, nhận diện là điều vô cùng quan trọng để khách hàng ghi nhớ sản phẩm của bạn. Webiste cũng như vậy, biểu tượng web là thứ không thể thiếu để giúp khách hàng nhận biết được webite của mình. Biểu tượng này được gọi là Favicon.

Hay nói một cách đơn giản về favicon là gì chúng ta có thể hiểu favicon là biểu tượng website, được hiển thị ở góc trái trên cùng của mộ tab khi truy cập. Do đó, favicon được xem như là logo đại diện của website.

Bây giờ các bạn đã hiểu favicon là gì rồi phải không? Khi thiết kế website đừng quên favicon nhé! Nó sẽ giúp người dùng nhận biết và phân biệt được website của bạn với đối thủ đấy!

Tìm hiểu về favicon là gì?
Tìm hiểu về favicon là gì?

Vì sao Favicon quan trọng với website?

Chỉ nắm bắt về khái niệm favicon là gì có lẽ vẫn làm bạn chưa hiểu hết được ý nghĩa của logo favicon với một webiste. Thật vậy, favicon mang lại cho website rất nhiều lợi ích như:

  • Tính thẩm mỹ cao tạo sự nổi bật: Với sự có mặt của favicon sẽ làm cho website thu hút hơn rất nhiều cũng như tạo được ấn tượng với người dùng. Nếu không có nó mọi thứ sẽ trở nên buồn chán và kém hấp dẫn trong mắt ngườu dùng.
  • Dễ dàng phân biệt: Favicon giúp người dùng dễ dàng phân biệt các tab với nhau mà không cần đọc tiêu đề.  Lợi ích này được phát huy tối đa khi   người sử dùng bật rất nhiều tab nhưng vẫn dễ dàng nhận biết được đâu là tab mình cần sử dụng. Đặc biệt, trong bookmarks, nó lại các giúp ngườu dùng nhận biết dễ dàng và nhanh chóng.
  • Xây dựng, nhận diện thương hiệu: Nghe thì có vẻ hơi vô lý nhưng đúng như vậy. Bạn có biết việc cài đặt hiện thị favicon sẽ giúp website có kết quả thứ hạng cao hơn trên các công cụ tìm kiếm. Bởi vì các công cụ này một phần dựa vào file favicon.icon để đánh giá các xếp hạng. Nghe đến đây thì làm sao có thể phủ nhận được lợi ích của favicon rồi phải không?
Xem thêm:  WP All Import Pro & Wp All Export Pro
Lợi ích favicon là gì?
Lợi ích favicon là gì?

Kích thước chuẩn và định dạng của favicon

Kích thước Favicon

Mỗi một hình ảnh trên website đều có một kích thước chuẩn riêng, favicon cũng không ngoại lệ. Việc xác định đúng kích thước của favicon sẽ giúp hình ảnh hiện thị đẹp và tiết kiệm dung lượng trang web.

Các kích thước chuẩn của favicon:

  • 16x16pixel
  • 32x32pixel
  • 48x48pixel
  • 64x64pixel

Định dạng favicon

Mỗi một trình duyệ sẽ có một yêu cầu khác nhau. Do đó để phát huy được hết tiềm năng của mình trên các công cụ tìm kiếm, favicon phải có những định dang khác nhau hay nhiều kích thước. Lưu ý dung lượng của hình ảnh phải nhỏ hơn 100kb và định dạng favicon.ico nhé!

Định dạng favicon là gì?
Định dạng favicon là gì?

Hướng dẫn chèn favicon vào website wordpress

Bước 1: Chuẩn bị hình ảnh favicon dạng hình vuông

Bước 2: Chuyển định dạng hình ảnh sang đuôi .ico

  • Truy cập vào đường link https://realfavicongenerator.net/
  • Tải file ảnh chuẩn bị tại mục “Select your favicon image”
  • Tạo file .ico bằng cách click vào “Generate your favicon anh html code”
  • Tại file ảnh về tại mục “Favicon Package”
Truy cập liên kết để tạo file favicon
Truy cập liên kết để tạo file favicon

Bước 3: Chèn Favicon vào webite

  • Tải flie hình ảnh lên website
  • Sao chép mã html
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
  • Dán mã html vừa sao chép vào mục head của website thay thế đường link hình ảnh bằng đường link hình ảnh faicon vừa tải lên có định dạng .ico là đã hoàn thành rồi.
Xem thêm:  Hướng dẫn sử dụng Plugin Duplicator

Với những chia sẻ của chúng tôi hy vọng, bạn sẽ hiểu được favicon là gì và cách khắc phục lỗi hiển thị favicon trên website của mình. Chúc các bạn thành công! Nếu có bất cứ thắc mắc gì liên hệ ngay với chúng tôi để được hỗ trợ.

Én Web – Thiết kế Website thương hiệu chuyên nghiệp

Hotline: 0961.37.37.05

Địa chỉ: K133/11 Đỗ Thúc Tịnh – Khuê Trung – Cẩm Lệ – Đà Nẵng

Fanpage: Én Web – Thiết kế website chuyên nghiệp

5/5 - (1 bình chọn)
Bài viết liên quan