Tạo favicon
Tạo mọi kích thước favicon từ một ảnh, kèm tệp .ico và các đoạn mã.
Mọi kích thước đều được tạo ngay trong trình duyệt từ đúng một lần giải mã ảnh của bạn. Không có gì được tải lên.
Favicon là cái biểu tượng nhỏ trên thẻ trình duyệt, và để đưa được nó lên một trang web thì cần nhiều tệp hơn cái tên gợi ra. Thẻ trình duyệt cần cỡ 16 và 32 điểm ảnh, Windows cần 48, màn hình chính iOS cần 180, còn web app manifest cần 192 và 512 để ứng dụng đã cài có biểu tượng đúng cỡ mà trình khởi chạy vẽ ra.
Tìm hiểu thêm về Tạo favicon
Công cụ này nhận một tấm ảnh và tạo ra trọn bộ đó, cộng thêm tệp `.ico` mà trình duyệt hỏi tới khi nó yêu cầu `/favicon.ico` mà không được chỉ dẫn gì khác, cùng hai đoạn mã để nối chúng vào: các thẻ `<link>` cho phần `<head>` và một tệp `site.webmanifest`.
Mỗi cỡ được thu nhỏ theo từng bước chia đôi chứ không nhảy một phát. Nghe như tiểu tiết nhưng đó là khác biệt giữa một biểu tượng 16 điểm ảnh đọc được và một vệt nhoè: đi thẳng từ 512 xuống 16 là bắt trình duyệt gộp một khối ba mươi nhân ba mươi điểm ảnh thành một, và không cách cài đặt nào làm việc đó cho ra hồn. Chia đôi liên tiếp nghĩa là mỗi bước chỉ gộp bốn điểm ảnh thành một, đúng cách các phần mềm biên tập ảnh vẫn làm, và nhìn ra đúng như vậy.
Mỗi cỡ được xem trước ở đúng kích thước thật, không phóng to cho dễ nhìn. Đó là chủ ý: một biểu tượng đọc rất tốt ở 512 điểm ảnh rất hay biến thành vệt nhoè ở 16, và một bản xem trước giấu chuyện đó đi thì còn tệ hơn là không có. Nếu cái dấu hiệu không đọc nổi trong các ô vuông nhỏ thì nó cần được đơn giản hoá trước khi lên trang, và đây chính là chỗ bạn phát hiện ra điều đó.
Tệp `.ico` được viết ngay tại đây chứ không lấy từ thư viện nào. Định dạng này chỉ là một phần đầu nhỏ bao quanh các ảnh PNG bên trong, được đặc tả đầy đủ và viết ra hết chừng sáu chục dòng — ít mã hơn cả thư viện sẽ mang tới, và bớt được một thứ phải đặt niềm tin.
- Sáu kích thước bao trọn thẻ trình duyệt, Windows, màn hình chính iOS và app manifest
- Một tệp .ico thật, gói các ảnh 16, 32 và 48 điểm ảnh
- Thu nhỏ theo từng bước chia đôi, nhờ vậy các cỡ nhỏ vẫn đọc được
- Mỗi cỡ xem trước ở đúng kích thước thật, không phóng to cho đẹp
- Sẵn các thẻ <link> và một tệp site.webmanifest có điền tên trang của bạn
- Giữ nền trong suốt, hoặc làm phẳng lên một màu bạn chọn
- Cảnh báo khi ảnh gốc quá nhỏ để các cỡ lớn còn sắc nét
Cách sử dụng
- 1Thả vào một tấm ảnh vuông, tốt nhất từ 512 điểm ảnh trở lên.
- 2Nhập tên trang của bạn để đoạn manifest được điền sẵn.
- 3Chọn giữ độ trong suốt hay làm phẳng lên một màu.
- 4Bấm Tạo, rồi kiểm tra xem các bản xem trước cỡ nhỏ còn đọc được không.
- 5Tải về những cỡ bạn cần và sao chép hai đoạn mã.
Câu hỏi thường gặp
Tôi có còn cần tệp .ico không?
Chỉ để dự phòng: trình duyệt hỏi `/favicon.ico` khi trang không khai báo biểu tượng nào, nên có một tệp ở đó là bao được trường hợp ấy. Mọi trình duyệt hiện nay đều ưu tiên các thẻ PNG khi chúng có mặt.
Ảnh gốc của tôi nên lớn bao nhiêu?
Ít nhất 512 điểm ảnh mỗi cạnh, để cỡ lớn nhất là thu nhỏ chứ không phải phóng to. Nhỏ hơn thế thì các cỡ lớn phải phóng ra và sẽ trông nhoè.
Vì sao logo của tôi ở cỡ 16 điểm ảnh nhìn như một vệt mờ?
Vì 16 điểm ảnh là tổng cộng 256 điểm ảnh, và chi tiết nhỏ không thể sống sót trong chừng ấy. Favicon cần một dấu hiệu đã đơn giản hoá — một chữ cái, một hình khối — chứ không phải bản thu nhỏ của cả cái logo.
Nền có nên để trong suốt không?
Thường là nên, với biểu tượng trên thẻ trình duyệt, để nó nằm trên bất kỳ màu nào trình duyệt đang dùng. iOS thì bỏ qua độ trong suốt của biểu tượng màn hình chính và ghép lên nền đen, nên hãy chọn một màu nếu biểu tượng sẽ nằm ở đó.
Những tệp này để ở đâu?
Ở thư mục gốc của trang, để các đường dẫn trong đoạn mã trỏ đúng chỗ. Sau đó dán các thẻ link vào phần `<head>` và lưu tệp manifest thành `site.webmanifest` cạnh chúng.