Tạo favicon cho website từ logo: đủ ICO, PNG, Apple, Android
Mục lục
Cách tạo favicon cho website bằng công cụ Tạo favicon & icon app của ColorME: tải logo hoặc gõ chữ cái, chỉnh bo góc, lề, nền, tải ZIP gồm favicon.ico, PNG 16 và 32 px, apple-touch-icon 180 px, icon Android 192 và 512 px, site.webmanifest và mã HTML. Kèm phần mở ZIP kiểm tra từng file và thử gắn vào một trang web thật.
Trả lời nhanh: để tạo favicon cho website, mở công cụ Tạo favicon & icon app của ColorME, bấm Tải logo lên (hoặc Hoặc tạo từ chữ cái nếu chưa có logo), chỉnh bo góc và lề, rồi bấm Tải ZIP. File ZIP có sẵn favicon.ico, PNG 16 và 32 px, icon 180 px cho iPhone, icon 192 và 512 px cho Android, file site.webmanifest và đoạn mã HTML để dán vào thẻ <head>. Theo trang công cụ, công cụ miễn phí, không cần đăng nhập và không gắn watermark; mọi phép thử trong bài làm khi chưa đăng nhập.
Xem nhanh: tải logo, chỉnh lề và bo góc, bản xem trước cập nhật ngay. Logo dùng trong bài là logo của ColorME. Ảnh chụp màn hình: ColorME.
Bài này dùng chính logo ColorME để đi hết quy trình, mở file ZIP ra xem bên trong có gì, rồi gắn thử bộ favicon vào một trang web thật chạy trên máy để xem trình duyệt lấy file nào.
Favicon là gì, và vì sao cần nhiều kích thước?
Favicon là biểu tượng nhỏ của website, hiện trên tab trình duyệt, dấu trang và màn hình chính điện thoại khi người dùng ghim trang. Mỗi nơi cần một cỡ khác nhau:
| File trong ZIP | Kích thước | Dùng ở đâu |
|---|---|---|
| favicon.ico | 16, 32, 48 px trong một file | Tab trình duyệt, trình duyệt cũ, phần mềm đọc thẳng /favicon.ico |
| favicon-16x16.png, favicon-32x32.png | 16 và 32 px | Tab trình duyệt hiện đại |
| apple-touch-icon.png | 180 px | Màn hình chính iPhone, iPad |
| android-chrome-192x192.png, android-chrome-512x512.png | 192 và 512 px | Android, ứng dụng web cài từ trình duyệt |
| site.webmanifest | file chữ | Khai báo tên, màu và hai icon Android |
| huong-dan.html | file chữ | Đoạn mã HTML để dán vào website |
Tài liệu gốc nếu bạn muốn đọc sâu: MDN về rel="icon", MDN về icons trong web manifest và tài liệu của Apple về apple-touch-icon.
Video quay màn hình (32 giây, không tiếng): tải logo, chỉnh lề và bo góc, thử nền trong suốt, chuyển sang tạo từ chữ cái "CM", quay lại logo, sao chép mã HTML và tải ZIP. Ảnh chụp màn hình: ColorME.
Cách tạo favicon từ logo, từng bước
Bước 1: chuẩn bị logo vuông từ 512 px
Trang công cụ ghi "PNG, SVG, JPG · nên dùng ảnh vuông từ 512px". Favicon rất nhỏ, nên hãy dùng phần biểu tượng của logo thay vì cả dòng chữ dài. Trong bài, chúng tôi dùng logo vuông của ColorME, file PNG 512 × 512 px.
Nếu logo của bạn còn dính nền trắng, tách nền trước bằng công cụ xoá nền (xem thêm bài tách nền logo thành PNG trong suốt). Nếu logo chỉ có bản ảnh mờ, bạn có thể thử chuyển sang vector để có bản nét hơn.
Bước 2: tải logo lên
Trang mở đầu: tải logo lên, thả ảnh vào, dán ảnh, hoặc tạo từ chữ cái. Ảnh chụp màn hình: ColorME.
Bấm Tải logo lên và chọn file. Công cụ hiện ngay biểu tượng 512 × 512 bên trái và phần Xem trước trên trình duyệt và điện thoại bên phải: một tab trình duyệt giả lập, icon iPhone, icon Android, cỡ 32 px và 16 px.
Thiết lập mặc định: nền màu #101828, lề trong 12%, bo góc 22%. Logo vuông có sẵn nền sẽ bị bọc thêm một viền tối. Ảnh chụp màn hình: ColorME.
Bước 3: chỉnh lề, bo góc và nền
Bấm Tuỳ chỉnh để mở bảng thiết lập (bảng này đóng sẵn khi mới tải logo):
- Bo góc: 0% đến 50%. 0% là vuông, 50% là tròn.
- Lề trong: 0% đến 30%. Khoảng trống giữa logo và mép icon.
- Nền: Màu (chọn ở ô Màu nền) hoặc Trong suốt.
Logo ColorME đã có nền đỏ kín, nên chúng tôi kéo Lề trong về 0% để logo phủ hết icon, giữ bo góc 22%.
Lề trong 0%, bo góc 22%: logo phủ kín icon. Ảnh chụp màn hình: ColorME.
Bốn file android-chrome-512x512.png thật, tải về với bốn thiết lập khác nhau (nền ca rô để thấy vùng trong suốt).
Hai điều rút ra từ phép thử:
- Logo có sẵn nền kín: đặt lề trong 0%, nếu không icon sẽ có thêm một viền màu nền bao quanh.
- Nền Trong suốt: thanh Bo góc không còn tác dụng. Công cụ chỉ bo góc phần nền màu, nên logo vuông nền kín sẽ ra icon vuông. Muốn bo góc, giữ chế độ nền Màu.
Bước 4: kiểm tra ở cỡ 16 px
Đây là bước nhiều người bỏ qua. Nhìn ô 16px và tab trình duyệt giả lập trong phần xem trước: nếu không còn nhận ra logo, hãy đơn giản hoá (chỉ giữ biểu tượng hoặc một chữ cái) hoặc tăng tương phản giữa logo và nền.
Phần xem trước của công cụ, phóng to: ở 16 px chữ "color" gần như biến mất, chỉ còn khối đỏ và chữ ME. Ảnh chụp màn hình: ColorME.
Bước 5: tải ZIP và sao chép mã HTML
Bấm Tải ZIP. Trong phép thử, file được tạo trong khoảng 0,3 giây và có tên theo tên logo: logo-colorme-favicon-colorme.zip, nặng 53 KB. Bấm Mã HTML để chép đoạn mã, trang báo "Đã sao chép mã HTML".
Thử nền trong suốt, chép mã HTML, tải ZIP. Ảnh chụp màn hình: ColorME.
File ZIP favicon gồm những gì?
Chúng tôi giải nén file vừa tải và kiểm tra từng file:
Các icon thật trong ZIP, hiển thị đúng kích thước (riêng bản 512 px thu còn 330 px cho vừa hình).
- favicon.ico (3,6 KB): một file chứa ba ảnh 16, 32 và 48 px.
- favicon-16x16.png và favicon-32x32.png: góc bo trong suốt.
- apple-touch-icon.png 180 × 180 px: luôn là hình vuông kín, không bo góc và không trong suốt, dù bạn chọn bo góc bao nhiêu. Điều này đúng ý: iPhone tự bo góc icon.
- android-chrome-192x192.png và android-chrome-512x512.png: theo đúng bo góc bạn chọn.
- site.webmanifest: khai báo hai icon Android, màu chủ đề (lấy theo Màu nền) và tên.
- huong-dan.html: đoạn mã HTML kèm một dòng hướng dẫn.
Nhớ sửa tên trong site.webmanifest. Công cụ lấy tên file logo làm tên ứng dụng. Trong phép thử, file ghi "name": "logo-colorme". Hãy mở file bằng trình soạn thảo bất kỳ và đổi name, short_name thành tên website của bạn.
Cách chèn favicon vào website
- Giải nén ZIP và chép tất cả các file vào thư mục gốc của website (cùng chỗ với trang chủ).
- Dán đoạn mã sau vào trong thẻ
<head>của trang:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Các đường dẫn bắt đầu bằng dấu /, tức là tính từ thư mục gốc. Nếu bạn để file trong thư mục con, sửa lại đường dẫn cho khớp, kể cả hai đường dẫn icon bên trong site.webmanifest.
Thử thật: Chrome lấy file nào?
Chúng tôi dựng một trang web trống trên máy, chép bộ file vào thư mục gốc, dán đúng đoạn mã trên rồi mở bằng Chrome trên Mac. Nhật ký máy chủ cho thấy khi mở trang, Chrome tự yêu cầu hai file:
GET / 200
GET /favicon-32x32.png 200
GET /site.webmanifest 200Tức là với tab trình duyệt, Chrome chọn bản PNG 32 px. Chúng tôi cũng tải thử cả sáu file ảnh từ trang đó: tất cả đều mở được với đúng kích thước 48, 32, 16, 180, 192 và 512 px, và site.webmanifest đọc được với hai icon 192 và 512. Phép thử này chỉ làm trên Chrome máy Mac; chúng tôi chưa ghim trang lên màn hình chính iPhone hay Android thật.
WordPress, Shopify thì sao?
Theo trang công cụ, bạn tải icon 512 px lên phần Site Icon của WordPress hoặc phần favicon của Shopify, các nền tảng này tự tạo các cỡ nhỏ hơn. Chúng tôi chưa thử trên hai nền tảng đó.
Chưa có logo: tạo favicon từ chữ cái
Bấm Hoặc tạo từ chữ cái ở trang mở đầu, hoặc chuyển sang Chữ cái trên thanh công cụ. Ô nhập nhận tối đa 3 ký tự, kể cả chữ có dấu tiếng Việt. Ở chế độ này có thêm ô Màu chữ.
Tạo favicon từ chữ: "CM" nền đỏ, rồi "Đ" nền vàng. Ảnh chụp màn hình: ColorME.
Bốn file 512 px thật từ chế độ Chữ cái. Chữ được canh giữa cả khi có dấu; càng nhiều ký tự, chữ càng nhỏ.
Gợi ý: một ký tự rõ hơn hẳn ba ký tự ở cỡ 16 px. File ZIP ở chế độ này có tên favicon-favicon-colorme.zip và nhẹ hơn, khoảng 26 đến 33 KB trong phép thử.
Điều gì xảy ra với ảnh không vuông?
Công cụ không cắt ảnh. Ảnh được thu nhỏ cho vừa trọn trong khung vuông, phần thừa là màu nền. Chúng tôi thử với một ảnh ngang 3200 × 2398 px:
Ảnh ngang nằm gọn trong khung, thừa hai dải nền trên dưới. Ảnh bình gốm: Brooke VL / Unsplash. Ảnh chụp màn hình: ColorME.
File thật từ ảnh ngang: dù đổi nền và giảm lề, ảnh vẫn không lấp đầy icon, và ở 32 px gần như không nhận ra. Ảnh gốc: Brooke VL / Unsplash.
Vì vậy hãy cắt ảnh về tỉ lệ 1:1 trước khi tải lên. Ảnh chụp chi tiết cũng không hợp làm favicon; biểu tượng phẳng, ít chi tiết mới đọc được ở cỡ nhỏ.
Tạo favicon trên điện thoại
Ở màn hình rộng 390 px (chế độ giả lập), công cụ xếp thành một cột: thanh công cụ, biểu tượng 512, rồi phần xem trước. Chúng tôi tải logo, kéo lề về 0% và tải ZIP; file nhận được có cùng dung lượng với bản làm trên máy tính. Chúng tôi chưa thử trên điện thoại thật, và việc giải nén ZIP rồi chép file lên máy chủ thường vẫn tiện hơn trên máy tính.
Màn hình 390 px: trước và sau khi chỉnh lề. Ảnh chụp màn hình: ColorME.
Những giới hạn nên biết
- Không có công cụ cắt hay dịch chuyển logo trong khung; logo luôn nằm chính giữa.
- Không xuất favicon dạng SVG và không có bản riêng cho chế độ tối.
- Ở chế độ Chữ cái không chọn được phông chữ.
- Tên trong site.webmanifest lấy theo tên file, cần sửa tay.
- Nền trong suốt thì không bo góc được, như đã nói ở trên.
Câu hỏi thường gặp
Logo của tôi có bị tải lên máy chủ không?
Trang công cụ trả lời: "Favicon được tạo ngay trên trình duyệt của bạn, không cần tải logo lên máy chủ để xử lý. Khi bạn tải về, ColorME nhận một bản favicon cỡ lớn nhất để theo dõi cách công cụ được dùng. Nếu bạn đã đăng nhập, file bạn tải về được lưu riêng vào mục Lịch sử của bạn và tự xoá sau 180 ngày."
Vì sao đã thay favicon mà trình duyệt vẫn hiện icon cũ?
Trình duyệt lưu favicon trong bộ nhớ đệm rất lâu. Trang công cụ gợi ý: xoá cache, mở tab ẩn danh, hoặc thêm ?v=2 vào đường dẫn favicon trong mã HTML để trình duyệt coi đó là file mới.
Favicon nên có nền trong suốt hay nền màu?
Trên tab trình duyệt, nền trong suốt hợp với cả giao diện sáng lẫn tối, miễn là logo đủ đậm. Riêng icon iPhone nên có nền màu: theo trang công cụ, iOS hiển thị vùng trong suốt thành màu đen. Trong file ZIP, apple-touch-icon.png luôn được xuất kín nền.
Chỉ cần mỗi file favicon.ico có được không?
Một file favicon.ico đặt ở thư mục gốc là đủ để tab trình duyệt có icon. Nhưng khi người dùng ghim trang lên màn hình chính điện thoại, icon 16 đến 48 px sẽ bị vỡ. Dùng cả bộ thì mỗi nơi có đúng cỡ của nó.
Ảnh PNG, JPG hay SVG làm logo nguồn thì tốt hơn?
Trang công cụ nhận PNG, SVG và JPG. PNG nền trong suốt hoặc SVG cho kết quả sạch nhất; JPG không có nền trong suốt nên luôn ra khối chữ nhật kín. Trong bài chúng tôi chỉ thử PNG và JPG, chưa thử SVG.
Thử nghiệm ngày 13/10/2026 trên Chrome máy Mac, chưa đăng nhập, cửa sổ 1280 × 880 px và giả lập màn hình 390 px, với logo ColorME (PNG 512 px), chế độ Chữ cái và một ảnh JPG của Brooke VL (Unsplash, đăng năm 2026). Bộ favicon được gắn thử vào một trang web chạy trên máy. Chưa thử: logo SVG, dán và kéo thả ảnh, điện thoại thật, màn hình chính iPhone và Android, Safari, Firefox, Windows, WordPress, Shopify. Thuật ngữ trong bài: favicon, logo, SVG.
