Mở năm, sáu tab trình duyệt cùng lúc, bạn tìm lại trang mình cần bằng gì? Thường là bằng cái biểu tượng nhỏ xíu ở đầu mỗi tab, chứ không phải bằng chữ. Biểu tượng đó gọi là favicon. Nhiều website nhỏ bỏ quên nó, để lại hình quả địa cầu xám mặc định hoặc biểu tượng của phần mềm làm web. Bài này trả lời favicon là gì, nó xuất hiện ở đâu, và cách làm một favicon đơn giản cho cửa hàng của bạn.
Favicon là gì?
Favicon (viết tắt của "favorite icon") là biểu tượng nhỏ đại diện cho website. Nó là một tệp ảnh vuông, được khai báo trong phần đầu mã nguồn của trang. Trình duyệt, công cụ tìm kiếm và điện thoại đọc tệp này để hiển thị ở nhiều nơi khác nhau. Favicon không phải logo đầy đủ: logo có thể dài, có chữ nhỏ, còn favicon phải nhìn rõ ở kích thước chỉ bằng đầu ngón tay, thậm chí nhỏ hơn.
Biểu tượng website xuất hiện ở những đâu
Tab trình duyệt và dấu trang
Đây là nơi quen thuộc nhất. Trên máy tính, khi nhiều tab mở cùng lúc, tiêu đề bị cắt ngắn và chỉ còn biểu tượng. Khi khách lưu dấu trang (bookmark), favicon cũng đi kèm, giúp họ tìm lại bạn trong danh sách dài.
Kết quả tìm kiếm Google
Google hiển thị favicon cạnh tên website trong kết quả tìm kiếm. Hướng dẫn của Google yêu cầu favicon là hình vuông, kích thước là bội số của 48 px (ví dụ 48×48, 96×96, 144×144), và trang chủ phải khai báo nó đúng cách. Một biểu tượng rõ ràng giúp kết quả của bạn dễ nhận ra giữa các kết quả khác; một biểu tượng mặc định thì làm website trông như chưa hoàn thiện.
Màn hình chính điện thoại
Khách có thể bấm "Thêm vào màn hình chính" để lưu website như một ứng dụng. Lúc này điện thoại dùng biểu tượng cỡ lớn hơn (thường 180 px cho iPhone, 192 px cho Android). Nếu không có, điện thoại sẽ chụp thu nhỏ trang web hoặc dùng chữ cái đầu, trông khá lộn xộn.
Làm favicon từ logo sẵn có
Bạn không cần thuê thiết kế riêng. Hầu hết cửa hàng làm được favicon từ logo hiện có theo ba bước.
Bước 1: Chọn phần nhận diện mạnh nhất
Logo có chữ dài như "Điện máy Thành Công" sẽ không đọc được ở 16 px. Hãy lấy chữ cái đầu ("T" hoặc "TC"), hoặc biểu tượng hình trong logo nếu có. Dùng màu chính của thương hiệu làm nền, chữ màu tương phản.
Bước 2: Làm bản vuông, nét to
Thiết kế trên khung vuông lớn (ví dụ 512×512), nét chữ đậm, ít chi tiết. Sau đó thu nhỏ xuống 48 px và 16 px để thử: nếu ở 16 px vẫn nhận ra được, thì đạt. Chưa có logo? Bài chưa có logo có làm website được không gợi ý cách làm logo chữ tạm thời, và favicon có thể dùng luôn chữ cái đầu của logo đó.
Bước 3: Xuất các cỡ cần dùng
- Tệp favicon cho trình duyệt (thường là .ico hoặc .png 32×32, có thể kèm .svg).
- Bản 48×48 hoặc 96×96 PNG cho Google.
- Bản 180×180 (apple-touch-icon) và 192×192, 512×512 cho điện thoại.
Người làm web sẽ đặt các tệp này lên máy chủ và khai báo trong mã trang. Nếu bạn dùng hệ quản trị như WordPress, thường có mục "biểu tượng trang web" để tải lên một ảnh vuông và hệ thống tự tạo các cỡ.
Lỗi thường gặp với favicon
- Thu nhỏ nguyên logo dài: thành một vệt màu không đọc được.
- Nền trong suốt với chữ tối: trên tab chế độ tối (dark mode), chữ chìm mất. Dùng nền màu đặc là an toàn nhất.
- Vẫn để biểu tượng của giao diện mẫu hoặc của phần mềm làm web: khách thấy biểu tượng của bên khác ở đầu tab của bạn.
- Đổi favicon liên tục: Google cần thời gian để cập nhật, khách quen cũng mất mốc nhận diện. Chọn một lần, dùng lâu dài.
- Dùng hình có bản quyền của người khác: biểu tượng lấy trên mạng có thể vướng bản quyền hoặc trùng với thương hiệu khác.
Favicon có giúp lên top Google không?
Không trực tiếp. Favicon không phải yếu tố xếp hạng. Nhưng nó giúp kết quả của bạn dễ nhận ra, giúp khách quen tìm lại đúng trang, và làm website trông chỉn chu. Đó là việc nhỏ, làm một lần, dùng nhiều năm. Bạn có thể xem cách các mẫu trong kho mẫu website của WebCut hiển thị trên tab trình duyệt để hình dung.
Nếu bạn đang chuẩn bị làm website mới, hãy đưa favicon vào danh sách việc cần hỏi người làm web, cùng với tiêu đề trang và ảnh chia sẻ mạng xã hội. Xem thêm cách làm việc tại trang dịch vụ website tại Quảng Ngãi.
Website của bạn đang hiện biểu tượng mặc định trên tab? Nhắn Zalo 0947805184 hoặc gọi 0947588971, gửi kèm logo, WebCut sẽ góp ý cách làm favicon cho rõ.
Câu hỏi thường gặp
Favicon nên dùng định dạng gì?
PNG hoặc ICO là phổ biến nhất; SVG cũng được nhiều trình duyệt hỗ trợ. Quan trọng hơn định dạng là hình vuông, nét rõ và khai báo đúng.
Đã thêm favicon mà Google chưa hiện?
Google cần thu thập lại trang chủ, có thể mất vài ngày đến vài tuần. Kiểm tra xem tệp có mở được trực tiếp trên trình duyệt và không bị chặn bởi robots.txt.
Favicon có cần giống hệt logo?
Không cần giống hệt, nhưng nên cùng màu và cùng chữ hoặc hình chính, để khách nhìn là liên tưởng tới thương hiệu.
