Tạo favicon cho website: tám kích thước chuẩn, cách chọn hình và cách gắn vào trang
Công cụ dựng bộ biểu tượng website từ một hai ký tự chữ hoặc từ ảnh bạn tải lên, xuất đủ tám kích thước từ 16 tới 512 pixel dưới dạng PNG. Bạn tải riêng từng cỡ hoặc tải cả gói nén kèm tệp hướng dẫn có sẵn đoạn mã thẻ liên kết và khai báo cho ứng dụng web.
Tính năng nổi bật
- Hai chế độ tạo: từ một tới hai ký tự chữ, hoặc từ ảnh tải lên
- Chế độ chữ cho chọn màu nền và màu chữ, nền bo góc sẵn theo tỷ lệ mười lăm phần trăm cạnh
- Chế độ ảnh nhận tệp ảnh tới năm megabyte, có hai kiểu lấp khung là phủ kín và vừa khung
- Xem trước trực tiếp ở ba cỡ 32, 64 và 128 pixel ngay khi bạn đổi màu hoặc đổi chữ
- Xuất tám kích thước 16, 32, 48, 64, 128, 180, 192 và 512 pixel
- Tải riêng từng cỡ, tên tệp ghi rõ kích thước để khỏi nhầm khi gắn vào trang
- Nút tải tất cả gói toàn bộ tám tệp vào một tệp nén kèm tệp hướng dẫn dán mã
- Vẽ bằng canvas ngay trên trình duyệt, ảnh bạn tải lên không rời khỏi máy
Biểu tượng nhỏ nhất trên trang lại là thứ xuất hiện nhiều nhất
Biểu tượng website hiện ở tab trình duyệt, ở danh sách dấu trang, ở lịch sử duyệt web, ở màn hình chính khi người dùng lưu trang về điện thoại, và trên kết quả tìm kiếm khi xem bằng điện thoại. Một website không có nó sẽ hiện hình tờ giấy trắng hoặc hình quả địa cầu mặc định, và trong một hàng mười lăm tab đang mở thì đó là tab người dùng khó tìm lại nhất. Đây cũng là chi tiết mà khách hàng để ý ngay khi nghiệm thu website, dù không ai nói ra. Việc tự làm bộ biểu tượng thường vướng ở khâu xuất đủ kích thước: mỗi nền tảng đòi một cỡ, thiếu cỡ nào thì hệ điều hành tự phóng to cỡ khác lên và ảnh bị nhòe. Công cụ này gom đúng phần việc đó, cho bạn tám cỡ hay dùng nhất trong một lần bấm, và tệp hướng dẫn kèm theo có sẵn đoạn mã để dán vào phần đầu trang.
Lợi ích khi sử dụng
- Có đủ tám cỡ chuẩn trong một lần bấm, không phải xuất tay từng cỡ
- Xem trước ở cỡ nhỏ ngay lúc chỉnh nên phát hiện sớm hình bị rối
- Tệp hướng dẫn kèm sẵn đoạn mã thẻ liên kết và khai báo cho ứng dụng web
- Ảnh logo xử lý ngay trên trình duyệt nên không phải tải lên máy chủ lạ
- Không cần mở phần mềm đồ họa chỉ để thu nhỏ một hình vuông
Cách tạo bộ biểu tượng website
- 1Chọn thẻ Từ Text nếu muốn dựng biểu tượng chữ, hoặc thẻ Từ Ảnh nếu đã có sẵn logo dạng ảnh.
- 2Với chế độ chữ, gõ một hoặc hai ký tự rồi chọn màu nền và màu chữ sao cho tương phản rõ.
- 3Với chế độ ảnh, tải lên tệp ảnh dưới năm megabyte và chọn kiểu lấp khung phủ kín hoặc vừa khung.
- 4Nhìn ba khung xem trước ở cỡ 32, 64 và 128 pixel, chú ý kỹ khung nhỏ nhất vì đó là cỡ khó đọc nhất.
- 5Bấm tải tất cả để lấy tệp nén chứa tám cỡ và tệp hướng dẫn, rồi làm theo phần dán mã trong hướng dẫn đó.
Tám kích thước dùng ở đâu
Cỡ 16 pixel là cỡ hiển thị trên tab trình duyệt ở màn hình thường, còn 32 pixel là bản dùng cho màn hình mật độ điểm ảnh cao và cho thanh địa chỉ. Cỡ 48 pixel đáng chú ý nhất với người làm web tại Việt Nam vì công cụ tìm kiếm yêu cầu biểu tượng là hình vuông có cạnh là bội số của 48 pixel để hiển thị bên cạnh kết quả tìm kiếm trên điện thoại, thiếu cỡ này thì biểu tượng có thể không được lấy. Cỡ 64 pixel dùng cho lối tắt trên màn hình nền và một số ngữ cảnh của hệ điều hành. Cỡ 128 pixel là cỡ trung gian cho cửa hàng tiện ích mở rộng và một vài trình duyệt. Cỡ 180 pixel là biểu tượng khi người dùng thêm trang vào màn hình chính trên thiết bị của Apple, khai báo bằng thẻ liên kết riêng. Hai cỡ 192 và 512 pixel dành cho tệp khai báo ứng dụng web, trong đó 192 là biểu tượng trên màn hình chính Android còn 512 dùng cho màn hình chờ khi mở ứng dụng. Nếu chỉ chọn ba cỡ để gắn, hãy lấy 32, 180 và 512.
Công cụ xuất PNG chứ không xuất tệp ico, điều đó có sao không
Toàn bộ tám tệp đều là ảnh PNG, không có tệp định dạng ico nào. Với các trình duyệt đang dùng phổ biến hiện nay thì hoàn toàn ổn, vì chúng đều đọc được biểu tượng PNG khai báo qua thẻ liên kết có thuộc tính kiểu ảnh png. Định dạng ico chỉ còn cần trong hai trường hợp. Thứ nhất là khi bạn muốn có tệp đặt ở gốc tên miền với đúng tên favicon.ico, vì đó là đường dẫn mà trình duyệt và một số bộ thu thập dữ liệu tự dò tìm ngay cả khi trang không khai báo thẻ nào; nhiều máy chủ và mã nguồn mở vẫn trông đợi tệp này tồn tại, và thiếu nó thì nhật ký máy chủ đầy lỗi không tìm thấy trang. Thứ hai là khi bạn còn phải hỗ trợ trình duyệt rất cũ. Cách xử lý gọn nhất là dùng bộ tệp PNG ở đây cho các thẻ liên kết, rồi chuyển riêng cỡ 32 pixel sang định dạng ico bằng một công cụ chuyển đổi và đặt ở gốc tên miền. Một lựa chọn hiện đại khác mà công cụ này không tạo là biểu tượng dạng vector, vốn sắc nét ở mọi kích thước.
Thiết kế cho khung 16 pixel, không phải cho khung 512 pixel
Sai lầm hay gặp nhất là chọn hình dựa trên khung xem trước lớn. Ở cỡ 16 pixel, cả biểu tượng chỉ có 256 điểm ảnh, tức chưa bằng một chữ cái trong bài viết này, nên mọi chi tiết nhỏ đều biến thành một vệt xám. Ba quy tắc thực tế như sau. Một là chỉ giữ một hình khối duy nhất: một chữ cái, một biểu tượng đơn giản, hoặc phần biểu tượng tách khỏi logo đầy đủ; đừng bao giờ thu nhỏ nguyên logo có tên công ty vì chữ sẽ thành vệt mờ. Hai là tương phản phải mạnh giữa hình và nền, nên thử luôn cả trên nền tối lẫn nền sáng vì tab trình duyệt có hai chế độ màu. Ba là tránh nét mảnh và đường viền một điểm ảnh, chúng biến mất khi thu nhỏ. Với chế độ chữ ở công cụ này, một ký tự luôn đọc tốt hơn hai ký tự, vì chữ được vẽ ở kích thước bằng sáu mươi phần trăm cạnh khung nên hai ký tự sẽ chật và tràn sát mép ở cỡ nhỏ. Hãy nhìn kỹ khung xem trước 32 pixel trước khi tải về.
Phủ kín, vừa khung và chuyện nền trong suốt bị thay bằng nền trắng
Ở chế độ ảnh, kiểu phủ kín phóng ảnh lên cho tới khi lấp kín ô vuông rồi cắt phần thừa ở hai bên hoặc trên dưới, hợp với ảnh chụp và ảnh nền có họa tiết. Kiểu vừa khung thu ảnh lại cho lọt trọn trong ô vuông và chừa khoảng trống ở hai phía, hợp với logo có hình dạng ngang hoặc dọc mà bạn không muốn mất phần nào. Cả hai kiểu đều giữ nguyên tỷ lệ nên ảnh không bị bóp méo. Có một điểm quan trọng cần biết trước: ô vuông luôn được tô nền trắng trước khi vẽ ảnh lên, nên logo dạng PNG nền trong suốt sẽ ra thành logo trên nền trắng. Với logo màu sẫm thì trông vẫn ổn, nhưng logo màu trắng hoặc màu rất nhạt sẽ gần như biến mất. Trong trường hợp đó, hãy ghép sẵn logo lên một nền màu đậm trong phần mềm đồ họa rồi mới tải lên đây. Riêng chế độ chữ thì nền được bo góc theo tỷ lệ mười lăm phần trăm cạnh, tạo hình vuông góc lượn giống biểu tượng ứng dụng trên điện thoại.
Gắn vào website và vì sao biểu tượng cũ vẫn còn đó
Chép cả tám tệp vào thư mục gốc của website, rồi thêm vào phần đầu trang các thẻ liên kết theo mẫu trong tệp hướng dẫn: một thẻ cho cỡ 32, một thẻ cho cỡ 16, và một thẻ dành riêng cho thiết bị của Apple trỏ tới cỡ 180. Với ứng dụng web cài được, khai báo hai cỡ 192 và 512 trong tệp mô tả ứng dụng cùng phần tên và màu nền. Sau khi tải lên, đừng ngạc nhiên nếu biểu tượng cũ vẫn hiện: trình duyệt lưu biểu tượng vào bộ nhớ đệm rất lâu và không đọc lại theo mỗi lần vào trang. Cách kiểm tra đúng là mở thẳng đường dẫn tệp biểu tượng trên trình duyệt để xác nhận tệp đã lên máy chủ, sau đó tải lại trang kèm xóa bộ nhớ đệm, hoặc mở một cửa sổ ẩn danh. Với công cụ tìm kiếm thì còn chậm hơn nữa, biểu tượng chỉ được cập nhật ở lần thu thập dữ liệu tiếp theo nên có thể mất vài ngày tới vài tuần. Một mẹo thực dụng là thêm tham số phiên bản vào cuối đường dẫn tệp mỗi lần đổi biểu tượng.
Câu hỏi thường gặp (FAQ)
Vì sao bộ tệp không có favicon.ico?
Công cụ vẽ bằng canvas nên chỉ xuất được PNG. Trình duyệt hiện nay đọc PNG bình thường qua thẻ liên kết. Nếu bạn vẫn muốn có tệp ở gốc tên miền để trình duyệt tự dò, hãy chuyển riêng bản 32 pixel sang định dạng ico bằng một công cụ chuyển đổi rồi đặt tên đúng là favicon.ico.
Kích thước nào là bắt buộc phải có?
Nếu chỉ chọn ba cỡ, hãy lấy 32 pixel cho tab trình duyệt, 180 pixel cho thiết bị của Apple và 512 pixel cho tệp mô tả ứng dụng web. Nên giữ thêm cỡ 48 pixel vì công cụ tìm kiếm yêu cầu biểu tượng có cạnh là bội số của 48 khi hiển thị bên cạnh kết quả trên điện thoại.
Logo nền trong suốt tải lên xong bị nền trắng, sửa thế nào?
Ô vuông luôn được tô trắng trước khi vẽ ảnh lên nên phần trong suốt thành trắng. Với logo màu sẫm thì vẫn ổn, còn logo trắng sẽ biến mất. Hãy ghép logo lên một nền màu đậm trong phần mềm đồ họa rồi tải bản đã ghép nền lên đây.
Nên chọn phủ kín hay vừa khung?
Phủ kín phóng ảnh cho lấp trọn ô vuông rồi cắt phần thừa, hợp với ảnh chụp và ảnh có họa tiết nền. Vừa khung thu nhỏ ảnh cho lọt trọn và chừa lề, hợp với logo hình ngang hoặc dọc mà bạn không muốn mất chi tiết nào. Cả hai đều giữ nguyên tỷ lệ nên không méo hình.
Nhập được mấy ký tự ở chế độ chữ?
Tối đa hai ký tự, và thực tế một ký tự cho kết quả tốt hơn nhiều. Chữ được vẽ ở kích thước bằng sáu mươi phần trăm cạnh khung, nên hai ký tự sẽ chật và chạm sát mép ở cỡ 16 pixel. Nếu tên thương hiệu có hai từ, hãy lấy chữ cái đầu của từ mạnh nhất.
Tôi đã tải tệp lên máy chủ mà tab vẫn hiện biểu tượng cũ?
Trình duyệt lưu biểu tượng vào bộ nhớ đệm rất lâu. Hãy mở thẳng đường dẫn tệp để xác nhận nó đã lên máy chủ, rồi tải lại trang kèm xóa bộ nhớ đệm hoặc mở cửa sổ ẩn danh. Thêm một tham số phiên bản vào cuối đường dẫn trong thẻ liên kết cũng buộc trình duyệt lấy bản mới.
Vì sao biểu tượng chưa hiện bên cạnh kết quả tìm kiếm?
Công cụ tìm kiếm chỉ cập nhật ở lần thu thập dữ liệu tiếp theo nên có thể mất vài ngày tới vài tuần. Ngoài ra hãy kiểm tra ba điều kiện: biểu tượng là hình vuông cạnh bội số của 48 pixel, tệp không bị chặn trong robots.txt, và thẻ liên kết nằm trong phần đầu của trang chủ.
Ảnh tôi tải lên có bị gửi lên máy chủ nào không?
Không. Tệp được đọc bằng bộ đọc tệp của trình duyệt, vẽ lại bằng canvas và đóng gói thành tệp nén ngay trên máy bạn. Không có lời gọi mạng nào mang theo nội dung ảnh, nên bạn dùng được với logo chưa công bố.
Giới hạn dung lượng ảnh tải lên là bao nhiêu?
Tối đa năm megabyte và tệp phải đúng loại ảnh, nếu vượt quá sẽ có thông báo lỗi. Thực tế bạn không cần ảnh lớn tới vậy: kích thước đầu ra lớn nhất chỉ là 512 pixel, nên một ảnh vuông cạnh khoảng 1000 pixel là quá đủ và xử lý nhanh hơn nhiều.
Chữ trong biểu tượng hiện khác nhau giữa máy tôi và máy đồng nghiệp?
Vì chế độ chữ dùng phông chữ hệ thống, mà mỗi hệ điều hành lại có phông mặc định khác nhau nên dáng chữ lệch đôi chút. Điểm cần nhớ là bản tải về được vẽ cố định thành ảnh, nên tệp đã tải xuống sẽ hiển thị giống nhau ở mọi nơi, chỉ có bản xem trước phụ thuộc máy đang dùng.
Trong tệp nén có những gì?
Tám tệp PNG đặt tên theo kích thước, cộng một tệp hướng dẫn dạng văn bản. Tệp hướng dẫn liệt kê từng cỡ dùng ở đâu, kèm sẵn đoạn mã thẻ liên kết để dán vào phần đầu trang và mẫu khai báo biểu tượng cho tệp mô tả ứng dụng web.
Có tạo được biểu tượng dạng vector không?
Không. Công cụ vẽ trên canvas nên đầu ra luôn là ảnh điểm. Biểu tượng dạng vector là lựa chọn hiện đại rất tốt vì sắc nét ở mọi kích thước và đổi màu theo chế độ sáng tối, nhưng bạn phải tạo bằng phần mềm đồ họa vector rồi khai báo thêm một thẻ liên kết riêng.
Từ khóa liên quan
- tạo favicon online
- favicon generator miễn phí
- kích thước favicon chuẩn
- favicon 16x16 32x32
- apple touch icon 180x180
- icon 192x192 512x512 cho pwa
- favicon cho kết quả tìm kiếm google
- favicon.ico đặt ở đâu
- tạo favicon từ logo
- tạo favicon từ chữ cái
- favicon không hiện trên tab
- xóa cache favicon
- thẻ link rel icon
- file manifest json cho website
- favicon nền trong suốt
- favicon cho wordpress
- biểu tượng website là gì
- tạo icon website online
- favicon svg
- bộ favicon đầy đủ kích thước
