Favicon Webflow: Cách thêm Favicon và Webclip

Cách thêm favicon và webclip trong Webflow: vị trí cài đặt Icons, các kích thước được tạo, cách xuất bản và xử lý khi favicon không cập nhật.

Câu hỏi thường gặp

Favicon Webflow nên có kích thước bao nhiêu?

Trung tâm trợ giúp của Webflow nêu favicon 32x32 và webclip 256x256. Với quy trình hiện tại, bạn chỉ cần tải lên một ảnh vuông và Webflow sẽ tự tạo các kích thước còn lại. Vì vậy hãy bắt đầu từ một tệp vuông tối thiểu 256x256 pixel và vẫn dễ nhìn khi thu nhỏ.

Tôi tải favicon lên ở đâu trong Webflow?

Mở Site settings (Cài đặt trang web), vào General (Chung) và tìm mục Icons. Tải ảnh vuông của bạn lên, chọn các biểu tượng cần cập nhật, áp dụng thay đổi rồi xuất bản trang web. Các hướng dẫn cũ gọi đây là Project settings, nhưng thực chất là cùng một chỗ.

Webclip trong Webflow là gì?

Webclip là biểu tượng lớn hơn, được dùng khi ai đó lưu trang web của bạn vào màn hình chính điện thoại hoặc một lối tắt tương tự. Webflow nêu kích thước 256x256 pixel. Biểu tượng này khác với biểu tượng nhỏ hiển thị trên tab trình duyệt.

Vì sao favicon Webflow của tôi không hiển thị sau khi tải lên?

Nguyên nhân phổ biến nhất là bạn chưa xuất bản lại trang web sau khi tải lên, vì biểu tượng chỉ thay đổi trên trang đã xuất bản. Nguyên nhân thứ hai là bộ nhớ đệm của trình duyệt. Hãy xuất bản, rồi kiểm tra trong cửa sổ ẩn danh hoặc một trình duyệt khác trước khi cho rằng việc tải lên đã thất bại.

Webflow có hỗ trợ favicon SVG hoặc favicon chế độ tối không?

Theo ghi chú cập nhật của Webflow, bạn có thể tải lên PNG, JPG, GIF, ICO hoặc SVG, và bài trợ giúp có nhắc đến biểu tượng tab trình duyệt cho chế độ tối (không bắt buộc). Webflow cũng chuyển tệp SVG sang PNG để tương thích giữa các trình duyệt, nên hãy kiểm tra kết quả trên những trình duyệt bạn quan tâm.

Bao lâu thì Google hiển thị favicon Webflow mới của tôi?

Không có mốc thời gian cố định. Google tự quyết định khi nào thu thập lại dữ liệu và làm mới biểu tượng trong kết quả tìm kiếm; theo phản hồi từ cộng đồng, việc này có thể mất vài ngày đến vài tuần hoặc lâu hơn. Phần bạn kiểm soát được là đảm bảo biểu tượng đã hiển thị trên trang web đã xuất bản.

Trả lời ngắn gọn: Trong Webflow, mở Site settings > General > Icons, tải lên một ảnh vuông, chọn các biểu tượng cần cập nhật (favicon sáng, favicon chế độ tối tùy chọn, webclip), áp dụng thay đổi rồi xuất bản (publish) trang web. Webflow nêu favicon 32x32 và webclip 256x256, đồng thời tự tạo các kích thước khác từ ảnh bạn tải lên. Trang web đang chạy sẽ không thay đổi gì cho đến khi bạn xuất bản. (Đã kiểm tra vào tháng 11/2026 theo trung tâm trợ giúp và ghi chú cập nhật của Webflow.)

Webflow yêu cầu những gì

Các hướng dẫn cũ mô tả hai ô tải lên riêng biệt, một cho favicon 32x32 và một cho webclip 256x256. Bài trợ giúp hiện tại của Webflow mô tả quy trình đơn giản hơn: tải lên một ảnh vuông và Webflow lo phần kích thước. Dưới đây là công dụng của từng biểu tượng.

Biểu tượng	Kích thước Webflow nêu	Hiển thị ở đâu
Favicon (sáng)	32x32	Tab trình duyệt và dấu trang
Favicon (chế độ tối, tùy chọn)	32x32	Tab trình duyệt khi trình duyệt ở chế độ tối
Webclip	256x256	Lối tắt trên màn hình chính và các liên kết đã lưu tương tự
Biểu tượng bổ sung tự tạo	Favicon 48x48, biểu tượng cảm ứng 180x180 và 192x192	Webflow tự tạo từ ảnh bạn tải lên

Định dạng tải lên được chấp nhận theo ghi chú cập nhật của Webflow: PNG, JPG, GIF, ICO và SVG. Tệp SVG được chuyển thành PNG để tương thích giữa các trình duyệt.

Để tìm hiểu kỹ hơn về kích thước trên các nền tảng, hãy xem hướng dẫn kích thước favicon của chúng tôi.

Chuẩn bị ảnh trước

Favicon hiển thị với chiều rộng khoảng 16 đến 32 pixel trên tab, nên ảnh nguồn quan trọng hơn các thiết lập.

Bắt đầu từ ảnh vuông. Xuất khung hình vuông, từ 256x256 trở lên, để webclip không bị phóng to.
Đơn giản hóa. Dùng biểu tượng logo hoặc một chữ cái, đừng dùng cả wordmark. Chi tiết nhỏ sẽ nhòe đi ở kích thước tab.
Chú ý nền. PNG nền trong suốt trông đẹp trên tab sáng nhưng có thể biến mất trên tab tối. Nếu dùng favicon chế độ tối, hãy làm một phiên bản có biểu tượng màu sáng.
Đặt tên tệp trung tính. Tên tệp đã tải lên có thể xuất hiện trong HTML đã xuất bản, nên hãy tránh những tên như "final_v3_REAL.png".

Cách thêm favicon và webclip trong Webflow

Mở dự án trong Webflow Designer hoặc bảng điều khiển và vào Site settings.
Chọn tab General và cuộn đến Icons.
Nhấp Upload icon và chọn ảnh vuông của bạn.
Chọn các biểu tượng mà ảnh sẽ cập nhật: favicon, favicon chế độ tối (tùy chọn) và webclip.
Nếu muốn dùng biểu tượng khác cho chế độ tối, hãy thêm nó vào ô chế độ tối. Bước này không bắt buộc.
Nhấp Apply. Cách đặt tên trên giao diện có thể thay đổi đôi chút khi Webflow cập nhật, nên hãy đối chiếu với nhãn bạn thấy.
Publish trang web lên các tên miền của bạn. Chỉ lưu thôi sẽ không đưa biểu tượng lên trang web đang chạy.
Mở trang web đang chạy trong cửa sổ ẩn danh và kiểm tra tab.

Danh sách kiểm tra có thể sao chép

`` [ ] Ảnh nguồn vuông, từ 256x256 trở lên [ ] Biểu tượng đủ đơn giản để đọc được ở kích thước tab [ ] Đã thử trên giao diện trình duyệt sáng và tối [ ] Đã tải lên tại Site settings > General > Icons [ ] Đã nhấn Apply [ ] Đã xuất bản lên tên miền chính thức (không chỉ tên miền thử nghiệm webflow.io) [ ] Đã kiểm tra trong cửa sổ ẩn danh [ ] Đã làm mới cứng hoặc xóa bộ nhớ đệm nếu biểu tượng cũ vẫn còn ``

Khắc phục sự cố

Favicon vẫn hiện biểu tượng cũ hoặc logo Webflow

Hãy thử lần lượt theo thứ tự:

Xuất bản lại. Biểu tượng chỉ được đưa lên trang đang chạy khi bạn xuất bản. Nếu xuất bản lên nhiều tên miền, hãy chọn tất cả.
Kiểm tra trong cửa sổ ẩn danh. Trình duyệt lưu đệm favicon rất lâu, và một tab thông thường có thể hiện biểu tượng cũ trong thời gian dài.
Làm mới cứng trang, hoặc đóng rồi mở lại trình duyệt.
Mở trực tiếp tệp biểu tượng. Kiểm tra xem URL biểu tượng trong mã nguồn trang có tải được trong một tab riêng không.

Tệp tải lên bị từ chối hoặc hiển thị méo

Một số chủ đề trong cộng đồng báo lỗi về kích thước ở các quy trình cũ yêu cầu đúng kích thước chính xác. Nếu gặp lỗi này, hãy dùng ảnh vuông và thử lại; nếu vẫn không được, hãy thử trình duyệt khác hoặc cửa sổ ẩn danh. Lời khuyên này đến từ các phản hồi trên diễn đàn, không phải từ tài liệu của Webflow, nên hãy xem đó là một cách xử lý tạm.

Kết quả tìm kiếm Google hiển thị sai biểu tượng

Biểu tượng trong kết quả tìm kiếm do Google kiểm soát, không phải Webflow. Các chủ đề trong cộng đồng cho biết việc cập nhật có thể mất vài ngày, vài tuần hoặc lâu hơn. Hãy xác nhận biểu tượng tải được trên trang web đang chạy, rồi chờ. Giữ một biểu tượng vuông ổn định tại một URL nhất quán sẽ có ích.

Biểu tượng bị mờ trên tab

Điều này thường có nghĩa là ảnh nguồn có quá nhiều chi tiết hoặc ngay từ đầu đã có độ phân giải thấp. Hãy vẽ lại một biểu tượng đơn giản hơn ở kích thước lớn hơn rồi tải lên lại.

Nên tải lên định dạng nào?

Định dạng	Phù hợp với	Cần lưu ý
PNG	Hầu hết các trang web; đáng tin cậy và hỗ trợ nền trong suốt	Cần đủ độ phân giải cho webclip
SVG	Ảnh gốc dạng vector sắc nét	Webflow chuyển nó thành PNG, nên hãy xem trước kết quả
ICO	Quy trình cũ	Thường không cần thiết khi Webflow tự tạo các kích thước
JPG	Hiếm khi là lựa chọn tốt	Không có nền trong suốt; để lại khung nền

Nếu chưa chắc chắn, một ảnh PNG vuông từ 256x256 trở lên là lựa chọn an toàn nhất.

Vị trí của bước này trong việc chuẩn bị ra mắt

Favicon chỉ là một phần nhỏ trong danh sách kiểm tra trước khi ra mắt, bên cạnh tiêu đề, mô tả và ảnh chia sẻ mạng xã hội. Nếu bạn đang cân nhắc giữa các nền tảng trước khi quyết định, các trang so sánh Webflow và các lựa chọn thay thế Webflow của chúng tôi trình bày những ưu nhược điểm, còn hướng dẫn chung về đổi favicon sẽ hữu ích nếu bạn quản lý website trên nhiều nền tảng.

Nếu muốn bắt đầu từ một bố cục dựng sẵn, gói miễn phí của We.Inc cho phép bạn xuất bản tối đa ba trang web từ các mẫu có sẵn; trình xây dựng AI tạo bản nháp website từ một câu lệnh bắt đầu ở gói Starter với giá $20 một tháng. Bạn có thể đăng ký tại đây.

Bắt đầu miễn phí · Không cần thẻ tín dụng

Umair Ali Sadaqat

Nhà sáng lập We.Inc

Umair là nhà sáng lập We.Inc. Anh viết về xây dựng website bằng AI, các agency và việc kinh doanh, vận hành một studio web.

Sẵn sàng tạo nên điều tuyệt vời?

Tham gia cùng 15,000+ doanh nghiệp đang dùng We.Inc để ra mắt, phát triển và tự động hóa, tất cả trên một nền tảng.