Kích thước Logo Banner chuẩn trong thiết kế website

Banner và Logo điểm nhất tạo ấn tượng đối với người xem khi truy cập vào website. Sau đây bảng kích thước Logo và banner chuẩn trong thiết kế website.

Đinh Huyền Trang
Trang ĐH
16:01 01/03/19 trong Thiết kế logo
16:01 01/03/19 30.221 lượt xem


Banner và Logo điểm nhấn tạo ấn tượng đối với người xem khi truy cập vào website. Có thể tạo Banner ở hầu hết mọi kích thước mà bạn muốn. Tuy nhiên, nếu mỗi người lại thiết kế logo, banner với kích thước của riêng mình thì điều này sẽ gây ra sự hỗn loạn. Tất nhiên là điều này không xảy ra, bởi, đã có một bộ quy tắc về kích thước banner & logo chuẩn cho website của bạn.  Sau đây là một số tiêu chuẩn về kích thước, kích cỡ, size Logo và banner trong thiết kế website bán hàng để bạn tham khảo.

Khi một website hoàn thiện. Việc quảng cáo, trao đổi banner là điều tất yếu. Bạn muốn trao đổi banner giữa các website dễ dàng và nhanh chóng hơn. Không phải tốn thời gian và chi phí thiết kế riêng từng kích cỡ banner cho mỗi website trong một chiến dịch quảng cáo Khi đó có thể bạn cần tham khảo bảng số liệu sau.
Đối với hầu hết vị trí, kích thước logo tối ưu cho website là chiều rộng x chiều cao : 250 x 100 px

Tuy nhiên, nếu bạn cần tùy chỉnh kích thước logo, dưới đây là một số kích thước thiết kế logo chuẩn:

Đối với bố trí ngang:
Kích thước Logo Banner chuẩn trong thiết kế website 1
Đối với bố cục dọc (vuông):
 Kích thước Logo Banner chuẩn trong thiết kế website 2
160 px x 160 px
Kích thước favicon tiêu chuẩn cho trình duyệt là:
 
Kích thước Logo Banner chuẩn trong thiết kế website 3 
16x16 px 
Kích thước Logo Banner chuẩn trong thiết kế website 4 
32 px x 32 px 
Kích thước Logo Banner chuẩn trong thiết kế website 5 
48 px x 48 px
 
​​​​

Bạn đã có Website? Bạn là người dẫn đầu hay đối thủ của bạn?
Vượt lên đối thủ và trở thành người chiến thắng với banner, logo thiết kế chuẩn kích thước

 
Kích thước Logo Banner chuẩn trong thiết kế website 6  THIẾT KẾ LOGO

 


Kích thước tiêu chuẩn cho Banner Website
 

 

Một số kích thước banner thường sử dụng

Kích thước Logo Banner chuẩn trong thiết kế website 7

Tên: Hình chữ nhật trung bình
Kích thước: 300x250 px
Ứng dụng: 
Hoạt động tốt khi được nhúng trong nội dung văn bản hoặc ở cuối bài viết.
Có thể tăng thu nhập khi bật cả quảng cáo văn bản và quảng cáo hình ảnh. 
 

Tên: Hình chữ nhật lớn
Kích thước: 336x280 px
Ứng dụng: 
Hoạt động tốt khi được nhúng trong nội dung văn bản hoặc ở cuối bài viết.
Có nhiều khoảng không quảng cáo, thích hợp với quảng cáo văn bản và hình ảnh
Kích thước Logo Banner chuẩn trong thiết kế website 8
Kích thước Logo Banner chuẩn trong thiết kế website 9

Tên: Hình chữ nhật dài
Kích thước: 728x90 px
Ứng dụng: 
Hoạt động tốt khi được khi được đặt phía trên nội dung chính và trên website diễn đàn.
Thích hợp với quảng cáo văn bản và hình ảnh.


Tên: Nửa trang
Kích thước: 300x600 px
Ứng dụng: 
Cung cấp nhiều kiểu tương tác cho người dùng
Một trong những kích thước tăng nhanh về số lần hiển thị.                            
Thích hợp để quảng cáo thương hiệu
Kích thước Logo Banner chuẩn trong thiết kế website 10
Kích thước Logo Banner chuẩn trong thiết kế website 11
 


Tên: Banner lớn trên thiết bị di động
Kích thước: 320x100 px
Ứng dụng: 
Cung cấp nhiều không gian hơn cho hình ảnh và nội dung.

Xem thêm bảng kích thước banner website đầy đủ
 
  Kích thước (Pixel) Minh họa Trường hợp sử dụng

Banner hình chữ nhật và Pop-up Ads

Medium Rectangle
(Hình chữ nhật trung bình)
300×250 Kích thước Logo Banner chuẩn trong thiết kế website 12 Nhúng trong nội dung văn bản hoặc ở cuối bài viết
Large Rectangle
(Hình chữ nhật lớn)
336×280 Kích thước Logo Banner chuẩn trong thiết kế website 13
Square Pop-Up
(Hình vuông)
250x250 Kích thước Logo Banner chuẩn trong thiết kế website 14 Định dạng này có thể vừa với khoảng không nhỏ, không chứa hết hình chữ nhật lớn. 
Vertical Rectangle
(Hình chữ nhật dọc)
240x400 Kích thước Logo Banner chuẩn trong thiết kế website 15 Kích thước phổ biến nhất ở Nga
Small Rectangle
(Hình chữ nhật nhỏ)
300x100 Kích thước Logo Banner chuẩn trong thiết kế website 16 Vừa với khoảng không nhỏ. Tuy nhiên có thể dẫn đến hiệu suất dưới mức tối ưu nếu chạy quảng cáo
Pop-Under 720x300 Kích thước Logo Banner chuẩn trong thiết kế website 17 Kích thước phổ biến ở Ba Lan. Hoạt động tốt ở chiến dịch quảng cáo thương hiệu và phản hồi trực tiếp

Banner & Nút quảng cáo

Leaderboard
(Hình chữ nhật dài)
728×90 Kích thước Logo Banner chuẩn trong thiết kế website 18 Đặt phía trên nội dung chính và trên trang web diễn đàn
Billboard
(Biển quảng cáo)
970×250 Kích thước Logo Banner chuẩn trong thiết kế website 19 Một định dạng tập trung vào thương hiệu.
Hoạt động tốt khi được đặt tại vị trí có giá trị cao trên trang
Full Banner
(Biểu ngữ)
468×60 Kích thước Logo Banner chuẩn trong thiết kế website 20 Vừa với không gian nhỏ hơn không chứa hết hình chữ nhật dài 728x90
Half Banner
(Bán biểu ngữ)
234×60 Kích thước Logo Banner chuẩn trong thiết kế website 21 Định dạng này có thể vừa với khoảng không nhỏ.Kích thước này không có xu hướng hoạt động tốt như các kích thước khác
Vertical Banner
(Biểu ngữ dọc)
120×240 Kích thước Logo Banner chuẩn trong thiết kế website 15
Large Leaderboard
(Hình chữ nhật dài lớn)
970×90 Kích thước Logo Banner chuẩn trong thiết kế website 23 Kích thước này lý tưởng để hiển thị nội dung có Độ phân giải cao, chẳng hạn như video, ảnh, hoạt ảnh và ứng dụng. 
Square
(Hình vuông)
250×250 Kích thước Logo Banner chuẩn trong thiết kế website 24 Định dạng này có thể vừa với khoảng không nhỏ.
 
Small Square
(Hình vuông nhỏ)
200×200 Kích thước Logo Banner chuẩn trong thiết kế website 25
Button
(Nút)
125×125 Kích thước Logo Banner chuẩn trong thiết kế website 26

Banner quảng cáo dạng cột

Wide Skyscraper
(Hình chữ nhật đứng rộng)
160×600 Kích thước Logo Banner chuẩn trong thiết kế website 27 Tốt nhất nếu được sử dụng dọc các thanh bên của trang web.
Half Page
(Nửa trang)
300×600 Kích thước Logo Banner chuẩn trong thiết kế website 28 Định dạng này cung cấp khoảng không lớn hơn cho nhà quảng cáo truyền đạt thông điệp của mình và có thể cung cấp nhiều kiểu tương tác cho người dùng.
Skyscraper
(Hình chữ nhật đứng)
120×600 Kích thước Logo Banner chuẩn trong thiết kế website 29 Vừa với khoảng không hẹp hơn không chứa hết hình chữ nhật đứng rộng 160x600
Portrait
(Thẳng đứng)
300×1050 Kích thước Logo Banner chuẩn trong thiết kế website 30  Được đặt dọc theo nội dung ở bên trái hoặc bên phải trang
  Kích thước (Pixel) Thời gian sử dụng cho hình động

Banner hình chữ nhật và Pop-up Ads

Medium Rectangle
(Hình chữ nhật trung bình)
300×250 Nhúng trong nội dung văn bản hoặc ở cuối bài viết
Large Rectangle
(Hình chữ nhật lớn)
336×280
Square Pop-Up
(Hình vuông)
250x250 Định dạng này có thể vừa với khoảng không nhỏ, không chứa hết hình chữ nhật lớn. 
Vertical Rectangle
(Hình chữ nhật dọc)
240x400 Kích thước phổ biến nhất ở Nga
Small Rectangle
(Hình chữ nhật nhỏ)
300x100 Vừa với khoảng không nhỏ. Tuy nhiên có thể dẫn đến hiệu suất dưới mức tối ưu nếu chạy quảng cáo
Pop-Under 720x300 Kích thước phổ biến ở Ba Lan. Hoạt động tốt ở chiến dịch quảng cáo thương hiệu và phản hồi trực tiếp

Banner & Nút quảng cáo

Leaderboard
(Hình chữ nhật dài)
728×90 Đặt phía trên nội dung chính và trên trang web diễn đàn
Billboard
(Biển quảng cáo)
970×250 Một định dạng tập trung vào thương hiệu.
Hoạt động tốt khi được đặt tại vị trí có giá trị cao trên trang
Full Banner
(Biểu ngữ)
468×60 Vừa với không gian nhỏ hơn không chứa hết hình chữ nhật dài 728x90
Half Banner
(Bán biểu ngữ)
234×60 Định dạng này có thể vừa với khoảng không nhỏ.Kích thước này không có xu hướng hoạt động tốt như các kích thước khác
Vertical Banner
(Biểu ngữ dọc)
120×240
Large Leaderboard
(Hình chữ nhật dài lớn)
970×90 Kích thước này lý tưởng để hiển thị nội dung có Độ phân giải cao, chẳng hạn như video, ảnh, hoạt ảnh và ứng dụng. 
Square
(Hình vuông)
250×250 Định dạng này có thể vừa với khoảng không nhỏ.
 
Small Square
(Hình vuông nhỏ)
200×200
Button
(Nút)
125×125

Banner quảng cáo dạng cột

Wide Skyscraper
(Hình chữ nhật đứng rộng)
160×600 Tốt nhất nếu được sử dụng dọc các thanh bên của trang web.
Half Page
(Nửa trang)
300×600 Định dạng này cung cấp khoảng không lớn hơn cho nhà quảng cáo truyền đạt thông điệp của mình và có thể cung cấp nhiều kiểu tương tác cho người dùng.
Skyscraper
(Hình chữ nhật đứng)
120×600 Vừa với khoảng không hẹp hơn không chứa hết hình chữ nhật đứng rộng 160x600
Portrait
(Thẳng đứng)
300×1050  Được đặt dọc theo nội dung ở bên trái hoặc bên phải trang

 


Kích thước Banner điện thoại
 

Kích thước Logo Banner chuẩn trong thiết kế website 31
Banner size: 320×50  px 
Tên: Leaderboard
(Hình chữ nhật dài
trên thiết bị di động)
Kích thước Logo Banner chuẩn trong thiết kế website 32
 Banner size: 320×320 
Tên: Full Page Flex
(Định dạng toàn trang)
Kích thước Logo Banner chuẩn trong thiết kế website 33
 Banner size: 320×100 
 Tên: Large Mobile Banner
(Biểu ngữ lớn trên thiết bị di động)
Kích thước Logo Banner chuẩn trong thiết kế website 34
 Banner size: 250×250 
Tên: Square
(Hình vuông)
Kích thước Logo Banner chuẩn trong thiết kế website 35
 Banner size: 200×200 
Tên: Small Square
(Hình vuông nhỏ)


Lợi ích từ việc chuẩn hóa kích thước banner quảng cáo
 

 Kích thước Logo Banner chuẩn trong thiết kế website 36
Trao đổi banner giữa các website dễ dàng và nhanh chóng hơn.

Kích thước Logo Banner chuẩn trong thiết kế website 37
Một banner duy nhất cho tất cả các website cần đặt quảng cáo. Không tốn kém thời gian và chi phí khi phải thiết kế riêng từng kích cỡ banner cho mỗi website trong một chiến dịch quảng cáo.

Kích thước Logo Banner chuẩn trong thiết kế website 38
Dễ dàng chấp nhận quảng cáo với các kích thước chuẩn từ các tổ chức bán quảng cáo (thí dụ Google) mà không phải thiết kế lại giao diện.

Một số lưu ý khác

 
  • Kích thước 728×90px thường được sử dụng để làm banner chính cho các Website. Nó phổ biến với giai đoạn trước, khi mà website được làm để tương thích với kích thước màn hình 800×600. Ngày nay, kích thước này vẫn phổ biến và đôi khi được tách làm 2 banner 364×90 .
  • Banner kích thước 300×100 và 300×250 được dùng nhiều ở website 2 cột.
  • Button 2 (120×60px) là kích thước hay được sử dụng để trao đổi logo các Website với nhau. Thời gian gần đây, các Website hay sử dụng thêm loại Micro button (80×15px). Loại này nhỏ xinh thường được sử dụng để trang trí cho các Website.
  • Dung lượng tập tin của banner càng nhỏ càng tốt. Dung lượng banner lớn làm cho trang web tải chậm và gây khó chịu cho người xem.
  • Thông thường, đối với banner nhỏ, hoặc không sử dụng flash, dung lượng tập tin nên nhỏ hơn hoặc bằng 10Kb.
  • Đối với banner có nội dung phức tạp hoặc flash banner, dung lượng tập tin nên nhỏ hơn hoặc bằng 30Kb
  • Đối với banner động (gif hoặc flash), lưu ý thời gian đổi hình không quá nhanh sao cho người xem có thể đọc được hết nội dung của hình.
 
Một bác thợ giỏi không dùng miếng gỗ xấu để lắp vào sau tủ. Một chiếc máy tốt thì bo mạch cũng cần phải đẹp!
Đó thực sự là những triết lý làm việc rất hay và đầy tinh túy. Tất Thành cũng muốn vậy, chúng tôi luôn có gắng để làm được như thế đối với các website mình làm ra.
Bạn thử chiêm ngưỡng một vài tác phẩm website của chúng tôi dưới đây nhé! :)
Chuỗi 55 cửa hàng Fresh Garden
11:46 10/03/20 428 lượt xem
Bảo tàng Hồ Chí Minh
11:12 10/03/20 339 lượt xem
Tập đoàn Bất động sản Danko
09:08 10/03/20 387 lượt xem
Trung ương Hội Trường Sơn Việt Nam
09:03 10/03/20 390 lượt xem
Trung ương hội sinh viên Việt Nam
16:38 25/07/15 1.241 lượt xem
Website đạo diễn Hoàng Công Cường
17:42 20/04/20 242 lượt xem
Hệ thống giáo dục UCMAS - 99 cơ sở
15:21 20/04/20 249 lượt xem
Công ty cổ phần đầu tư HDN
15:21 20/04/20 237 lượt xem
Hãng Taxi Group
15:20 20/04/20 251 lượt xem
Tổng công ty MBLand - MBLand Holdings
14:53 26/09/17 815 lượt xem
Chuỗi cửa hàng Cộng Cà Phê
17:28 10/07/15 297 lượt xem
Hỗ trợ khách hàng
Các chuyên viên tư vấn của chúng tôi luôn sẵn sàng giúp bạn. Hãy liên hệ ngay nếu bạn còn có câu hỏi trong đầu.
Trần Minh Thắng
Hà Mạnh Linh
Gửi yêu cầu
Hãy cho chúng tôi biết mong muốn của bạn. Chúng tôi sẽ liên hệ lại cho bạn ngay lập tức.
Gửi thông tin liên hệ
Đăng ký dịch vụ
Hotline
0988.56.59.56
Zalo
0988.56.59.56
Viber
0988.56.59.56
Youtube
Twitter
Facebook
http://facebook.com/
Facebook
http://facebook.com/
Instagram
Ảnh bên trái web - 1Ảnh bên trái web - 2
Ảnh bên phải web - 1Ảnh bên phải web - 2