Hướng dẫn cập nhật Favicon cho website WordPress

Favicon là gì ?

Favicon không còn là một khái niệm gì mới cả, nó đã xuất hiện trên Internet và trên các trình duyệt từ những năm trước, tuy nhiên chi tiết nhỏ này khá quan trọng, vì vậy trong bài viết này chúng ta sẽ tìm hiểu nó là gì nhé.

Favicon là một biểu tượng nhỏ được hiển thị trên các tab của trình duyệt tương ứng với mỗi địa chỉ website, đồng thời cũng được hiển thị trong danh sách bookmark, lịch sử duyệt website giúp ta có thể phân biệt các địa chỉ dễ dàng hơn thay vì nhìn vào các tab chỉ toàn là chữ. Vậy bạn cũng đã biết sơ về công dụng của Favicon rồi nhỉ.

 

Các định dạng của Favicon

Hiện nay chúng ta có nhiều trình duyệt hơn như (Chrome, Firefox, Safari, Cốc cốc..). Mức độ phức tạp cũng dần nâng cao hơn, vì thế chúng ta cần phải làm Favicon nắn nót và tỉ mỉ hơn.

Để tương thích với các trình duyệt hiện nay bạn cần lưu ý 2 điều này:

• Favicon cần có nhiều kích thước khác nhau (16×16, 20×20, 24×24 pixels…).
• Favicon cần có nhiều định dạng ở các đuôi file khác nhau.

Cách nào để thiết kế và tạo ra Favicon?

Đây không phải là một việc quá khó, thông thường Favicon của bạn cũng chính là logo chỉ khác là bạn nên lượt bỏ chữ trong trong logo nhằm đưa ra một logo đơn giản nhất .

Bạn có thể tự thiết kế và tạo ra Favicon bằng cách sử dụng Adobo Photoshop. Tuy vậy hiện nay bạn cũng có thể sử dụng các công cụ online để tạo ra Favicon miễn phí như https://favicon.io/ , https://www.favicon-generator.org/ .

Một số Lưu ý khi thiết kế Favicon

• Định dạng của Favicon bạn nên sử dụng .png, .ico, v.v… Tuy vậy .ico vẫn là định dạng ổn nhất.
• Kích thước tiêu chuẩn cho Favicon hiện nay là 512x512px, vì các thiết bị di động và màn hình ngày càng phát triên, bạn cần phải có kích thước lớn để hiển thị sắc nét nhất.

Các cách để thêm Favicon cho website

Bên dưới sẽ là phần mình hướng dẫn cho các bạn cách để thêm Favicon cho website WordPress

Bước 1: thêm Favicon cho website WordPress

Thực hiện các bước sau để cập nhật Favicon với tuỳ biến giao diện của WordPress

• Đầu tiên ta di chuyển đến Admin Dashboard.
• Tiếp theo trỏ chuột tới mục Appearance → Customize.
• Nhấn Chọn Header → logo & site Identity.
• Lăn chuột đến phần Site icon và nhấn Select image.
• Upload Favicon và nhấn nút Publish để lưu lại.

Vậy là bạn đã hoàn tất thêm Favicon cho website WordPress rồi

Bước 2: thêm Favicon cho website WordPress bằng cách thủ công

Thực hiện các bước sau để cập nhật Favicon cho WordPress bằng cách thủ công:

• Trước tiên bạn vào truy cập vào Client or File manager tại host bạn đang sử dụng.
• Tiếp theo upload hình ảnh Favicon vào thư mục httpdoc

• Lưu lại đường dẫn có chứa file hình của bạn vừa upload
• Bây giờ tìm file có tên function.php và thêm vào đoạn code sau.

function add_favicon() {
echo '<link rel="shortcut icon" type="image/png" href="../../favicon.ico"/>';
}
add_action('wp_head','add_favicon');

Bên trong phần href=”….” là chỗ bạn sẽ điền đường dẫn tới file Favicon bạn đã upload vào. Lưu ý bạn phải chắc rằng mình điền đúng đường dẫn và tên của file nhé.

Vậy là bạn đã hoàn tất thêm Favicon vào website WordPress bằng cách thủ công rồi.

Qua bài viết này mình hy vọng bạn đã hiểu được Favicon là gì, tầm quan trong và làm thế nào để tạo ra Favicon của bạn

Chúc các bạn thành công.