Công cụ tạo favicon miễn phí cho mọi nền tảng

Một công cụ tạo favicon giúp bạn bỏ qua phần việc tốn công khi xây dựng thương hiệu cho website: xuất cùng một logo ở sáu kích thước, đặt tên đúng cho từng tệp và viết các thẻ cho biết mọi nền tảng nên tìm chúng ở đâu. Favicon nhỏ nhưng xuất hiện ở rất nhiều nơi. Nó hiện trên tab trình duyệt, dấu trang và lịch sử, trên màn hình chính của điện thoại, và cạnh tên website trong kết quả Google, nơi Google yêu cầu một biểu tượng vuông tối thiểu 8x8 pixel và khuyến nghị kích thước lớn hơn 48x48 (Google Search Central, favicon trong kết quả tìm kiếm).

Bạn sử dụng công cụ tạo favicon như thế nào?

Kéo thả tệp PNG, JPG hoặc SVG vào công cụ, tốt nhất có kích thước 512x512 pixel trở lên. Công cụ vẽ hình ảnh của bạn lên một khung vẽ ở từng kích thước, với độ làm mượt cao, rồi hiển thị sáu kết quả cạnh nhau.

1. Chuẩn bị một nguồn vuông. Công cụ thay đổi kích thước hình ảnh của bạn về từng kích thước vuông mà không cắt xén, nên một logo hình chữ nhật sẽ bị méo. Hãy cắt thành hình vuông trước, chừa một chút khoảng trống quanh ký hiệu.
2. Kéo thả tệp hoặc nhấn để chọn tệp. Bản xem trước xuất hiện trong vài giây.
3. Tải gói về bằng nút “Tải tất cả (.zip)”, hoặc tải từng tệp PNG riêng lẻ.
4. Sao chép mã HTML vào <head> của mọi trang, thường là trong template chung của website.
5. Sao chép manifest, điền các trường name và short_name bằng tên thương hiệu của bạn, rồi lưu thành site.webmanifest ở thư mục gốc của website.
6. Tải các tệp lên thư mục gốc của tên miền, để /favicon-32x32.png và các đường dẫn khác trong mã có thể truy cập được.

Vì việc xử lý diễn ra trên trình duyệt của bạn, công cụ hoạt động tốt với logo chưa phát hành và các tệp của khách hàng mà bạn không được phép gửi lên máy chủ của bên thứ ba.

Bạn cần những kích thước favicon nào trong năm 2026?

Sáu tệp PNG bao phủ trình duyệt, iOS, Android và Windows. Bảng dưới đây liệt kê những gì công cụ tạo ra, nơi mỗi tệp được dùng và thẻ hoặc tệp nào tham chiếu đến nó.

Cặp 192 và 512 không phải ngẫu nhiên: với các trình duyệt Chromium, manifest của ứng dụng web phải cung cấp ít nhất một biểu tượng 192x192 và một biểu tượng 512x512, còn Chrome sẽ co giãn chúng cho những nơi khác cần đến (web.dev, thêm manifest cho ứng dụng web). Kích thước 180x180 khớp với biểu tượng iPhone độ phân giải cao trong mã mẫu của chính Apple cho web clip (Apple, cấu hình ứng dụng web). Tệp ô Windows là tệp cũ: nó không gây hại gì, và bạn có thể bỏ thẻ đó nếu không nhắm đến các bản cài đặt Windows cũ.

Mã HTML mà công cụ đưa ra là gì?

Sáu dòng cho <head>: hai liên kết rel="icon" cho các favicon PNG, biểu tượng touch của Apple, liên kết manifest, thẻ ô Windows và một thẻ meta theme-color. Khi một trang liệt kê nhiều biểu tượng, trình duyệt đọc các thuộc tính type và sizes để chọn biểu tượng phù hợp nhất, và chuyển sang tệp kế tiếp nếu một tệp bị lỗi (MDN, các loại liên kết).

Có hai thiết lập trong mã được tạo ra đáng chỉnh sửa. Màu của theme-color và màu của manifest mặc định là trắng (#ffffff): hãy thay bằng màu thương hiệu của bạn nếu muốn thanh trình duyệt và màn hình chờ của ứng dụng đã cài đặt khớp với website. Và manifest để trống name và short_name có chủ đích: web.dev giải thích rằng ít nhất một trong hai là bắt buộc, và short_name được dùng trên màn hình chính, nơi không gian bị giới hạn.

Favicon có giúp SEO không?

Không phải là yếu tố xếp hạng, nhưng nó ảnh hưởng đến cách kết quả của bạn trông như thế nào. Google có thể hiển thị favicon của bạn cạnh tên website ở đầu mỗi kết quả, nên một biểu tượng rõ ràng giúp người tìm kiếm nhận ra thương hiệu của bạn và có thể nâng tỷ lệ nhấp chuột so với các kết quả chỉ có hình quả địa cầu chung chung.

Google liệt kê các điều kiện để đủ điều kiện hiển thị, và một điều kiện bị thiếu thường là lý do khiến favicon không hiện:

• Một thẻ liên kết trên trang chủ. Google đọc rel="icon", shortcut icon, apple-touch-icon và apple-touch-icon-precomposed.
• Quyền thu thập dữ liệu. Googlebot phải truy cập được trang chủ và Googlebot-Image phải truy cập được tệp biểu tượng. Một quy tắc robots.txt chặn thư mục hình ảnh của bạn có thể làm ẩn favicon.
• Một tệp vuông tối thiểu 8x8 pixel, tốt nhất lớn hơn 48x48, ở định dạng được hỗ trợ: BMP, GIF, ICO, PNG, JPEG, PPM hoặc TIFF. Các tệp PNG được tạo ra đều đạt yêu cầu.
• Một favicon cho mỗi tên máy chủ. Một tên miền phụ có thể có biểu tượng riêng; một thư mục con như /blog thì không.
• Một URL ổn định mà bạn không thay đổi thường xuyên.

Sau mỗi thay đổi, Google cần thu thập lại trang chủ, việc này có thể mất từ vài ngày đến vài tuần theo chính tài liệu đó. Yêu cầu lập chỉ mục cho trang chủ trong Search Console sẽ giúp việc này nhanh hơn.

Làm thế nào để thiết kế favicon vẫn rõ ràng ở 16 pixel?

Hãy thiết kế cho kích thước nhỏ nhất trước. Ở 16x16, toàn bộ biểu tượng chỉ có 256 pixel, nên một logo đầy đủ kèm khẩu hiệu sẽ thành một vệt mờ. Những quy tắc sau giúp biểu tượng luôn dễ đọc:

• Dùng phần ký hiệu của logo, không dùng toàn bộ logo. Một biểu tượng hoặc một chữ cái đậm đơn giản vẫn giữ được khi thu nhỏ; một từ thì không.
• Lấp đầy hình vuông. Để một viền mỏng, nhưng tránh các khoảng trống lớn làm ký hiệu nhỏ đi trên tab.
• Chọn độ tương phản mạnh và hai hoặc ba màu phẳng. Các đường nét mảnh và màu chuyển sắc sẽ biến mất ở kích thước nhỏ.
• Kiểm tra cả giao diện sáng và tối. Một PNG trong suốt với ký hiệu tối sẽ biến mất trên thanh tab tối; một nền đặc hoặc viền sáng sẽ khắc phục điều này.
• Nghĩ đến mặt nạ cho Android. Android có thể cắt biểu tượng ứng dụng thành hình tròn. MDN khuyến nghị một biểu tượng maskable với phần quan trọng nằm trong vùng an toàn và nền đặc (MDN, định nghĩa biểu tượng ứng dụng). Nếu ký hiệu của bạn chạm đến mép, hãy xuất một phiên bản có đệm cho tệp 192 và 512.

Những lỗi favicon phổ biến nhất là gì?

Hầu hết favicon bị hỏng đến từ đường dẫn hoặc bộ nhớ đệm, chứ không phải từ chính hình ảnh.

• Tệp được tải lên sai thư mục. Mã được tạo ra trỏ đến thư mục gốc (/favicon-32x32.png). Nếu bạn đặt tệp vào /assets, hãy cập nhật mọi đường dẫn.
• Không có tệp tại /favicon.ico. Khi một trang không khai báo biểu tượng nào, tiêu chuẩn HTML cho phép trình duyệt yêu cầu /favicon.ico theo mặc định (WHATWG HTML standard, các loại liên kết). Các trang không có thẻ, như PDF hoặc trang lỗi, sẽ tạo ra lỗi 404 trong nhật ký của bạn. Công cụ chỉ tạo tệp PNG, vì vậy nếu bạn muốn có phương án dự phòng đó, hãy xuất PNG 32x32 thành tệp ICO bằng bất kỳ trình chỉnh sửa hình ảnh nào.
• Một biểu tượng cũ không chịu biến mất. Trình duyệt lưu bộ nhớ đệm favicon rất mạnh. Hãy đổi tên tệp hoặc thêm tham số phiên bản (?v=2) sau khi thiết kế lại.
• Thẻ chỉ có ở trang chủ. Trình duyệt đọc biểu tượng theo từng trang, nên hãy đặt mã trong template dùng chung.
• Logo bị méo. Hãy cắt nguồn thành hình vuông trước khi tạo, như đã mô tả ở trên.

Khi các tệp đã được đưa lên mạng, hãy chạy trình trích xuất favicon trên tên miền của bạn để xem những biểu tượng nào trình thu thập thực sự tìm thấy, rồi dùng kiểm tra SEO on-page để kiểm tra phần còn lại của các thẻ head.

Favicon phù hợp với thương hiệu của bạn trong các câu trả lời AI như thế nào?

Các trợ lý AI như ChatGPT và Perplexity thường hiển thị biểu tượng của mỗi website mà họ trích dẫn cạnh liên kết nguồn. Một favicon nhất quán giúp thương hiệu của bạn dễ nhận ra ở đó, nhưng nó chỉ là khung hình: việc được trích dẫn phụ thuộc vào nội dung và uy tín của bạn. Để xem website của bạn có xuất hiện trong các câu trả lời đó hay không, Theo dõi lượt nhắc đến AI đo lượt đề cập thương hiệu của bạn mỗi tháng, theo từng câu lệnh và từng mô hình, còn Bảng điều khiển GEO và SEO đặt chúng cạnh các lượt nhấp từ Google và thứ hạng của bạn.

Một bộ favicon đầy đủ chỉ cần một hình vuông và hai phút. Tạo biểu tượng của bạn ở trên, dán mã vào template, rồi xem các gói của Sorank để phát triển lượng truy cập sẽ nhìn thấy chúng, trên autopilot.