Web100

Hướng dẫn cách thiết lập hình ảnh bắt mắt trên Web100 - Logo, Favicon và Thumbnail

  • Đăng lúc 13:05 17/09/2024
Logo là gì?

Logo của một website là hình ảnh, biểu tượng, hoặc chữ viết đặc trưng được sử dụng để nhận diện và đại diện cho thương hiệu hoặc tổ chức của website đó. Logo thường được thiết kế để tạo ấn tượng mạnh mẽ và dễ nhớ, giúp người dùng nhận diện website một cách nhanh chóng và dễ dàng.

Logo có thể bao gồm:

  • Biểu tượng: Hình ảnh hoặc biểu đồ đại diện cho thương hiệu.
  • Tên thương hiệu: Chữ viết hoặc từ khóa đặc trưng.
  • Kết hợp hình ảnh và chữ viết: Sự kết hợp giữa biểu tượng và tên thương hiệu.
Một logo tốt giúp xây dựng thương hiệu và tạo sự nhận diện cho website, đồng thời hỗ trợ trong việc tạo niềm tin và sự chuyên nghiệp trong mắt người dùng.

Tại WEB100, các website có logo được hiển thị ở cả menu và footer. Ở footer, logo có kích thước lớn hơn 1 chút so với menu.

Nếu bạn đang sử dụng WEB100, để logo được đẹp mắt và trông cuốn hút thì bạn nên chọn kích thước có hình chữ nhật nằm ngang, không nên chọn hình quá vuông hoặc hình chữ nhật nằm dọc. Tỷ lệ phù hợp nhất là khoảng 5 : 2 hoặc 3 : 1. Có nghĩa là chiều dài dài gấp 2,5 hoặc 3 lần chiều cao. 

Ngoài ra Logo nên có khoảng trống nhỏ ở trên và dưới (padding) thay vì hình ảnh logo nằm quá sát viền, nhìn sẽ không đẹp mắt. Một mẫu logo đẹp sẽ dạng như sau:
Logo hình chữ nhật nằm ngang, có khoảng trống nhỏ ở 2 đầu

Favicon là gì?

Favicon (viết tắt của "favorite icon") là một biểu tượng nhỏ hiển thị trên tab trình duyệt, thanh địa chỉ, và danh sách bookmark của người dùng. Đây là một cách để nhận diện nhanh chóng và dễ dàng website của bạn.

Đặc điểm của favicon:

  1. Kích thước nhỏ: Favicon thường có kích thước 16x16 pixel hoặc 32x32 pixel, mặc dù có thể có kích thước lớn hơn trong một số trường hợp. 

  2. Định dạng: Favicon thường được lưu dưới dạng tệp .ico, nhưng cũng có thể là các định dạng khác như .png, .gif, hoặc .svg. Đối với WEB100 favicon khi được lưu sẽ tự động chuyển đổi thành kiểu .ico (Các bạn có thể upload bất kỳ kiểu ảnh nào)

  3. Hiển thị: Favicon xuất hiện trên tab trình duyệt bên cạnh tiêu đề trang, trong danh sách bookmark, và trong một số trường hợp trên các công cụ tìm kiếm và nền tảng khác.
Đối với WEB100, các bạn khi upload không cần thu nhỏ ảnh 16x16 hoặc 32x32, kiểu ảnh cũng không cần phải thuộc định dạng yêu cầu, chỉ cần chọn hình có kích thước vuông, khi được lưu ảnh sẽ tự động chuyển đổi thành kích thước 32 x 32 và định dạng .ico . Favicon nên để hình ảnh có biểu tượng tối giản, không nên để thừa bất kỳ khoảng trống nào theo chiều dọc, còn chiều ngang thì có thể.

Favicon giúp tăng cường nhận diện thương hiệu và cung cấp một trải nghiệm người dùng đồng nhất. Dưới đây là một mẫu Favicon đẹp mắt và phù hợp
Favicon sách giáo khoa
Thumbnail là gì?

Thumbnail website (hoặc thumbnail image) là hình ảnh thu nhỏ đại diện cho nội dung của trang web hoặc một phần cụ thể của trang web đó. Các thumbnail thường được sử dụng để cung cấp cái nhìn nhanh về nội dung hoặc để tăng cường tính tương tác trên các nền tảng như mạng xã hội, tìm kiếm hình ảnh, và các danh sách bài viết hoặc sản phẩm.

thumbnail xuất hiện khi share website trên mạng xã hội


Đặc điểm của thumbnail website:

  1. Kích thước nhỏ: Thumbnails thường có kích thước nhỏ hơn so với hình ảnh gốc, giúp tiết kiệm băng thông và thời gian tải trang.

  2. Hình ảnh đại diện: Chúng thường được sử dụng để đại diện cho nội dung như bài viết, video, sản phẩm hoặc các phần tử khác trên trang web.

  3. Tăng cường trải nghiệm người dùng: Thumbnails giúp người dùng có thể nhanh chóng xác định nội dung của một liên kết hoặc bài viết mà không cần phải mở trang đó.

Đối với WEB100, các bạn có thể thoải mái lựa chọn hình ảnh thumnail, miễn sao là phù hợp với nội dung của website, khi được lưu, ảnh sẽ được convert thành kích thước phù hợp cũng như định dạng .webp tối ưu tải trang cho website. 

Nếu các bạn còn có thắc mắc gì hãy liên hệ với chúng tôi để được giải đáp

TIN LIÊN QUAN