2 cách thêm favicon vào blog WordPress

6 tháng ago, Hướng dẫn WordPress, Views

Giới Thiệu Favicon và Tầm Quan Trọng của Nó

Favicon, viết tắt của “favorite icon,” là biểu tượng nhỏ, thường là 16×16 hoặc 32×32 pixel, hiển thị bên cạnh tiêu đề trang web trong tab trình duyệt, dấu trang và lịch sử duyệt web. Nó đóng vai trò quan trọng trong việc xây dựng thương hiệu và cải thiện trải nghiệm người dùng.

Một favicon độc đáo và dễ nhận diện giúp:

Tăng nhận diện thương hiệu: Giúp người dùng dễ dàng nhận ra trang web của bạn trong vô số tab trình duyệt.
Cải thiện trải nghiệm người dùng: Favicon giúp người dùng nhanh chóng tìm thấy trang web của bạn trong dấu trang và lịch sử duyệt web.
Tăng tính chuyên nghiệp: Một favicon được thiết kế tốt tạo ấn tượng chuyên nghiệp và đáng tin cậy cho trang web của bạn.

Trong bài viết này, chúng ta sẽ khám phá hai cách đơn giản để thêm favicon vào blog WordPress của bạn.

Cách 1: Sử Dụng Tính Năng Tùy Biến Giao Diện (Theme Customizer)

Đây là cách đơn giản và được khuyến nghị nhất để thêm favicon vào blog WordPress của bạn, đặc biệt nếu bạn không quen thuộc với việc chỉnh sửa code.

Bước 1: Truy Cập Tính Năng Tùy Biến Giao Diện

Đăng nhập vào trang quản trị WordPress của bạn. Sau đó, điều hướng đến “Giao diện” (Appearance) -> “Tùy biến” (Customize).

Bước 2: Tìm Tùy Chọn “Identity Trang Web” (Site Identity)

Trong giao diện tùy biến, tìm tùy chọn có tên là “Identity Trang Web” (Site Identity) hoặc một tùy chọn tương tự. Tên có thể thay đổi tùy thuộc vào giao diện bạn đang sử dụng, nhưng thường nó sẽ liên quan đến thông tin cơ bản của trang web.

Bước 3: Tải Lên Favicon

Trong phần “Identity Trang Web” (Site Identity), bạn sẽ thấy một tùy chọn để tải lên “Biểu tượng trang” (Site Icon) hoặc “Favicon”. Nhấp vào nút “Chọn ảnh” (Select Image) hoặc “Thay đổi ảnh” (Change Image) và chọn ảnh favicon bạn muốn sử dụng từ thư viện media của bạn hoặc tải lên một ảnh mới.

Lưu ý:

Đảm bảo rằng ảnh favicon của bạn có định dạng .ico, .png, .jpg hoặc .gif.
Kích thước được khuyến nghị cho favicon là ít nhất 512×512 pixel. WordPress sẽ tự động điều chỉnh kích thước cho phù hợp.
Sau khi tải lên, bạn có thể được yêu cầu cắt ảnh để phù hợp với khung hình vuông.

Bước 4: Lưu Thay Đổi

Sau khi tải lên và cắt ảnh favicon của bạn (nếu cần), hãy nhấp vào nút “Đăng” (Publish) để lưu các thay đổi của bạn. Favicon mới của bạn sẽ được hiển thị ngay lập tức trên trang web của bạn.

Cách 2: Sử Dụng Plugin WordPress

Nếu bạn muốn có nhiều tùy chọn tùy chỉnh hơn hoặc giao diện của bạn không hỗ trợ tính năng tải lên favicon trực tiếp, bạn có thể sử dụng một plugin WordPress chuyên dụng.

Bước 1: Cài Đặt và Kích Hoạt Plugin

Đi tới “Plugin” -> “Cài mới” (Add New) trong trang quản trị WordPress của bạn. Tìm kiếm một plugin favicon, chẳng hạn như “Favicon by RealFaviconGenerator” hoặc “All in One Favicon”. Cài đặt và kích hoạt plugin bạn chọn.

Bước 2: Định Cấu Hình Plugin Favicon

Sau khi kích hoạt, plugin sẽ thêm một mục menu mới trong trang quản trị WordPress của bạn, thường là trong phần “Cài đặt” (Settings) hoặc một phần riêng. Nhấp vào mục menu đó để truy cập trang cấu hình plugin.

Bước 3: Tải Lên Favicon và Tạo Mã

Trang cấu hình plugin sẽ cho phép bạn tải lên ảnh favicon của bạn. Một số plugin có thể yêu cầu bạn cung cấp nhiều kích thước khác nhau cho các thiết bị và trình duyệt khác nhau. Một số plugin, như “RealFaviconGenerator”, sẽ tự động tạo tất cả các kích thước và mã cần thiết cho bạn.

Với “RealFaviconGenerator,” bạn chỉ cần tải lên một ảnh có kích thước ít nhất 260×260 pixel, và plugin sẽ tạo ra tất cả các biểu tượng và mã cần thiết. Nó cũng cung cấp các tùy chọn tùy chỉnh bổ sung, chẳng hạn như màu nền và biểu tượng iOS.

Sau khi tải lên ảnh và chọn các tùy chọn của bạn, hãy nhấp vào nút “Generate your Favicons”. Plugin sẽ đưa bạn đến trang web RealFaviconGenerator, nơi nó sẽ tạo tất cả các tệp và mã cần thiết.

Bước 4: Cài Đặt Mã Favicon

Sau khi RealFaviconGenerator tạo mã, nó sẽ cung cấp cho bạn một đoạn mã HTML để chèn vào phần <head> của trang web của bạn. Plugin sẽ tự động thêm mã này vào trang web của bạn. Trong một số trường hợp, bạn có thể cần sao chép và dán mã này vào tệp header.php của giao diện của bạn (xem phần “Chỉnh Sửa Tệp header.php” bên dưới).

Bước 5: Lưu Thay Đổi và Kiểm Tra

Sau khi cài đặt mã favicon, hãy lưu các thay đổi của bạn và kiểm tra trang web của bạn. Favicon mới của bạn sẽ được hiển thị trong tab trình duyệt, dấu trang và lịch sử duyệt web.

Chỉnh Sửa Tệp header.php (Chỉ Dành Cho Người Dùng Nâng Cao)

Nếu bạn không muốn sử dụng plugin và giao diện của bạn không có tùy chọn tải lên favicon, bạn có thể chỉnh sửa trực tiếp tệp header.php của giao diện của bạn. Tuy nhiên, hãy cẩn thận khi chỉnh sửa các tệp giao diện, vì một lỗi nhỏ có thể làm hỏng trang web của bạn. Sao lưu trang web của bạn trước khi thực hiện bất kỳ thay đổi nào.

Bước 1: Sao Lưu Trang Web Của Bạn

Trước khi thực hiện bất kỳ thay đổi nào đối với tệp header.php, hãy sao lưu toàn bộ trang web của bạn. Điều này sẽ giúp bạn khôi phục trang web của mình nếu có sự cố xảy ra.

Bước 2: Truy Cập Trình Chỉnh Sửa Giao Diện

Đi tới “Giao diện” (Appearance) -> “Trình chỉnh sửa giao diện” (Theme Editor) trong trang quản trị WordPress của bạn.

Bước 3: Tìm Tệp header.php

Trong trình chỉnh sửa giao diện, tìm tệp header.php ở bên phải. Nhấp vào tên tệp để mở nó.

Bước 4: Chèn Mã Favicon

Tìm thẻ <head> trong tệp header.php. Chèn đoạn mã HTML favicon của bạn (thường được cung cấp bởi plugin RealFaviconGenerator hoặc một công cụ tạo favicon trực tuyến) ngay trước thẻ đóng </head>.

Ví dụ, đoạn mã có thể trông như thế này:


<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">

Bước 5: Cập Nhật Tệp

Sau khi chèn mã, hãy nhấp vào nút “Cập nhật tệp” (Update File) để lưu các thay đổi của bạn.

Bước 6: Kiểm Tra Trang Web

Kiểm tra trang web của bạn để đảm bảo rằng favicon mới của bạn được hiển thị chính xác.