Trình tạo Favicon

Favicon là biểu tượng nhỏ nằm trong tab trình duyệt của bạn, hiển thị bên cạnh trang web của bạn trong dấu trang và lịch sử, đồng thời xuất hiện bên cạnh kết quả tìm kiếm. Nó nhỏ, nhưng lại là một trong những phần dễ nhìn thấy nhất của thương hiệu bạn. Mỗi khi ai đó mở một tab trên trang web của bạn, hình vuông nhỏ đó là thứ đầu tiên họ nhận ra, đó là lý do vì sao một favicon sắc nét và dễ nhận biết quan trọng hơn nhiều so với kích thước của nó. Để làm đúng, bạn chỉ cần một hình ảnh tốt và vài cú nhấp chuột với công cụ này.

Đây là điều mà hầu hết mọi người không ngờ tới: một favicon duy nhất hiếm khi là đủ. Trình duyệt trên máy tính để bàn yêu cầu favicon ở kích thước 16 và 32 pixel, thiết bị Android và ứng dụng web tiến bộ sử dụng 192 và 512, màn hình chính iOS muốn biểu tượng cảm ứng lớn, còn cửa hàng ứng dụng yêu cầu hình ảnh ở 1024 pixel. Tự tay chỉnh kích thước logo cho tất cả các mục tiêu này nghĩa là mở phần mềm thiết kế, điều chỉnh kích thước canvas và xuất từng tệp một. Trình tạo favicon này xử lý tất cả điều đó cho bạn trong vài giây, biến một hình ảnh tải lên thành tám biểu tượng PNG có kích thước phù hợp.

Khi bạn tải hình ảnh lên, trình tạo sẽ tạo ra các biểu tượng ở kích thước 16x16, 32x32, 48x48, 64x64, 128x128, 192x192, 512x512 và 1024x1024 pixel. Bộ đó bao phủ gần như mọi tình huống bạn sẽ gặp phải: biểu tượng tab nhỏ, các kích thước trung bình mà trình duyệt và hệ điều hành yêu cầu, các biểu tượng lớn được sử dụng bởi màn hình chính di động và tệp manifest của ứng dụng web, cùng với hình ảnh kích thước đầy đủ mà cửa hàng ứng dụng yêu cầu. Bạn xem lại từng kết quả trong lưới xem trước và chỉ tải xuống những kích thước bạn thực sự cần.

Cách dễ nhất để có kết quả tốt là bắt đầu với một hình ảnh vuông. Các biểu tượng luôn là hình vuông và công cụ sẽ co giãn nguồn của bạn để lấp đầy canvas vuông, vì vậy hình ảnh không vuông sẽ bị kéo giãn. PNG trong suốt ở kích thước 512x512 hoặc lớn hơn là lựa chọn lý tưởng. Nếu logo của bạn, chẳng hạn, rộng một nghìn pixel nhưng chỉ cao bốn trăm, hãy cắt nó thành hình vuông trước khi tải lên thay vì để trình tạo làm biến dạng nó.

Thu nhỏ một logo lớn xuống 16 pixel thực sự là một thử thách. Chữ biến mất, các đường mảnh hòa vào nhau và các chuyển màu tinh tế trở thành nhiễu. Trình tạo sử dụng tính năng làm mịn hình ảnh chất lượng cao của trình duyệt để giữ các cạnh sạch nhất có thể ở mọi kích thước, nhưng mọi công cụ đều có giới hạn khi thiết kế quá phức tạp. Các chi tiết đơn giản, đậm nét với độ tương phản mạnh sẽ sống sót qua hành trình xuống 16 pixel; còn tác phẩm phức tạp thì hiếm khi làm được.

Quyền riêng tư là một trong những lý do chính khiến mọi người ưa chuộng cách tiếp cận này. Toàn bộ quá trình chuyển đổi diễn ra bên trong trình duyệt của bạn bằng API canvas HTML5. Hình ảnh của bạn không bao giờ được tải lên, lưu trữ hoặc gửi đến bất kỳ đâu, điều này khiến công cụ trở nên phù hợp với các sản phẩm chưa phát hành, logo của khách hàng và bất cứ thứ gì bạn không muốn đặt trên máy chủ của bên thứ ba. Đóng tab khi bạn hoàn tất và mọi dấu vết tải lên của bạn đều biến mất.

Cũng đáng để nói rõ công cụ không làm gì. Nó xuất ra biểu tượng PNG, định dạng mà hầu như mọi nền tảng hiện đại đều chấp nhận. Nó không tạo tệp .ico, không đóng gói mọi thứ vào tệp zip, cũng không tạo tệp manifest cho ứng dụng web. Trong thực tế, điều đó hiếm khi là vấn đề: các trình duyệt hiện đại đã sử dụng favicon PNG trong nhiều năm và định dạng .ico chủ yếu là tàn dư cũ. Tải xuống các kích thước bạn muốn, sau đó thêm vài thẻ link vào trang của bạn.

Việc kết nối các biểu tượng vào một trang web rất đơn giản. Trong phần head của trang, bạn thêm một thẻ link trỏ đến favicon chính của mình, ví dụ PNG 32x32, cùng với một liên kết apple-touch-icon cho iOS và, nếu bạn chạy ứng dụng web tiến bộ, các mục 192x192 và 512x512 trong tệp manifest.json của bạn. Tải các tệp lên máy chủ của bạn, trỏ các thẻ vào chúng, và biểu tượng sẽ xuất hiện trong các tab, dấu trang và màn hình chính.

Hãy nghĩ về các tình huống thường ngày mà công cụ này xuất hiện. Một blogger muốn có biểu tượng trang web phù hợp cho WordPress và không muốn mở Photoshop. Một nhà phát triển đang phát hành ứng dụng web và cần favicon cùng biểu tượng PWA trong thư mục dự án. Một công ty khởi nghiệp đang chuẩn bị hồ sơ App Store và cần một biểu tượng 1024x1024 hình vuông cũng hoạt động như một trình khởi chạy nhỏ. Một sinh viên đang xây dựng một dự án lớp học và muốn nó trông hoàn chỉnh. Tất cả họ đều có thể dùng cùng một công cụ trong vòng chưa đầy một phút.

Ở đây, lựa chọn thiết kế quan trọng hơn công cụ. Giữ favicon gần với dạng đơn giản nhất của logo, sử dụng màu thương hiệu của bạn và tránh văn bản chỉ có ý nghĩa ở kích thước lớn. Nếu biểu tượng của bạn có nền trong suốt, hãy nhớ rằng các tab trình duyệt có cả chủ đề sáng và tối, vì vậy hãy kiểm tra nó trên cả hai. Nếu nó có nền đặc, nó sẽ trông nhất quán ở mọi nơi mà không cần nỗ lực thêm.

Một lưu ý thực tế nữa: các trình duyệt lưu vào bộ nhớ đệm favicon rất tích cực. Sau khi bạn cập nhật biểu tượng trang web, bạn có thể vẫn thấy biểu tượng cũ trong một thời gian. Làm mới cứng hoặc kiểm tra nhanh trong cửa sổ ẩn danh sẽ xác nhận biểu tượng mới đã hoạt động. Giữ tệp nhỏ cũng hữu ích, vì favicon được yêu cầu trên mỗi lần tải trang và thường là một trong những tệp đầu tiên được tải xuống.

Bạn không cần kinh nghiệm thiết kế hay bất kỳ phần mềm nào được cài đặt để sử dụng công cụ này. Nó chạy hoàn toàn trong trình duyệt của bạn, hoạt động trên Windows, macOS, Linux và thậm chí trên điện thoại, không cần tạo tài khoản và không phải trả bất cứ khoản phí nào. Tải lên bao nhiêu hình ảnh tùy thích, thường xuyên tùy ý và chỉ tải xuống những kích thước bạn cần. Đây là một trong những tiện ích nhỏ lặng lẽ giúp bạn thoát khỏi một công việc tẻ nhạt đến bất ngờ.