Chuyển PNG sang ICO để có favicon sắc nét
Favicon là hình ảnh nhỏ tạo nên chữ ký hình ảnh của một website. Bạn thấy nó trong tab trình duyệt bên cạnh tiêu đề trang, trong danh sách bookmark, trong trình đơn thả xuống của thanh địa chỉ lịch sử duyệt web, và đôi khi bên cạnh kết quả tìm kiếm. Nó nhỏ, nhưng làm được nhiều việc: một favicon dễ nhận biết giúp người dùng tìm tab của bạn trong hàng chục tab khác và báo hiệu rằng một trang web đã hoàn thiện và được chăm sóc. Định dạng cổ điển cho biểu tượng nhỏ đó là ICO, và cách dễ nhất để tạo một cái là bắt đầu từ PNG vuông sạch và chuyển đổi nó.
Công cụ này nhận ảnh PNG và biến nó thành favicon ICO ngay trong trình duyệt của bạn. Quá trình chuyển đổi chạy cục bộ sử dụng thiết bị của chính bạn, vì vậy ảnh bạn chọn không bao giờ được tải lên máy chủ. Điều đó quan trọng khi biểu tượng của bạn là logo hoặc tài sản thương hiệu mà bạn không muốn giao cho bên thứ ba. Khi tệp đã sẵn sàng, bạn chỉ cần tải xuống.
Định dạng ICO là gì và tại sao nó chứa nhiều kích thước
ICO là định dạng container biểu tượng có nguồn gốc từ Microsoft Windows, nơi nó lưu các biểu tượng dùng cho chương trình, shortcut và thư mục. Đặc điểm xác định của nó, và lý do nó trở thành tiêu chuẩn cho favicon web, là một tệp ICO duy nhất có thể chứa cùng ảnh ở nhiều độ phân giải cùng một lúc. Thay vì một bitmap cố định duy nhất, tệp đóng gói một tập hợp nhỏ ảnh vuông và để trình duyệt hoặc hệ điều hành chọn kích thước nào phù hợp với nơi nó cần vẽ biểu tượng.
Điều đó thực sự hữu ích. Tab trình duyệt cần biểu tượng nhỏ, thanh bookmark có thể dùng cái hơi lớn hơn, và shortcut ghim trên desktop có thể yêu cầu thứ gì đó lớn hơn nữa. Với ICO đa kích thước, mỗi ngữ cảnh lấy phiên bản phù hợp với nó, vì vậy biểu tượng của bạn vẫn sắc nét thay vì bị phóng to từ một bitmap nhỏ duy nhất và trở nên mờ. ICO cũng bảo toàn độ trong suốt, giữ cho các góc của logo tròn hoặc không đều sạch sẽ trên bất kỳ màu tab nào.
Kích thước favicon được khuyến nghị
Đối với favicon website, ba kích thước đáng đưa vào là 16x16, 32x32 và 48x48 pixel. Phiên bản 16 pixel là cái hầu hết trình duyệt hiển thị trong tab và thanh địa chỉ. Phiên bản 32 pixel được dùng trên màn hình độ phân giải cao hơn và trong một số chế độ xem bookmark và lịch sử, vì vậy nó giữ mọi thứ sắc nét trên màn hình hiện đại. Phiên bản 48 pixel bao gồm các ngữ cảnh lớn hơn như shortcut trang web Windows. Vì tất cả đều nằm trong một tệp ICO, bạn gửi một tài nguyên duy nhất và để mỗi bề mặt chọn những gì nó cần.
Bắt đầu từ PNG vuông để không có gì bị kéo giãn. Nếu ảnh nguồn của bạn hình chữ nhật hoặc quá lớn, hãy cắt hoặc thu nhỏ thành hình vuông sạch trước bằng công cụ thay đổi kích thước ảnh của chúng tôi, sau đó chạy chuyển đổi. Thiết kế đơn giản, tương phản cao đọc tốt hơn nhiều ở 16 pixel so với hình minh họa chi tiết, vì vậy hãy ưu tiên các hình dạng đậm hơn văn bản mịn.
Cách thêm favicon vào trang web của bạn
Khi bạn đã có tệp ICO, hãy tải nó lên website, theo truyền thống vào thư mục gốc của trang như favicon.ico. Nhiều trình duyệt sẽ tìm thấy nó ở đó tự động, nhưng thực hành tốt nhất là khai báo nó một cách rõ ràng trong phần head của HTML để không có gì phỏng đoán. Thêm thẻ link như thế này:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Đặt dòng đó bên trong phần <head> của các trang. Thuộc tính rel="icon" nói với trình duyệt đây là biểu tượng trang, và href trỏ đến nơi bạn lưu tệp. Nếu bạn dùng đường dẫn tương đối root như ở trên, cùng khai báo đó hoạt động trên mọi trang của trang web. Sau khi triển khai, bạn có thể cần hard refresh hoặc xóa cache trước khi biểu tượng mới xuất hiện, vì trình duyệt giữ favicon rất tích cực.
Chuyển đổi riêng tư trong trình duyệt của bạn
Mọi thứ xảy ra trên thiết bị của bạn. PNG bạn chọn được đọc, giải mã và mã hóa lại thành ICO cục bộ, và không có gì rời khỏi máy của bạn trong quá trình này. Không có tài khoản, không có hàng chờ và không có lưu trữ phía máy chủ, điều này làm cho nó thuận tiện ngay cả cho logo chưa phát hành hoặc công việc khách hàng theo thỏa thuận bảo mật. Để biết thêm cách chuẩn bị và dọn dẹp đồ họa, hãy xem toàn bộ bộ công cụ ảnh của chúng tôi.
Câu hỏi thường gặp
Ảnh của tôi có được tải lên bất cứ đâu không?
Không. PNG được chuyển đổi sang ICO hoàn toàn trong trình duyệt của bạn trên thiết bị của chính bạn. Không có gì được gửi đến máy chủ và không có gì được lưu trữ, vì vậy ảnh của bạn vẫn riêng tư.
Favicon của tôi nên bao gồm những kích thước nào?
Các kích thước hữu ích nhất là 16x16, 32x32 và 48x48 pixel. Ảnh 16 pixel được hiển thị trong tab trình duyệt, trong khi các kích thước lớn hơn giữ biểu tượng sắc nét trên màn hình độ phân giải cao và shortcut desktop.
Tại sao dùng ICO thay vì chỉ PNG?
ICO là định dạng favicon lâu đời và nó có thể lưu nhiều kích thước trong một tệp. Trình duyệt và hệ điều hành chọn độ phân giải phù hợp với mỗi ngữ cảnh, vì vậy biểu tượng vẫn sắc nét thay vì bị thu phóng từ một bitmap duy nhất.
ICO có giữ độ trong suốt từ PNG của tôi không?
Có. Định dạng ICO hỗ trợ độ trong suốt, vì vậy các vùng trong suốt trong PNG của bạn được bảo toàn và biểu tượng hòa hợp sạch sẽ với bất kỳ màu tab hoặc nền nào.
Làm thế nào để thêm favicon vào website của tôi?
Tải tệp ICO lên trang web, thường là favicon.ico trong thư mục gốc, và thêm thẻ link trong phần head của HTML như link rel icon type image x-icon href slash favicon.ico. Sau đó xóa cache trình duyệt để thấy nó.
Ảnh nguồn của tôi không vuông. Tôi nên làm gì?
Hãy cắt hoặc thu nhỏ thành hình vuông trước để nó không bị kéo giãn. Bạn có thể dùng công cụ thay đổi kích thước ảnh của chúng tôi để tạo hình vuông sạch, sau đó chuyển cái đó sang ICO để có favicon đẹp nhất.