Cách thêm Favicon WordPress

Favicon là một biểu tượng nhỏ trên tiêu đề của website trên trình duyệt. Favicon WordPress cũng hiển thị ở trong danh sách bookmark, lịch sử duyệt website, và ở nhiều nơi khác mà website có thể hiển thị hình ảnh.

Chi tiết nhỏ này khá quan trọng đối với nhận dạng thương hiệu trên mạng của bạn. Chúng ta sẽ cùng thảo luận về WordPress favicon và cách thêm Favicon vào website WordPress của bạn ở phần sau nhé.

Vì sao cần phải thêm Favicon vào website?

Favicon có thể nói giống như hình CMND của website của bạn vậy; mọi người sẽ mong đợi nhìn thấy logo của bạn được đặt vào vị trí đó. Nếu không chèn favicon WordPress, website của bạn sẽ nhìn giống như bị thiếu hay chưa hoàn thiện.

Đây là một số lý do vì sao Favicon WordPress quan trọng:

• Khẳng định thương hiệu
  Hầu hết người dùng thích mở nhiều tab trên trình duyệt. Nếu không có favicon, họ chỉ nhìn thấy tiêu đề trang web hoặc tiêu đề bài viết trên trình duyệt. Hoặc tệ hơn là, nếu họ mở 20 tab, họ sẽ không còn nhận ra web của bạn nằm đâu nữa do chữ đã bị che mất.
  Chính vì vậy, cùng với tên miền, tiêu đề website, favicon là một trong các yếu quan trọng để giúp người xem nhanh chóng nhận ra website đang mở là website nào. Favicon WordPress nhỏ nhưng cũng là biểu tượng hiệu quả nhất để tăng khả năng nhìn thấy cho người dùng.

• Xây dựng niềm tin
  Bạn sẽ ngay lập tức tạo ác cảm cho người xem nếu website không có favicon. Vì nó trông như một website không nghiệp dư vậy.
  Nếu bạn muốn tạo website chỉ cho viết blog hằng ngay cũng vậy, có thể bạn không cần tính chuyên nghiệp. Nhưng chắc hẳn là bạn muốn người ta nhớ tới blog của bạn, và hình ảnh mang tính biểu tượng như favicon sẽ dễ nhớ hơn. Còn nếu bạn tạo một website công ty hay cửa hàng online, thì quả thật là favicon không thể thiếu rồi đó.
  Khách hàng sẽ không tin tưởng giao dịch trên web nếu nó trông không chuyên nghiệp.

• Cải thiện trải nghiệm di động
  Thời đại của di động là bây giờ. Nên việc có một website responsive là tất yếu. Người dùng có thể nhanh chóng bookmark website của bạn hoặc thường click vào website trong lịch sử duyệt web. Họ thường không gõ toàn bộ URL ra nữa! Và bạn hãy đoán xem, người dùng chỉ dành 1 phần trăm giây để click vào các biểu tượng của trang web trong điện thoại để duyệt web. Favicon đóng vai trò quan trọng vì nó sẽ giúp người dung ghi nhớ website của bạn là gì, nó gắn chặt với website của bạn!

Tạo favicon WordPress

Thông thường, favicon của bạn cũng chính là logo. Đối với kích thước, chúng tôi khuyên bạn sử dụng hình vuông ở cỡ 512px x 512px.

Bạn có thể dùng ảnh lớn hơn, nhưng WordPress sẽ tự cắt nó thành nhỏ hơn để khớp với khung hình.

Để tạo ảnh có kích thước chính xác 512 pixels x 512 pixels, bạn có thể dùng bất kỳ công cụ chỉnh sửa ảnh nào để chỉnh như là Adobe Photoshop (trả tiền) và Gimp (miễn phí) hoặc công cụ tạo favicon online.

Mặc dù bạn có thể chọn màu nền của favicon trên WordPress, chúng tôi khuyên nên dùng loại trong suốt. Bạn có thể dùng định dạng .jpeg, .ico, .gif hay .png (nếu dùng nên trong suốt thì bạn cần dùng định dạng .png ).

Sau khi bạn đã hình đúng kích thước, bạn có thể thêm ảnh đó làm favicon WordPress như sau:

1. Thêm Favicon cho WordPress bằng WordPress Customizer

Kể từ phiên bản WordPress 4.3 trở lên, bạn có thể dễ dàng thêm favicon vào WordPress trong khu vực admin qua các bước sau:

1. Chuyển vào Admin Dashboard
2. Di chuột tới mục Appearance -> Customize
3. Chọn Site identity
4. Nhấn vào nút Select Image bên dưới phần Site Icon
5. Upload favicon lên
6. Nhấn nút Publish để lưu thay đổi

Nếu thực hiện đúng favicon sẽ hiện lên trên tiêu đề website của bạn. Để cài đặt cho site di động, truy cập vào website qua điện thoại và nhấn vào nút Add to Homescreen.

Favicon sẽ hiện lên trên trang chủ.

2. Thêm Favicon WordPress bằng Plugin

Bạn có thể thêm favicon vào WordPress bằng plugin gọi là Favicon by RealFaviconGenerator. Nó dễ dùng và có nhiều tính năng thêm. Đây là những bước đơn giản để thêm favicon vào website:

1. Vào trang Admin Dashboard
2. Chọn Plugin -> Add New
3. Gõ Favicon by RealFaviconGenerator trong thanh tìm kiếm
4. Cài đặt và kích hoạt plugin
5. Sau khi kích hoạt, chuyển tới Appearance -> Favicon
6. Upload ảnh mà bạn muốn cài đặt favicon vào. Bạn không cần sửa ảnh bằng phần mềm chỉnh sửa ảnh. Plugin này sẽ làm giúp bạn. Chỉ cần chọn ảnh có kích thước từ 70 x 70px trở lên. Tốt nhất là nên chọn ảnh trên 260 x 260 px.
7. Khi bạn upload ảnh, chọn Generate Favicon.
8. Sau khi nhấn vào nút đó, plugin sẽ chuyển bạn tới website RealFaviconGenerator.
9. Trên website, tìm và click vào nút Generate your Favicon and HTML code.
10. Plugin sẽ đem bạn trở lại website. Bạn sẽ nhận được thông báo favicon đã được cài đặt.
11. Xem favicon trông như thế nào trên trình duyệt và trên điện thoại.

3. Thêm Favicon WordPress thủ công

Để thêm favicon vào WordPress thủ công, bạn có thể thực hiện theo hướng dẫn sau:

1. Truy cập vào website bằng FTP client or File manager
2. Tìm thư mục /wp-content/themes/your-theme
3. Upload favicon vào thư mục theme của bạn. Chúng tôi khuyên là bạn nên upload nó vào thư mục con, ví dụ như thư mục Assets
4. Lưu lại đường dẫn
5. Tìm file có tên function.php rồi thêm vào đoạn code 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');
6. Đoạn sau của href=”‘.get_template_directory_uri() là chỗ bạn cần điền đường dẫn tới favicon vào. Bạn phải điền đúng tên file và đường dẫn của nó. Ví dụ như file của bạn có định dạng .ico vậy bạn cần điền 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');

Lời kết

Không còn gì phải bàn cãi! Favicon là một yếu tố bắt buộc của website phải có! Và, cũng vô cùng đơn giản để bạn tạo và thêm favicon cho WordPress.

Favicon giống như hình định danh của website bạn vậy. Nó chỉ chiếm một vị trí nhỏ trên website, nhưng yếu tố này đảm nhiệm vai trò rất lớn trong việc khẳng định thương hiệu và giúp người dùng ghi nhớ dễ dàng. Trong bài viết này, chúng tôi đã chỉ bạn cách làm thế nào để thêm favicon trong WordPress bằng plugin và bằng phương pháp thủ công. Bạn cũng có thể dùng cách này để thay đổi favicon trong WordPress.

Theo kinh nghiệm của chúng tôi, favicon nên dùng hình vuông, kích thước 70×70 pixels trở lên, sử dụng màu nền là trong suốt. Còn bạn thì sao?

Nếu bạn có bất kỳ mắc nào về favicon WordPress hoặc có mẹo nào xử lý favicon, hãy cùng chia sẽ với chúng tôi trong phần bình luận bên dưới nhé.