Cách chọn kích thước logo chuẩn cho website để không bị lệch bố cục

[WebHD]

Chào mọi người,

Mình là admin từ WebHD.vn – bên mình chuyên thiết kế website cho doanh nghiệp vừa và nhỏ. Hôm nay muốn chia sẻ nhanh một chủ đề tuy nhỏ nhưng nhiều người vẫn thường gặp rắc rối khi bắt đầu dựng web: kích thước logo website bao nhiêu là chuẩn?

Thực tế thì không có một con số "cứng" cho tất cả website, vì còn tuỳ vào giao diện, ngành nghề, thói quen duyệt web của người dùng. Tuy nhiên, từ kinh nghiệm thực tế triển khai hàng trăm web, bên mình rút ra một vài gợi ý như sau:

• Logo trên header (trên cùng): thường dùng 250x100 px hoặc 200x80 px là vừa đẹp, không chiếm quá nhiều diện tích nhưng vẫn rõ thương hiệu.
• Logo cho màn hình retina hoặc thiết bị có độ phân giải cao: nên dùng gấp đôi kích thước (500x200 px) nhưng hiển thị bằng CSS ở mức bình thường.
• Logo ở footer: nhỏ gọn tầm 150x50 px là hợp lý, không nên to như trên header.
• Favicon (icon tab trình duyệt): nên chuẩn bị ảnh riêng 32x32 px hoặc 48x48 px, không dùng logo to thu nhỏ lại sẽ bị mờ.

Ngoài ra, nên dùng định dạng SVG hoặc PNG nền trong suốt, hạn chế JPG để giữ được độ sắc nét và linh hoạt nền màu.
Cuối cùng, mọi người nhớ test hiển thị logo trên cả mobile lẫn desktop trước khi chốt nhé. Một chiếc logo đặt sai kích thước có thể khiến cả header lệch bố cục hoặc ảnh hưởng tốc độ tải trang.
Hy vọng chia sẻ nhỏ này giúp ích cho anh em đang tự dựng web hoặc làm việc với đơn vị thiết kế.

WebHD - Thiết kế website dễ dùng, tối ưu hiển thị đa thiết bị