Favicon là thành phần không thể thiếu đối với một trang web, nó mang ý nghĩa đại diện cho trang của bạn, cũng giống như mỗi người có chữ ký riêng thì mỗi trang web cũng nên có logo và favicon riêng. Favicon là từ được viết tắt của Favorite Icon, đây là biểu tượng nằm bên trên thanh tab của của trình duyệt khi bạn truy cập vào trang web.
Để có thể hình dung được các favicon là như thế nào, bạn có thể tham khảo như hình mình gửi kèm bên dưới, các biểu tượng nho nhỏ nằm bên trái mỗi tiêu đề trong mỗi tab là một favicon, khi nhìn vào biểu tượng đấy thì bạn có thể hình dung được trang web nằm bên trong là gì, tuy nhiên đối với những trang bạn chưa từng biết đến thì dù có nhìn thấy icon thì cũng không đoán ra được đâu.
Hầu hết, mọi người đều biết cách tạo favicon trên trình duyệt web, nhưng họ không biết rằng trong chức năng favicon này lại còn nhiều phần nhỏ bên trong, nếu bạn chỉ tạo một favicon cho trình duyệt web trên máy tính thôi thì chưa đủ, bạn cũng phải quan tâm đến thiết bị di động, cũng giống như giao diện của website vậy.
Và bây giờ, khi bạn đã đang đọc bài hướng dẫn này rồi thì còn chờ gì nữa mà không làm theo thử một cái cho vui. Sau khi thực hiện xong bạn sẽ truy cập vào trình duyệt bằng thiết bị di động và kéo biểu tượng trang web của mình ra ngoài màn hình, nhìn thấy icon xinh xắn thì thật thích phải không nào.
Tạo favicon đầy đủ cho website
Để tạo được favicon đầy đủ, tương thích với cả trình duyệt trên máy tính và các thiết bị di động, trước hết bạn phải thiết kế 1 icon hình vuông, có kích thước ít nhật 128×128 pixels, tốt nhất là bạn nên thiết kế favicon của bạn ở kích thước 256×256 pixels hoặc là lớn hơn. Miễn sao thiết kế của bạn phải đơn giản và rõ nét, nếu bạn dùng hình có kích thước bé quá thì khi hiển thị hình sẽ bị nhòe, nhìn rất xấu đó.
Tiếp đến bạn vào trang web realfavicongenerator.net, trên trang này sẽ có công cụ cho bạn test thử favicon trên blog của bạn đã đầy đủ hay chưa, nếu thiếu thì bạn tiến hành bổ sung.
Bạn lựa chọn hình ảnh để tiến hành chuyển đổi, sau đó nhấn nút Select your Favicon picture và dẫn đến hình ảnh của bạn vừa chọn để upload lên mạng, sau cùng là chờ đợi quá trình chuyển đổi hoàn tất, bạn chỉ cần ngồi đợi và tải nguyên thư mục về, giải nén và upload toàn bộ lên thư mục gốc của website. Sau đó bỏ đoạn code như họ hướng dẫn vào giữa thẻ head của giao diện.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/manifest.json"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#ffffff">
Nhưng hướng dẫn bên trên chỉ là cách thủ công, bạn hoàn toàn có thể làm tự động thông qua API của họ hoặc là dùng plugin của WordPress.
Bạn tìm kiếm và cài đặt plugin Favicon by RealFaviconGenerator, sau đó làm theo hướng dẫn của họ, cũng không có khó gì cho lắm, bạn chỉ việc upload lên icon favicon bạn muốn dùng và lưu lại để hệ thống tự xử lý cho bạn. Chúc bạn thành công.
