Định dạng tệp
ICO là gì? Giải thích tệp biểu tượng và favicon
ICO là định dạng biểu tượng của Windows, chứa nhiều kích thước trong một tệp. Bài viết giải thích cấu trúc của nó, lịch sử favicon và những kích thước bạn cần hiện nay.
Tác giả: Hemen Dönüştür Editör EkibiNgày đăng: 10 phút đọc
ICO là định dạng mà Windows dùng cho biểu tượng chương trình và thư mục, và web dùng cho biểu tượng trang nhỏ trên thẻ trình duyệt (favicon). Điều khiến nó khác các định dạng ảnh khác là một tệp duy nhất có thể chứa nhiều kích thước của cùng một biểu tượng. Bài viết này giải thích cấu trúc bên trong của tệp ICO, cách nó phát triển qua các phiên bản Windows, lịch sử của favicon, những kích thước bạn cần hiện nay và cách tạo tệp ICO cho đúng.
ICO là gì?
ICO (phần mở rộng .ico) là định dạng vỏ chứa do Microsoft định nghĩa cho tài nguyên biểu tượng. Một tệp ICO bắt đầu bằng một "thư mục biểu tượng" liệt kê mọi hình ảnh trong tệp (ví dụ 16x16, 32x32 và 48x48 điểm ảnh) thành các mục riêng. Sau đó Windows hoặc trình duyệt chọn kích thước phù hợp nhất với nơi biểu tượng được hiển thị.
Kiểu MIME chính thức được đăng ký với IANA là image/vnd.microsoft.icon, nhưng phần mềm của Microsoft và nhiều máy chủ vẫn dùng image/x-icon. Định dạng CUR cho con trỏ chuột gần như giống hệt; nó dùng giá trị 2 thay vì 1 ở trường loại của thư mục và lưu điểm nhấp (hotspot) của con trỏ.
Lịch sử: từ biểu tượng Windows đến favicon
- Windows 1.0: Biểu tượng chỉ có đơn sắc.
- Windows 3.0: Cấu trúc dựa trên thư mục chứa nhiều hình ảnh như ta biết ngày nay ra đời.
- Năm 1995: Bài viết "Icons" của John Hornick trên Microsoft mô tả chi tiết cấu trúc ICO và khuyên các nhà phát triển đưa vào ít nhất các ảnh 16x16 (16 màu), 32x32 (16 màu) và 48x48 (256 màu).
- Tháng 3 năm 1999: Internet Explorer 5 trở thành trình duyệt đầu tiên hỗ trợ favicon. Tệp
favicon.icoở thư mục gốc của trang được hiển thị trong mục yêu thích và thanh địa chỉ. - Windows XP: Kênh alpha 8 bit được thêm vào ảnh 32 bit, cho phép có cạnh mềm, bán trong suốt.
- Windows Vista: Bổ sung ảnh 256x256 và nén PNG bên trong ICO.
- Năm 2003: Kiểu MIME
image/vnd.microsoft.iconđược một bên thứ ba đệ trình lên IANA.
Cấu trúc của một tệp ICO
Thư mục biểu tượng (ICONDIR)
Tệp bắt đầu bằng một phần đầu 6 byte: một trường dự trữ (0), loại (1 cho biểu tượng, 2 cho con trỏ) và số lượng hình ảnh. Tiếp theo là một mục thư mục 16 byte cho mỗi hình ảnh.
Mục thư mục (ICONDIRENTRY)
| Trường | Ý nghĩa |
|---|---|
| bWidth, bHeight | Chiều rộng và chiều cao (mỗi trường 1 byte). Giá trị 0 nghĩa là 256 điểm ảnh. |
| bColorCount | Số màu trong bảng màu (0 với 8 bit trở lên) |
| wPlanes, wBitCount | Số mặt phẳng màu và số bit mỗi điểm ảnh |
| dwBytesInRes | Dung lượng dữ liệu ảnh tính bằng byte |
| dwImageOffset | Vị trí bắt đầu của dữ liệu ảnh trong tệp |
Vì các trường kích thước chỉ dài một byte, một hình ảnh bên trong ICO có kích thước tối đa 256x256 điểm ảnh.
Dữ liệu ảnh: BMP hoặc PNG
Trong ICO cổ điển, mỗi hình ảnh là một BMP không có phần đầu tệp (một DIB). Theo bài viết của Hornick, nó gồm một ảnh màu (mặt nạ XOR) theo sau là một mặt nạ trong suốt 1 bit (mặt nạ AND), đó là lý do chiều cao lưu trong phần đầu là chiều cao cộng của cả hai mặt nạ, gấp đôi chiều cao thực. Từ Windows XP trở đi, ảnh 32 bit mang kênh alpha trực tiếp trong dữ liệu điểm ảnh.
Từ Windows Vista, một mục cũng có thể là một tệp PNG hoàn chỉnh thay vì BMP. Nhúng PNG, nhất là cho kích thước 256x256, giúp tệp nhỏ hơn nhiều. MDN chỉ ra rằng PNG bên trong ICO không được hỗ trợ trước Vista và có thể gây rắc rối với phần mềm cũ, nhưng các trình duyệt và phiên bản Windows hiện nay đọc được cả hai loại.
Bạn cần những kích thước nào?
Biểu tượng ứng dụng Windows
Hướng dẫn hiện hành của Microsoft về biểu tượng ứng dụng cho biết một ứng dụng Win32 nên có ít nhất các kích thước 16x16, 24x24, 32x32, 48x48 và 256x256. Nếu Windows không tìm thấy kích thước khớp chính xác, nó sẽ thu nhỏ kích thước lớn hơn kế tiếp; khi có sẵn ảnh 256 điểm ảnh, biểu tượng chỉ bao giờ bị thu nhỏ, không bao giờ bị phóng to. Chẳng hạn, ở tỷ lệ 100%, thanh tiêu đề và menu ngữ cảnh dùng 16 điểm ảnh, thanh tác vụ dùng 24; ở tỷ lệ 200%, các con số đó thành 32 và 48.
Favicon cho website
Web hoạt động theo cách khác. Theo HTML Standard, nếu một trang không có liên kết rel="icon", trình duyệt có thể yêu cầu /favicon.ico từ thư mục gốc của trang. Vì vậy giữ một tệp favicon.ico ở thư mục gốc vẫn là cách làm tốt, nhưng chỉ riêng nó thì chưa đủ:
- Google Search yêu cầu favicon hình vuông (tỷ lệ 1:1) tối thiểu 8x8 điểm ảnh và khuyên dùng kích thước lớn hơn 48x48 để hiển thị đẹp trên nhiều bề mặt khác nhau.
- Màn hình chính của iPhone và iPad dùng
apple-touch-icon180x180. - Android và PWA cần biểu tượng 192 và 512 điểm ảnh trong web app manifest, cùng một phiên bản "maskable" cho biểu tượng thích ứng.
- Các trình duyệt hiện nay cũng hỗ trợ favicon SVG; một tệp vector bao trùm mọi kích thước.
Trên thực tế, đưa các kích thước 16, 32 và 48 điểm ảnh vào favicon.ico là đủ cho trình duyệt máy tính và các hệ thống cũ, còn các kích thước lớn hơn được cung cấp thành những tệp PNG riêng.
Mức hỗ trợ trên hệ điều hành, trình duyệt và phần mềm
Windows đọc và ghi ICO một cách tự nhiên; Explorer, lối tắt và màn hình nền đều làm việc với nó. Theo MDN, Chrome, Edge, Firefox, Opera và Safari hiển thị được tệp ICO. macOS dùng định dạng ICNS riêng cho biểu tượng ứng dụng, nhưng Preview vẫn mở được ICO. Các trình chỉnh sửa như GIMP mở tệp ICO thành một tệp nhiều lớp, mỗi kích thước một lớp. MDN khuyên không nên dùng ICO cho nội dung web nói chung và lưu ý rằng favicon đã chuyển dần sang PNG khai báo bằng phần tử <link>.
Ưu điểm và nhược điểm
| Ưu điểm | Nhược điểm |
|---|---|
| Nhiều kích thước và độ sâu màu trong một tệp | Tối đa 256x256 điểm ảnh |
| Được hỗ trợ ở mọi nơi trên Windows | Không có công dụng trên web ngoài favicon |
| Kênh alpha và nén PNG (từ Vista trở đi) | Các mục kiểu BMP cũ nặng và cồng kềnh |
| Trình duyệt tự động tìm favicon.ico ở thư mục gốc | Cần công cụ chuyên dụng; không phải chương trình nào cũng ghi được |
Các lỗi thường gặp và cách khắc phục
Đổi tên tệp PNG thành .ico chưa đủ sao?
Một số trình duyệt chấp nhận, nhưng đó không phải ICO thật: không có thư mục biểu tượng và Windows sẽ không nhận nó làm biểu tượng. Cách đúng là chuyển hình ảnh thành một tệp ICO thật. Các công cụ PNG sang ICO và JPG sang ICO của chúng tôi luôn ghi các ô vuông 16, 32 và 48 điểm ảnh, và thêm 64, 128 và 256 khi ảnh của bạn đủ lớn. Mỗi kích thước được nhúng dưới dạng PNG, nên độ trong suốt được giữ nguyên.
Favicon bị mờ hoặc khó nhận ra
Nét mảnh và chữ nhỏ biến mất ở 16 điểm ảnh. Hãy dùng một biểu tượng đậm nét, tương phản cao và đơn giản; nếu cần, chỉ lấy phần ký hiệu trong logo. Một ảnh nguồn vuông tối thiểu 256x256, tốt nhất là 512x512 điểm ảnh, cho kết quả đẹp nhất.
Ảnh không vuông trông bị bẹp hoặc kéo giãn
Biểu tượng có dạng hình vuông. Các công cụ của chúng tôi không bao giờ kéo giãn hình ảnh: chúng đặt ảnh vào giữa một ô vuông, giữ nguyên tỷ lệ và để trong suốt phần rìa. Để có hình vuông hoàn hảo, hãy cắt một vùng vuông trước bằng công cụ cắt ảnh.
Favicon mới không hiển thị
Trình duyệt lưu đệm favicon trong thời gian dài. Đổi tên tệp hoặc thêm tham số phiên bản (/favicon.ico?v=2), đồng thời kiểm tra máy chủ trả về đúng kiểu MIME, thường sẽ khắc phục được. Biểu tượng trong kết quả Google Search chỉ cập nhật sau khi trang được thu thập dữ liệu lại.
Windows vẫn hiển thị biểu tượng cũ
Windows giữ biểu tượng trong một bộ nhớ đệm riêng. Dựng lại ứng dụng và tạo lại lối tắt, hoặc đăng xuất rồi đăng nhập lại, thường là đủ.
Mẹo chuyển đổi
- Một tệp ICO không đủ cho website: Công cụ tạo favicon tạo cùng lúc favicon.ico (16, 32 và 48 điểm ảnh), favicon-48x48.png, apple-touch-icon.png (180 điểm ảnh), icon-192.png, icon-512.png, biểu tượng maskable icon-512-maskable.png và site.webmanifest, cùng icon.svg khi ảnh nguồn là SVG. Nó cũng đưa cho bạn đoạn mã để dán vào phần
<head>của trang. - Biểu tượng Apple cần nền đặc: iOS hiển thị vùng trong suốt thành màu đen và tự bo tròn các góc, nên công cụ tạo favicon tô apple-touch-icon bằng màu nền bạn chọn.
- Nếu logo của bạn là SVG: hãy vẽ ra một tệp PNG lớn bằng SVG sang PNG rồi chuyển tệp đó sang ICO, hoặc đưa thẳng SVG vào công cụ tạo favicon.
Các công cụ ICO và favicon của chúng tôi chạy ngay trong trình duyệt của bạn; hình ảnh không được tải lên, vẫn ở trên thiết bị của bạn và không bao giờ rời khỏi đó.
Câu hỏi thường gặp
Kích thước tối đa của một ảnh ICO là bao nhiêu?
Các trường chiều rộng và chiều cao trong một mục thư mục dài một byte mỗi trường, và 0 nghĩa là 256. Vì vậy một hình ảnh bên trong ICO có kích thước tối đa 256x256 điểm ảnh.
Nên dùng ICO hay PNG cho favicon?
Dùng cả hai. Một tệp favicon.ico ở thư mục gốc với các kích thước 16, 32 và 48 điểm ảnh phục vụ trình duyệt cũ và các yêu cầu tự động; hãy khai báo biểu tượng PNG (và tùy chọn SVG) bằng thẻ <link> cho trình duyệt hiện đại và thiết bị di động.
ICO có hỗ trợ độ trong suốt không?
Có. ICO cũ dùng mặt nạ 1 bit, ảnh 32 bit có kênh alpha đầy đủ từ Windows XP, và PNG nhúng mang độ trong suốt từ Vista.
Làm sao chuyển tệp ICO sang PNG?
Thêm tệp ICO vào công cụ chuyển đổi hình ảnh và chọn PNG làm định dạng đích. Nếu tệp chứa nhiều kích thước, kích thước lớn nhất sẽ được dùng.
Máy Mac có dùng tệp ICO không?
macOS dùng định dạng ICNS cho biểu tượng ứng dụng. Với website, favicon.ico và biểu tượng PNG hoạt động trong trình duyệt trên mọi hệ điều hành.
