Bài viết

Tạo favicon từ một tệp PNG

Favicon là một hình nhỏ mà trình duyệt hiển thị ở tab, dấu trang và danh sách lịch sử. Làm đúng nó cần hơn là thay đổi kích thước một logo: định dạng .ico đóng gói nhiều độ phân giải vào một tệp, các trình duyệt hiện đại ưa PNG, thiết bị di động có apple-touch-icon riêng, và web app manifest cần bộ icon riêng. Bài viết này nói về từng phần và giải thích cách tạo cả bộ từ một tệp PNG nguồn duy nhất.

Tác giả: Bastien Sulyan · Ngày đăng: 29 tháng 6, 2026

Favicon là gì và trình duyệt dùng nó ở đâu

Từ favicon là dạng rút gọn của "favorite icon". Trình duyệt lần đầu hiển thị nó ở thanh địa chỉ trong Internet Explorer 5 (1999), rồi áp dụng nó cho dấu trang. Ngày nay nó xuất hiện ở tab trình duyệt, thanh dấu trang, lịch sử duyệt, trang tab-mới trên một số trình duyệt, và thanh tác vụ của hệ điều hành khi một trang được ghim. Trên di động, nếu người dùng thêm một trang vào màn hình chính, thiết bị dùng một hình liên quan nhưng riêng biệt gọi là apple-touch-icon thay vì favicon chuẩn. Các công cụ tìm kiếm đôi khi hiển thị favicon cạnh kết quả trong giao diện của họ. Hình này nhỏ theo thiết kế, điều khiến nó hiệu quả cho nhận diện thị giác nhanh nhưng cũng khó tạo cho tốt: ở 16x16 điểm ảnh, một logo nhiều chi tiết trở thành một vệt mờ. Bản thân tệp favicon đã trải qua vài định dạng qua các thập kỷ, với .ico vẫn là tương thích rộng nhất và PNG nay là mặc định hiện đại cho hầu hết trình duyệt.

Vùng chứa .ico: nhiều độ phân giải trong một tệp

Định dạng .ico là một vùng chứa, không phải một ảnh đơn. Một tệp .ico duy nhất có thể chứa nhiều ảnh bitmap ở các độ phân giải khác nhau, mỗi ảnh lưu thành một mục riêng trong một chỉ mục ở đầu tệp. Ba kích thước phổ biến nhất là 16x16, 32x32 và 48x48 điểm ảnh. Khi Windows hiển thị một favicon trong Explorer hoặc trên thanh tác vụ, nó chọn mục khớp ngữ cảnh hiển thị tốt nhất. Các phiên bản Windows cũ cần một mục 48x48 cho các ô thanh tác vụ mật độ cao. Trình duyệt yêu cầu favicon ở 16x16 cho các tab nhưng có thể dùng một mục lớn hơn nếu phát hiện màn hình mật độ cao. Đóng cả ba kích thước vào một tệp .ico nghĩa là một yêu cầu HTTP duy nhất bao trùm mọi trường hợp dùng. Phân phối chúng dưới dạng các PNG riêng cũng hợp lệ nhưng cần thêm thẻ link và thêm yêu cầu HTTP. Các ảnh bên trong một tệp .ico là dữ liệu BMP hoặc PNG chuẩn, nên vùng chứa chỉ thêm một phần đầu nhỏ cho mỗi mục.

Thiết kế cho kích thước nhỏ: đơn giản hóa biểu trưng

Ở 16x16 điểm ảnh bạn có tổng cộng 256 điểm ảnh. Một logo chữ điển hình với phần chữ hoặc chi tiết tinh tế trở nên không đọc được ở kích thước đó. Cách tiếp cận chuẩn là tạo một biểu trưng đơn giản hóa: một chữ cái đơn, một hình trừu tượng, hoặc một icon đại diện cho thương hiệu mà không dựa vào chi tiết. Vài vấn đề cụ thể cần lường trước: các nét mảnh biến mất hoàn toàn ở kích thước nhỏ, nhất là trên màn hình không phải retina. Các cặp chữ và chi tiết khoảng âm hòa vào nhau thành nhiễu xám. Các dải chuyển sắc gần như không còn thấy được. Tương phản cao giữa biểu trưng và nền của nó là yếu tố lớn nhất quyết định khả năng đọc. Một hình đặc trên một nền trơn gần như luôn đọc rõ hơn một minh họa nhiều chi tiết ở 16x16. Các kích thước 32x32 và 48x48 dễ tính hơn và có thể chịu thêm chút chi tiết, nhưng bản 16x16 nên được coi là ràng buộc quyết định. Nếu biểu trưng vẫn không đọc được ở 16x16, thiết kế cần được đơn giản hóa thêm.

Bộ hiện đại: .ico, icon PNG, apple-touch-icon, manifest và thẻ link HTML

Một thiết lập favicon đầy đủ cho một trang công khai hiện cần năm thứ. Thứ nhất, một favicon.ico ở gốc của trang (trình duyệt yêu cầu /favicon.ico trực tiếp không cần thẻ link như một phương án dự phòng). Thứ hai, một PNG 32x32 cho trình duyệt desktop hiện đại, khai báo bằng một thẻ link: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Thứ ba, một PNG 16x16 cho kích thước tab: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Thứ tư, một apple-touch-icon ở 180x180 điểm ảnh cho dấu trang màn hình chính iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Thứ năm, một web app manifest (site.webmanifest) với một PNG 192x192 và một 512x512 cho Android và các progressive web app. Độ trong suốt được hỗ trợ trong PNG và trong các mục mã hóa PNG bên trong .ico, dù apple-touch-icon nên có nền đục vì iOS bỏ qua kênh alpha và lấp các vùng trong suốt bằng màu đen.

Làm cục bộ: favicon-generator giữ ảnh của bạn trên thiết bị

Công cụ favicon-generator trên trang này nhận một PNG và tạo cả bộ: một favicon.ico đa độ phân giải đóng gói các mục 16x16, 32x32 và 48x48, các kích thước PNG riêng để dùng trực tiếp trong thẻ link, và apple-touch-icon 180x180. Tất cả diễn ra trong trình duyệt của bạn bằng Canvas API và một bộ mã hóa .ico viết bằng JavaScript. Ảnh nguồn của bạn không bao giờ được tải lên đâu cả; nó ở lại trên thiết bị của bạn. Điều này quan trọng khi tệp nguồn là logo công ty hay bất kỳ tài sản nào không nên rời khỏi máy của bạn trước khi bạn kiểm soát nơi nó đi tới. Mỗi tệp được tạo ra sẽ được cung cấp dưới dạng một lượt tải riêng, dùng tên tệp theo quy ước. Bạn sao chép chúng vào gốc của trang và thêm các thẻ link tương ứng vào phần head HTML. Nếu logo nguồn của bạn có chi tiết tinh tế không sống sót qua bản dựng 16x16, bạn có thể cắt hoặc đơn giản hóa nó trước khi thả vào bộ tạo, hoặc cung cấp một ảnh nguồn khác chuẩn bị riêng cho favicon.

Công cụ trong bài viết này

Câu hỏi thường gặp

Tôi có còn cần favicon.ico nếu đã khai báo các thẻ link PNG không?

Có, vì hai lý do. Thứ nhất, các trình duyệt không đọc HTML của bạn (trình thu thập web, trình đọc RSS, một số trình duyệt di động cũ) tìm /favicon.ico trực tiếp ở gốc của tên miền. Nếu tệp đó vắng mặt chúng tạo ra một yêu cầu 404 ở mỗi lần tải trang, làm nhiễu log máy chủ và thêm một vòng đi-về nhỏ không cần thiết. Thứ hai, các phiên bản Internet Explorer cũ chỉ nhận định dạng .ico và bỏ qua các thẻ link PNG. Cung cấp cả hai bao trùm mọi trường hợp.

Tôi có thể dùng một SVG làm favicon không?

Chrome và Firefox hỗ trợ favicon SVG qua `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari không hỗ trợ favicon SVG. Vì favicon SVG độc lập với độ phân giải nên chúng hiện sắc nét ở mọi mật độ màn hình, kể cả màn hình retina, mà không cần nhiều biến thể kích thước. Khuyến nghị thực tế là khai báo thẻ link SVG cho các trình duyệt hỗ trợ nó và vẫn kèm phương án dự phòng .ico để bao trùm đầy đủ. Favicon SVG cũng có thể chứa một media query `prefers-color-scheme` để tự chuyển giữa bản sáng và bản tối.

Tôi nên bắt đầu từ ảnh nào để có kết quả tốt nhất?

Một PNG vuông ở 512x512 trở lên với nền trong suốt cho sự linh hoạt cao nhất. Bắt đầu lớn rồi thu nhỏ giữ được nhiều chi tiết hơn là bắt đầu từ một ảnh nhỏ. Nếu logo chính của bạn có phần chữ, hãy cân nhắc chuẩn bị một bản đơn giản hóa riêng chỉ thể hiện icon hoặc biểu trưng, vì chữ sẽ không đọc được ở 16x16 bất kể độ phân giải nguồn. Tương phản cao giữa biểu trưng và nền của nó là yếu tố dự báo đáng tin cậy nhất cho việc các kích thước nhỏ có đọc rõ hay không.