Tạo favicon
Biến ảnh bất kỳ thành favicon.ico cùng trọn bộ icon PNG và manifest
Về công cụ này
Thả vào một tấm ảnh — lý tưởng là logo vuông từ 512px trở lên — và nhận về trọn bộ favicon: một tệp favicon.ico gói sẵn 16, 32 và 48 px cho tab và dấu trang, các tệp PNG ở những kích thước chuẩn gồm cả icon Apple touch 180px và icon PWA 192/512px, một tệp site.webmanifest khởi đầu, cùng các thẻ <link> để dán vào <head>. Chỉ một lần tải ZIP là có đủ, tên tệp đặt đúng như thông lệ mong đợi.
Những chi tiết mà các bài hướng dẫn favicon hay làm sai đều đã được xử lý: tệp ICO nhúng các mục nén theo PNG (được hỗ trợ ở khắp nơi kể từ Windows Vista và nhỏ hơn nhiều so với icon BMP kiểu cũ); icon Apple touch được làm phẳng trên nền màu bạn chọn, vì iOS thay phần trong suốt bằng màu đen; còn icon PWA thì giữ nguyên kênh alpha. Ảnh nguồn không vuông sẽ được cắt theo tâm chứ không bị bóp méo.
Thu một logo xuống 16px vốn dĩ là thao tác hủy hoại — chi tiết nhỏ đơn giản là không sống nổi — nên hàng xem trước hiển thị từng kích thước đúng theo kích cỡ thật, để bạn đánh giá độ dễ đọc trước khi đưa lên. Mọi thứ được vẽ trên canvas cục bộ và các gói ICO/ZIP được ráp từng byte ngay trong trang; logo của bạn không hề được tải lên đâu cả.
Câu hỏi thường gặp
- Năm 2026 thì tôi thật sự cần những kích thước favicon nào?
- Ít hơn lời đồn: một tệp favicon.ico chứa 16/32/48 cho các trường hợp cũ và thanh địa chỉ, một tệp apple-touch-icon.png 180px, cùng hai tệp PNG 192/512px được khai báo trong web app manifest. Trình duyệt hiện đại chọn bản phù hợp nhất từ đúng bộ này — mấy gói 20 tệp mà một số công cụ tuôn ra chỉ là thói quen sao chép mù quáng.
- Vì sao logo của tôi không đọc nổi ở 16px?
- Mười sáu điểm ảnh là nhỏ đến tàn nhẫn — chữ trong logo, nét mảnh và các mảng chuyển sắc tinh tế đều tan hết. Những favicon mạnh rút thương hiệu về một ký tự hoặc một hình khối đậm, tương phản cao. Nếu bản xem trước 16px ở đây chỉ còn là một mảng nhòe, hãy cắt sát vào phần đặc trưng nhất của biểu tượng hoặc dùng một biến thể đơn giản hóa cho các cỡ nhỏ.
- Tôi còn cần tệp .ico không, hay favicon PNG là đủ?
- Mọi trình duyệt hiện đại đều chấp nhận favicon PNG, nhưng /favicon.ico vẫn là đường dẫn mà các tác nhân người dùng, trình thu thập dữ liệu và công cụ cũ cứ thế gọi tới. Đặt một tệp ICO thật ở đó chỉ tốn vài kilobyte mà dẹp được cả một lớp lỗi 404 lẫn những hành vi dự phòng kỳ quặc — hãy giữ nó song song với các thẻ link PNG.
- Vì sao icon Apple touch lại cần màu nền?
- iOS không kết xuất phần trong suốt cho icon trên màn hình chính — kênh alpha trong tệp PNG của bạn sẽ bị ghép lên nền đen. Làm phẳng sẵn lên một màu do bạn chọn giúp kết quả đúng ý đồ. Hãy chọn nền hợp với icon, và nhớ rằng iOS tự bo góc, nên bạn chỉ cần cấp một hình vuông tràn viền.