Tại Sao Bạn Cần Tách Icon Từ Ảnh Để Web Trông Chuyên Nghiệp Hơn?
Trang bị biểu tượng Favicon (Favorite Icon) ở góc tab trình duyệt là bước đầu tiên chứng
minh website của bạn uy tín. Tuy nhiên, việc chỉ dùng 1 tấm ảnh .png to đùng và chèn vào
thẻ HTML là một sai lầm chết người trong SEO, vì các thiết bị (iPhone, Chrome Android, IE cũ) yêu cầu độ
phân giải và kiểu file hoàn toàn khác nhau.
Công cụ tạo Favicon (Favicon Generator) của Tiện Ích Mini sẽ giải quyết bài toán đó chỉ với 1 Click. Bằng cách tách một ảnh lớn thành hàng loạt icon nhỏ nhắn, bạn sẽ sở hữu một gói Icon tuyệt hảo bao gồm:
Hướng dẫn chèn Code sau khi tải file ZIP về:
- Giải nén file `.zip` bạn vừa tải về.
- Tải tất cả các file ảnh và tệp `.xml`, `.manifest` đó lên thư mục gốc (Root directory - thường
là thư mục
public_html) của mã nguồn Website web. - Copy đoạn code HTML dưới đây và dán thẳng mộc vào bên trong thẻ
<head>trên tất cả các trang web của bạn.
<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">
Các Tệp Kèm Theo Có Ý Nghĩa Gì?
- favicon.ico: Định dạng cổ điển nhưng sống dai nhất. Một tệp .ico duy nhất này có thể chứa cả cỡ 16x16 và 32x32 bên trong nó để tự động chuyển đổi. Lỗi hiển thị đa số do Webmasters bỏ quên nó.
- apple-touch-icon.png: Biểu tượng chuyên biệt độ phân giải 180x180 px. Khi người dùng dùng Safari trên iPhone và nhấn "Lưu trang ra màn hình chính" (Add to Home Screen), hệ thống iOS sẽ dùng ảnh mượt mà này thay thế.
- site.webmanifest: Tiêu chuẩn cốt lõi của Progressive Web App (PWA). Nó biến trang web của bạn chạy như một phần mềm thực thụ trên thiết bị Android, thay đổi màu thanh trạng thái (status bar) và cung cấp các biểu tượng khổng lồ 512x512px.