Favicon là gì? Tại sao Website phải có Favicon và cách tạo ntn?

Tư vấn dịch vụ | December 20, 2020 | Leave a comment

Favicon là một yếu tố dùng để đánh giá độ chuẩn mực của website. Vậy Favicon là gì? Nó đóng vai trò như thế nào đối với sự phát triển của website? Mời bạn cùng Hosting Việt tìm hiểu nhé.

favicon la gi

Favicon là gì? 

Trong thực tế, nhiều người đã từng thấy biểu tượng Favicon mỗi khi truy cập bất kỳ website nào, nhưng có lẽ ít người biết đó là gì. Mặc dù, đây là biểu tượng cần có của mỗi website và rất được người làm SEO chú trọng. 

Theo định nghĩa, Favicon là một hình ảnh icon hiển thị trên cùng ngay góc trái của trình duyệt. Nó như một dạng logo rút gọn, có kích thước chuẩn 16 x 16 pixels. Vì thế, khi người dùng truy cập vào website, họ thấy biểu tượng này như logo của chính website. Mục đích xuất hiện của Favicon là giúp người dùng nhận biết thương hiệu, phân biệt giữa các website.

Các lợi ích của Favicon là gì?

Tạo Favicon cho website mang đến các lợi ích sau:

  • Tạo dấu hiệu nhận dạng thương hiệu cho website, giúp phân biệt giữa các website khác nhau. Hơn nữa, website có sử dụng Favicon sẽ giúp người truy cập dễ nhận dạng và nhớ hơn.
  • Favicon hỗ trợ đắc lực cho SEO, thông qua việc góp phần xây dựng nhận diện thương hiệu của doanh nghiệp. Chưa dừng tại đó, những website có sử dụng Favicon sẽ có lợi thế về vị trí hiển thị trong kết quả tìm kiếm, tức là thứ hạng cao hơn.
  • Giúp người truy cập website nhanh chóng xác định tab đang mở trên trình duyệt. Bởi, Favicon của một website đều riêng biệt và không trùng lắp với website khác.

favicon la gi

Hướng dẫn cách tạo Favicon cho một website

Khi đã tìm hiểu về Favicon cũng như các lợi ích mà nó mang lại, tiếp theo bạn nên tạo Favicon cho website của mình. Điều này giúp tăng hiệu quả SEO. Cách thực hiện khá đơn giản, bạn chỉ việc thực hiện theo các bước sau:

  • Bước 1: Đầu tiên, bạn thiết kế một demo mẫu Favicon đẹp để làm Favicon. File ảnh này có kích thước chuẩn 512 x 512 px và định dạng tùy ý như jpg, png, gif…
  • Bước 2: Bạn vào website www.favicon-generator.org rồi tải file ảnh vừa thiết kế và nhấn Tạo Favicon. Lúc này, hệ thống sẽ tự động chuyển nó sang định dạng .ico – là định dạng chuẩn của Favicon. Sau đó, bạn tải ngược file định dạng .ico về máy tính.
  • Bước 3: Bạn tải file .ico lên host chứa dữ liệu của website.
  • Bước 4: Bạn chèn đoạn mã HTML như hình sau vào <head> </head> của website để tạo Favicon. 

favicon la gi

Cách thêm Favicon cho WordPress

Có 3 cách để thêm Favicon cho website WordPress. Sau đây, Hosting Việt sẽ hướng dẫn bạn các bước thực hiện chi tiết của từng cách.

Cách 1: Phương pháp thủ công

Để thêm Favicon cho website WordPress theo phương pháp thủ công, bạn thực hiện theo các hướng dẫn sau:

  • Bước 1: Bạn sử dụng File manager hay FTP Client để truy cập website.
  • Bước 2: Bạn tìm thư mục /wp-content/themes/your-theme
  • Bước 3: Thực hiện tải lên file Favicon có định dạng .ico vào thư mục Theme (Lưu ý: Bạn nên tải vào thư mục con).
  • Bước 4: Sau đó, bạn lưu lại đường dẫn.
  • Bước 5: Bạn tìm tiếp tập tin function.php.
  • Bước 6: Bạn chèn đoạn mã sau:

function add_favicon() {

echo ‘<link rel=”shortcut icon” type=”image/png” href=”‘.get_template_directory_uri().’/assets/favicon.png” />’;

}

add_action(‘wp_head’, ‘add_favicon’);

  • Bước 7: Bạn điền đường dẫn đã lưu ở bước 4 tới Favicon vào đoạn mã sau:

href=”‘.get_template_directory_uri()

Điền đúng tên file có định dạng .ico như sau:

function add_favicon() {

echo ‘<link rel=”shortcut icon” type=”image/png” href=”‘.get_template_directory_uri().’/assets/favicon.ico” />’; 

}

add_action(‘wp_head’, ‘add_favicon’);

Cách 2: Sử dụng WordPress Customizer

Nếu muốn thêm Favicon vào website WordPress bằng cách dùng WordPress Customizer, bạn thực hiện theo hướng dẫn sau đây:

  • Bước 1: Bạn di chuyển đến Admin Dashboard.
  • Bước 2: Tiếp đến, bạn truy cập mục Appearance.
  • Bước 3: Click chọn Customize.
  • Bước 4: Bạn tiếp tục chọn Site identity.
  • Bước 5: Bên dưới Site Icon, bạn chọn mục Select Image.
  • Bước 6: Tiến hành tải file Favicon định dạng .ico lên. 
  • Bước 7: Nhấn nút Publish để lưu lại toàn bộ các thay đổi.

Cách 3: Sử dụng Plugin để thêm Favicon là gì

Nếu thích dùng Plugin, bạn vẫn có thể sử dụng chúng để thêm Favicon cho website WordPress. Cách làm như sau: 

  • Bước 1: Bạn đăng nhập vào trang quản trị của website WordPress và đi đến phần Admin Dashboard.
  • Bước 2: Chọn mục Plugin.
  • Bước 3: Bạn click tiếp nút Add New.
  • Bước 4: Trên thanh tìm kiếm, bạn nhập cụm từ “Favicon by Real Favicon Generator”.
  • Bước 5: Tiến hành cài đặt Plugin và kích hoạt nó.
  • Bước 6: Bạn di chuyển chuyển đến mục Appearance.
  • Bước 7: Click chọn Favicon.
  • Bước 8: Bản tải file ảnh Favicon định dạng .ico lên. Lúc này, Plugin sẽ tự động thực hiện việc chỉnh sửa ảnh để theo đúng chuẩn. Tuy nhiên, để ảnh hiển thị có chất lượng đep, bạn nên chọn file có kích thước tối thiểu 70 x 70px, tốt nhất là 260 x 260px. 
  • Bước 9: Tiếp đến, khi tải ảnh bạn chọn Generate Favicon .
  • Bước 10: Plugin sẽ tự động chuyển bạn đến website Real Favicon Generator.
  • Bước 11: Bạn tìm mục Generate your Favicon and HTML Code và click vào nó.
  • Bước 12: Đến đây, Plugin tự động chuyển đến website. Cuối cùng, một thông báo việc cài đặt Favicon hoàn tất sẽ xuất hiện. 

favicon la gi

Các lưu ý khi thiết kế Favicon là gì?

Một thiết kế Favicon đúng chuẩn, được sử dụng làm hình ảnh đại diện cho website cần tuân thủ các nguyên tắc sau: 

  • Ảnh chọn để làm Favicon nên có định dạng PNG để đảm bảo chất lượng đạt tốt nhất.
  • Kích thước file ảnh tối đa 100kB.
  • Hiện nay, sự đa dạng của màn hình hiển thị như laptop, máy tính để bàn, thiết bị di động, ti vi,… khiến kích thước giao diện của website sẽ thay đổi. Do đó, hình ảnh hiển thị của Favicon phải đảm bảo sắc nét nhất. Vì vậy, kích thước ảnh ban đầu để làm chuyển sang Favicon nên lớn, tối ưu nhất là 512 x 512px. 

Trên đây là chia sẻ của Hosting Việt về Favicon là gì và cách thêm logo này cho website. Hi vọng, bài viết giúp bạn có thể tự thiết kế một Favicon nổi bật, mang đậm dấu ấn riêng dành cho doanh nghiệp của mình.

Xem thêm :

Related Posts

Add a Comment

Your email address will not be published. Required fields are marked *