Biểu tượng Apple Touch chỉ định rõ ảnh dùng khi khách truy cập thêm trang web vào màn hình chính iPhone. Biểu tượng này tách biệt với favicon trên thẻ trình duyệt và các biểu tượng khai báo trong manifest ứng dụng web.
Chỉ một kích thước: 180×180
180×180 pixel thường được dùng làm ảnh nguồn độ phân giải cao. iOS có thể thu nhỏ ảnh cho các vị trí nhỏ hơn, nên phần lớn dự án chỉ cần một khai báo.
Khuyến nghị cũ liệt kê tám tệp, từ 57×57 đến 152×152, mỗi tệp có thuộc tính sizes riêng. Các phiên bản đó không còn cần thiết: chúng làm HTML cồng kềnh và tạo thêm yêu cầu mà kết quả vẫn giống nhau.
Tệp phải là PNG. iOS không đọc SVG hay WebP cho biểu tượng này, còn JPEG làm hỏng đường viền sắc nét của hình đồ họa phẳng.
Ưu tiên nền không trong suốt
Nền trong suốt có thể cho kết quả ngoài ý muốn tùy phiên bản và ngữ cảnh hiển thị. Để kiểm soát hình ảnh trên màn hình chính, hãy đặt thiết kế trên nền không trong suốt do bạn chọn.
Cách khắc phục là gộp biểu tượng lên nền không trong suốt trước khi xuất. Chọn màu thương hiệu hoặc trắng đơn giản nếu biểu tượng nhiều màu, và chừa khoảng đệm chừng 10% quanh hình để bố cục thoáng.
Đừng tự bo góc: iOS áp dụng mặt nạ bo góc riêng. Tệp đã bo góc sẽ bị bo hai lần, làm các góc xấu đi.
Thẻ cần dán
Chỉ cần một dòng trong head của các trang: link rel="apple-touch-icon" href="/apple-touch-icon.png". Thuộc tính sizes không bắt buộc khi chỉ cung cấp một tệp.
Có thể thêm meta name="apple-mobile-web-app-title" content="Your brand" để kiểm soát nhãn bên dưới biểu tượng. Nếu thiếu thẻ này, iOS dùng tiêu đề trang, thường quá dài và bị cắt bớt.
Đồng thời đặt một bản sao tên apple-touch-icon.png ở thư mục gốc: tương tự favicon.ico, iOS tìm tệp tại địa chỉ đó khi không thấy thẻ khai báo.
Vì sao biểu tượng không chịu cập nhật?
iOS lưu đệm biểu tượng rất lâu, và lối tắt đã có trên màn hình chính không tự thay đổi. Để thử phiên bản mới, xóa lối tắt, xóa dữ liệu Safari rồi thêm lại trang web.
Nếu biểu tượng vẫn thiếu, kiểm tra ba điều: tệp trả mã 200 thay vì 404, được phục vụ với kiểu nội dung image/png và không bị quy tắc robots.txt hay xác thực chặn.
Công cụ kiểm tra LFFavicon kiểm tra chính các trường hợp này với mọi URL công khai và hiển thị biểu tượng thực sự tải được.
Nguồn chính thức
Câu hỏi thường gặp
Có cần nhiều kích thước apple-touch-icon không?
Với phần lớn dự án, một tệp 180×180 độ phân giải cao cho phép iOS tạo các bản nhỏ hơn. Hãy thử trên các thiết bị nằm trong danh sách hỗ trợ của bạn.
Android có dùng apple-touch-icon không?
Chrome trên Android có thể dùng làm phương án dự phòng, nhưng ưu tiên đọc biểu tượng trong web manifest. Luôn khai báo biểu tượng 192×192 và 512×512 trong manifest, đó là cách chính thức.
Có dùng SVG làm biểu tượng Apple Touch được không?
Không, iOS yêu cầu PNG raster cho thẻ này. Giữ SVG cho favicon trình duyệt máy tính để có độ sắc nét và hỗ trợ chế độ tối.