Kiểm tra favicon của website: bộ tệp cần có, cách khai báo và cách đọc kết quả cho đúng
Công cụ thử tải bảy tệp biểu tượng theo đường dẫn quy ước ở gốc tên miền bạn nhập, gồm các bản 16, 32, 48 pixel, tệp ico, biểu tượng cho iOS và hai bản 192 với 512 pixel cho Android. Mỗi tệp tìm thấy được hiện ảnh xem trước để bạn kiểm tra bằng mắt luôn.
Tính năng nổi bật
- Chỉ cần nhập tên miền, công cụ tự chuẩn hóa về gốc tên miền và bỏ phần đường dẫn thừa
- Kiểm tra bảy đường dẫn quy ước cùng lúc, hiện trạng thái từng tệp
- Ảnh xem trước hiện trên nền trắng để bạn thấy biểu tượng có bị chìm nền hay không
- Đếm số tệp tìm thấy trên tổng số tệp đã kiểm tra
- Cảnh báo ngay khi bộ biểu tượng chưa đầy đủ
- Hiển thị đường dẫn đầy đủ của từng tệp để bạn mở kiểm tra trực tiếp
- Bấm Enter là chạy, không cần rê chuột
- Chạy hoàn toàn trên trình duyệt, không gửi tên miền của bạn lên máy chủ trung gian nào
Favicon là chi tiết nhỏ nhưng xuất hiện ở nhiều chỗ đắt giá
Biểu tượng nhỏ ấy hiện trên tab trình duyệt, trong danh sách dấu trang, trong lịch sử duyệt web, trên màn hình chính khi người dùng thêm lối tắt trên điện thoại, trong ứng dụng đọc tin, trong công cụ quản lý mật khẩu, và quan trọng nhất là bên cạnh mỗi kết quả tìm kiếm trên di động. Ở chỗ cuối cùng đó, nó là một trong vài yếu tố thị giác hiếm hoi giúp bạn nổi lên giữa mười kết quả chỉ toàn chữ. Vấn đề là favicon thường được làm ở đầu dự án rồi không ai đụng lại: đổi bộ nhận diện thương hiệu nhưng quên thay biểu tượng, chuyển máy chủ nhưng tệp không được sao chép, đổi cấu trúc thư mục khiến đường dẫn khai báo trỏ vào chỗ trống. Kiểm tra định kỳ là việc chỉ mất mười giây nhưng bắt được những lỗi âm thầm kiểu đó, nhất là sau mỗi lần chuyển nền tảng hoặc dựng lại giao diện.
Lợi ích khi sử dụng
- Phát hiện nhanh trường hợp thiếu hẳn bộ biểu tượng sau khi chuyển nền tảng
- Nhìn thấy biểu tượng ở kích thước thật thay vì chỉ biết tệp tồn tại
- Kiểm tra được nhiều tên miền liên tiếp trong vài phút
- Không cần cài tiện ích hay đăng nhập công cụ quản trị nào
- Có sẵn đường dẫn từng tệp để chuyển ngay cho người quản trị máy chủ
Cách kiểm tra bộ favicon
- 1Nhập tên miền cần kiểm tra, gõ ngắn gọn cũng được vì công cụ tự thêm giao thức và tự cắt về gốc tên miền.
- 2Bấm kiểm tra hoặc nhấn Enter, các dòng kết quả lần lượt chuyển từ trạng thái đang kiểm tra sang tìm thấy hoặc không tìm thấy.
- 3Nhìn ảnh xem trước của từng tệp tìm thấy để kiểm tra biểu tượng có đúng bộ nhận diện hiện tại và có bị mờ hay không.
- 4Với những dòng báo không tìm thấy, hãy sao chép đường dẫn hiển thị bên dưới và mở thẳng trong một tab mới để xác nhận.
- 5Đối chiếu thêm bằng cách mở mã nguồn trang chủ và tìm các thẻ khai báo biểu tượng, vì đó mới là nguồn thật mà trình duyệt dùng.
Điểm mù của công cụ: kết quả không tìm thấy chưa chắc là thiếu
Đây là phần quan trọng nhất cần đọc trước khi kết luận. Công cụ kiểm tra bảy đường dẫn cố định ở gốc tên miền chứ không đọc mã nguồn trang để xem website khai báo biểu tượng ở đâu. Rất nhiều website đặt tệp biểu tượng trong thư mục tài nguyên với tên có mã băm để phục vụ bộ nhớ đệm, ví dụ trong thư mục assets với tên gồm chuỗi ký tự ngẫu nhiên, và khai báo đường dẫn đó bằng thẻ liên kết trong phần đầu trang. Với những site như vậy, trình duyệt vẫn hiển thị biểu tượng hoàn hảo trong khi công cụ này báo không tìm thấy toàn bộ bảy tệp. Điểm mù thứ hai mang tính kỹ thuật: công cụ tải ảnh ở chế độ yêu cầu chia sẻ tài nguyên giữa các nguồn, nên nếu máy chủ không trả về tiêu đề cho phép chia sẻ, việc tải sẽ thất bại và bị ghi nhận là không tìm thấy dù tệp có tồn tại thật. Điểm mù thứ ba là giới hạn chờ năm giây, nên máy chủ chậm cũng bị báo thiếu. Cách xác nhận chắc chắn duy nhất là sao chép đường dẫn hiển thị trong kết quả rồi mở thẳng trong tab mới, và đọc mã nguồn trang để xem các thẻ khai báo thật.
Bộ tệp biểu tượng thực sự cần có và mỗi tệp dùng ở đâu
Danh sách bảy tệp mà công cụ kiểm tra chính là quy ước do các công cụ sinh favicon phổ biến đặt ra, nên rất nhiều website theo đúng quy ước này. Tệp favicon.ico ở gốc tên miền vẫn nên giữ vì đây là đường dẫn mà trình duyệt tự dò ngay cả khi trang không khai báo gì; định dạng ico chứa được nhiều kích thước trong một tệp, thường gói 16, 32 và 48 pixel. Bản 16 pixel dùng cho tab trình duyệt trên màn hình thường, bản 32 pixel dùng cho tab trên màn hình mật độ cao và cho lối tắt trên máy tính. Bản 48 pixel là mốc mà công cụ tìm kiếm dùng làm cơ sở. Tệp apple-touch-icon dành cho iOS khi người dùng thêm trang vào màn hình chính, kích thước hiện được khuyến nghị là 180 nhân 180 pixel và nên có nền đặc vì iOS không giữ phần trong suốt. Hai tệp 192 và 512 pixel phục vụ Android và các ứng dụng web cài đặt được, chúng được khai báo trong tệp kê khai ứng dụng chứ không phải bằng thẻ liên kết. Ngoài ra nên có thêm một biểu tượng dạng SVG cho trình duyệt hiện đại, vì SVG sắc nét ở mọi kích thước và nhẹ hơn hẳn.
Khai báo trong HTML thế nào cho gọn và đúng
Cách khai báo tối thiểu mà vẫn phủ đủ các trường hợp gồm bốn dòng trong phần đầu trang. Dòng thứ nhất khai báo tệp SVG với thuộc tính rel là icon và type là image/svg+xml, đây sẽ là lựa chọn ưu tiên của trình duyệt hiện đại. Dòng thứ hai khai báo favicon.ico làm bản dự phòng cho trình duyệt cũ và cho trường hợp trình duyệt tự dò gốc tên miền. Dòng thứ ba khai báo apple-touch-icon với rel là apple-touch-icon và kích thước 180 nhân 180. Dòng thứ tư trỏ tới tệp kê khai ứng dụng, trong đó liệt kê hai biểu tượng 192 và 512 pixel cùng tên ứng dụng và màu nền. Nên thêm một thẻ meta theme-color để thanh trình duyệt trên di động lấy màu thương hiệu. Vài lưu ý dễ sai: dùng đường dẫn tuyệt đối bắt đầu bằng dấu gạch chéo thay vì đường dẫn tương đối, vì đường dẫn tương đối sẽ hỏng ở các trang nằm sâu; đặt thuộc tính sizes đúng với kích thước thật của tệp chứ đừng chép đại; và nếu bạn dùng mã băm trong tên tệp để phục vụ bộ nhớ đệm thì vẫn nên giữ một bản favicon.ico ở gốc tên miền.
Vì sao đổi favicon rồi mà trình duyệt vẫn hiện cái cũ
Biểu tượng là loại tài nguyên được trình duyệt lưu đệm lì nhất, đôi khi trong một kho riêng không xóa cùng với bộ nhớ đệm thông thường, và thời gian giữ có thể kéo dài nhiều ngày. Cách buộc làm mới theo thứ tự nên thử: mở thẳng đường dẫn tệp biểu tượng trong một tab rồi tải lại trang đó bằng tổ hợp phím tải lại bỏ qua bộ nhớ đệm; nếu vẫn cũ thì xóa dữ liệu duyệt web của riêng tên miền đó; nếu vẫn chưa được thì đổi luôn tên tệp và cập nhật thẻ khai báo, đây là cách chắc chắn nhất vì đường dẫn mới thì không có bản đệm nào. Với favicon hiển thị trong kết quả tìm kiếm thì phải kiên nhẫn hơn nhiều, vì công cụ tìm kiếm cập nhật theo chu kỳ thu thập lại trang chủ chứ không theo thời gian thực. Điều kiện để một biểu tượng đủ tiêu chuẩn xuất hiện trong kết quả tìm kiếm gồm: tệp nằm trên cùng tên miền hoặc được khai báo bằng thẻ liên kết hợp lệ, đường dẫn ổn định không đổi liên tục, tệp không bị chặn bởi tệp robots, và kích thước là hình vuông có cạnh là bội số của 48 pixel, ví dụ 48, 96 hoặc 144.
Thiết kế một biểu tượng còn đọc được ở 16 pixel
Đây là bài toán thiết kế khó hơn vẻ ngoài của nó, vì 16 nhân 16 pixel là một khung cực nhỏ, tương đương chiều cao một chữ cái trong đoạn văn này. Sai lầm phổ biến nhất là thu nhỏ nguyên logo đầy đủ có cả chữ; ở kích thước đó phần chữ biến thành một vệt xám không đọc được và biểu tượng mất hết chức năng nhận diện. Cách làm đúng là tách ra phần đặc trưng nhất của bộ nhận diện, thường là một chữ cái đầu hoặc một hình khối biểu tượng, rồi vẽ lại riêng cho khung nhỏ với nét dày hơn và ít chi tiết hơn bản gốc. Nguyên tắc thực dụng: không quá hai màu cộng nền, không có chi tiết mảnh hơn hai pixel, không dùng đổ bóng hay chuyển màu tinh tế vì chúng biến thành nhiễu. Nền nên là màu đặc thay vì trong suốt, vì tab trình duyệt ở chế độ tối và chế độ sáng có nền khác nhau và một biểu tượng đen trên nền trong suốt sẽ biến mất trên nền tối. Cách kiểm tra rẻ nhất là mở tệp 16 pixel cạnh vài tab khác trong trình duyệt và tự hỏi mình có nhận ra nó trong nửa giây hay không.
Câu hỏi thường gặp (FAQ)
Công cụ báo không tìm thấy nhưng website tôi vẫn hiện favicon, vì sao?
Vì công cụ chỉ thử bảy đường dẫn quy ước ở gốc tên miền chứ không đọc mã nguồn trang. Nếu website của bạn đặt tệp trong thư mục tài nguyên với tên có mã băm rồi khai báo bằng thẻ liên kết, trình duyệt vẫn hiển thị đúng trong khi công cụ báo thiếu. Hãy mở mã nguồn trang chủ và tìm các thẻ khai báo biểu tượng để xác nhận.
Còn lý do kỹ thuật nào khác gây báo nhầm không?
Có hai lý do. Thứ nhất, công cụ tải ảnh ở chế độ yêu cầu chia sẻ tài nguyên giữa các nguồn, nên máy chủ không trả tiêu đề cho phép sẽ khiến việc tải thất bại dù tệp tồn tại. Thứ hai, giới hạn chờ là năm giây nên máy chủ chậm cũng bị ghi là không tìm thấy. Cách xác nhận chắc chắn là mở thẳng đường dẫn trong tab mới.
Một website cần tối thiểu những tệp biểu tượng nào?
Tối thiểu nên có ba thứ: một tệp favicon.ico ở gốc tên miền làm bản dự phòng, một biểu tượng SVG cho trình duyệt hiện đại, và một tệp apple-touch-icon 180 nhân 180 cho iOS. Nếu muốn người dùng cài được như ứng dụng thì bổ sung hai bản 192 và 512 pixel khai báo trong tệp kê khai ứng dụng.
Vẫn cần tệp favicon.ico trong năm nay không?
Vẫn nên giữ. Đây là đường dẫn mà trình duyệt tự dò ngay cả khi trang không khai báo gì, và một số công cụ đọc tin, công cụ quản lý dấu trang hay trình thu thập dữ liệu vẫn chỉ tìm ở đó. Định dạng ico còn gói được nhiều kích thước trong một tệp, thường là 16, 32 và 48 pixel.
apple-touch-icon nên làm kích thước bao nhiêu?
180 nhân 180 pixel là kích thước hiện được khuyến nghị, iOS sẽ tự thu nhỏ cho các thiết bị khác. Quan trọng là nền phải đặc chứ đừng để trong suốt, vì iOS không giữ phần trong suốt mà sẽ lấp bằng màu đen, khiến biểu tượng trông rất tệ trên màn hình chính.
Vì sao đổi favicon rồi mà trình duyệt vẫn hiện cái cũ?
Vì biểu tượng được lưu đệm rất lì, đôi khi trong kho riêng không xóa cùng bộ nhớ đệm thường. Hãy mở thẳng đường dẫn tệp rồi tải lại bỏ qua bộ nhớ đệm, nếu chưa được thì xóa dữ liệu duyệt web của riêng tên miền đó. Cách chắc chắn nhất là đổi tên tệp và cập nhật thẻ khai báo.
Favicon trong kết quả tìm kiếm Google cần điều kiện gì?
Tệp phải nằm trên cùng tên miền hoặc được khai báo bằng thẻ liên kết hợp lệ, đường dẫn phải ổn định chứ không đổi liên tục, không bị chặn trong tệp robots, và ảnh phải là hình vuông có cạnh là bội số của 48 pixel, ví dụ 48, 96 hoặc 144. Google cập nhật theo chu kỳ thu thập lại trang chủ nên cần thời gian.
Biểu tượng SVG có thay được toàn bộ các tệp khác không?
Chưa nên. Trình duyệt hiện đại hỗ trợ tốt và SVG sắc nét ở mọi kích thước, nhưng vẫn nên giữ tệp ico dự phòng cho trình duyệt cũ và các công cụ tự dò gốc tên miền, cùng tệp apple-touch-icon cho iOS. Cách an toàn là khai báo SVG trước rồi ico sau trong cùng phần đầu trang.
Vì sao favicon của tôi biến mất khi tab ở chế độ tối?
Vì biểu tượng dùng nét màu tối trên nền trong suốt, nên khi nền tab chuyển sang tối thì hình chìm hẳn. Hãy dùng nền đặc, hoặc chọn màu nét có đủ tương phản với cả nền sáng lẫn nền tối. Có thể khai báo hai phiên bản SVG theo chế độ màu, nhưng dùng một biểu tượng an toàn cho cả hai thường đơn giản hơn.
Thiết kế favicon nên tránh những gì?
Tránh thu nhỏ nguyên logo có chữ, vì ở 16 pixel phần chữ thành một vệt xám không đọc được. Tránh chi tiết mảnh hơn hai pixel, tránh đổ bóng và chuyển màu tinh tế vì chúng biến thành nhiễu. Hãy tách phần đặc trưng nhất của bộ nhận diện rồi vẽ lại riêng cho khung nhỏ với nét dày hơn.
Nên khai báo bằng đường dẫn tuyệt đối hay tương đối?
Dùng đường dẫn tuyệt đối bắt đầu bằng dấu gạch chéo. Đường dẫn tương đối sẽ hỏng ở các trang nằm sâu trong cấu trúc thư mục vì trình duyệt sẽ ghép nó vào thư mục hiện tại thay vì gốc tên miền, và lỗi này thường chỉ lộ ra ở vài trang chứ không phải trang chủ.
Kiểm tra favicon của website người khác có được không?
Được, công cụ chỉ tải các tệp biểu tượng công khai giống như trình duyệt vẫn làm khi bạn mở trang đó. Đây là cách nhanh để xem đối thủ đã làm đủ bộ biểu tượng hay chưa, nhưng hãy nhớ những điểm mù đã nêu ở trên trước khi kết luận rằng họ thiếu.
Từ khóa liên quan
- kiểm tra favicon website
- favicon checker online
- favicon là gì
- kích thước favicon chuẩn
- favicon.ico đặt ở đâu
- apple touch icon 180x180
- android chrome 192x192 512x512
- khai báo favicon trong html
- favicon svg trình duyệt
- favicon không cập nhật
- xóa cache favicon
- favicon trong kết quả google
- favicon bội số 48px
- web app manifest icons
- theme-color meta tag
- thiết kế favicon 16px
- favicon nền trong suốt chế độ tối
- favicon bị mất sau khi đổi host
- bộ favicon đầy đủ
- công cụ kiểm tra favicon miễn phí
