Favicon là gì và file .ico là gì?

Favicon là biểu tượng nhỏ xuất hiện trên tab của trình duyệt web (cạnh tiêu đề trang). File .ico là định dạng chuẩn lịch sử của Microsoft dành cho các biểu tượng này, nó có đặc tính đặc biệt là có thể chứa nhiều kích thước ảnh bên trong một tệp duy nhất để trình duyệt tự chọn cỡ hiển thị phù hợp.

Tại sao tôi cần file apple-touch-icon.pngũ

Trình duyệt Safari và hệ điều hành iOS của Apple yêu cầu một file ảnh định dạng PNG kích thước 180x180 px với tên gọi apple-touch-icon.png để vát viền và hiển thị mượt mà khi người dùng lưu website của bạ ra màn hình điện thoại iPhone/iPad.

File site.webmanifest là gì?

Đây là một file cấu hình JSON dành riêng cho các dòng máy Android. Nó khai báo trực tiếp với trình duyệt Chrome trên điện thoại về tên ứng dụng web, màu chủ đạo và đường dẫn trỏ tới các file icon kích thước cực lớn dạng 192x192 hay 512x512.

Tạo tự động 100% Client-side

Công Cụ Tách Icon Từ Ảnh (Tạo Favicon .ICO)

Tải lên một tấm ảnh vuông bất kỳ, hệ thống sẽ tự động cắt, thu nhỏ và đóng gói trọn bộ Favicon chuyên nghiệp cho Website, Android & iOS chỉ trong 1 giây.

Tải lên hoặc kéo thả Ảnh Logo vào đây

Nên dùng ảnh hình vuông (1:1), định dạng PNG có nền trong suốt để có hiệu quả tốt nhất. Kích thước khuyến nghị: 512x512px.

logo.png

Độ phân giải bản gốc: Đang đọc...

Các tệp sẽ được tạo tự động:

Dành cho Web chuẩn (ICO)

favicon.ico (Bao gồm 16x16, 32x32)
favicon-16x16.png
favicon-32x32.png

Dành cho Apple iOS

apple-touch-icon.png (180x180)

Dành cho Android (PWA)

android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest (JSON config)

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.

❓ Câu Hỏi Thường Gặp Về Tách Icon và Tạo Favicon

Làm sao để tạo một file ảnh .ico chuẩn bằng code?

Một tệp .ico hợp lệ không phải do đổi đuôi ảnh từ ".png" thành ".ico" mà thành. Nó có cấu trúc nhị phân đặc thù với phần Header quy định số lượng ảnh, theo sau là chuỗi Bytestream của các ảnh con lồng ghép bên trong. Công cụ của chúng tôi sử dụng JavaScript biên dịch mã nhị phân ảnh trực tiếp trên trình duyệt của bạn để tạo ra cấu trúc .ico chuẩn chuyên nghiệp.

Công cụ có lưu trữ ảnh Logo của tôi lên máy chủ khôngũ

Tuyệt đối không! Việc cắt ảnh, tạo cấu trúc ICO và đóng gói file ZIP được viết hoàn toàn bằng Client-side Javasript (sử dụng thư viện JSZip và FileReader API). Bản nâng cấp này hoạt động ngay cả khi bạn mất kết nối mạng (Network đứt sóng) vào lúc đang ấn nút "Tải Về".

Tại sao tôi thay hình ảnh rồi mà trên Web vẫn hiện hình Icon cũ?

Đó là hiện tượng Cache trình duyệt cắn bộ nhớ cục bộ quá sâu. Bạn hãy tải lại trang thiết lập bộ nhớ đệm ẩn (Shift + F5 đối với trình duyệt Chrome/Edge trên Windows) hoặc đổi tên file đi ở thẻ gọi HTML để ép rình duyệt làm mới đường dẫn.