Trong thiết kế web, như bạn có thể biết, mọi chi tiết đều quan trọng. Một người đã chuyển sang tài nguyên của bạn không nhìn thấy từng phần tử một cách riêng biệt, nhưng nhìn nhận toàn bộ hình ảnh như một gói bao gồm các chi tiết nhỏ khác. Do đó, nếu bạn bỏ lỡ điều gì đó trong quá trình phát triển tài nguyên của mình, chi tiết này sau này có thể làm hỏng toàn bộ khu phức hợp, toàn bộ bố cục.
Những chuyện vặt vãnh như vậy có thể là, ví dụ, nền của một nút, phông chữ được chọn không chính xác của một số thành phần nhỏ, và thậm chí là biểu tượng yêu thích. Thật vậy, hãy tự mình xem - các trang web lớn, nổi tiếng có một biểu tượng riêng cho biết nó trong phần "Dấu trang" trên trình duyệt của người dùng. Nếu không có nó, các nhà phát triển của tài nguyên sẽ không thể tạo ra thành phần mà họ đã phấn đấu ban đầu.
Vì vậy, khi tạo thiết kế cho trang web của bạn, bạn nên chú ý đến các chi tiết như biểu tượng yêu thích. Trong bài viết này, chúng tôi sẽ nói về cách khớp nó với kiểu chung của tài nguyên cũng như kích thước hình ảnh này nên có.
Biểu tượng trang
Đầu tiên, hãy xác định phần tử này là gì. Ngay bây giờ, hãy xem tiêu đề của tab trình duyệt của bạn. Như bạn có thể thấy, có một hình ảnh nhỏ ở bên trái của nó, cho biết một phiên bản đơn giản hóa của biểu trưng của tài nguyên. Hình ảnh tương tự cũng gần tên của trang web được hiển thị trong kết quả tìm kiếm. Đây là những gì người dùng được hướng dẫn khi họ nhìn thấy tiêu đề.
Nhiều quản trị viên web hiểu rằng cần phải có một hình ảnh như vậy - nhưng ít người biết kích thước biểu tượng yêu thích cho trang web là phù hợp nhất. Do đó, trong bài viết này, chúng tôi sẽ không chỉ cung cấp thông tin về cách tạo một biểu tượng như vậy và cách bạn có thể cài đặt nó trên tài nguyên của mình mà còn nói về kích thước hình ảnh.
Mục đích của biểu tượng yêu thích
Vì vậy, hình ảnh gần tiêu đề trang web được sử dụng để nhận dạng. Đây là mục đích ban đầu của nó: để thể hiện trang web có tên mà chúng ta nhìn thấy và làm cho nó nổi bật trong mắt những người còn lại. Điều này được thực hiện đơn giản nhất có thể thông qua việc sử dụng đồ họa: chúng ta nhận thức thông tin bằng hình ảnh một cách trực quan nhanh hơn và dễ dàng hơn nhiều so với định dạng văn bản. Ưu đãi giúp chúng tôi làm điều đó. Nhưng đừng quên rằng kích thước của favicon là tối thiểu trong mắt người dùng. Đây không phải là một biểu trưng trong "tiêu đề" của trang web, có thể chứa thông tin bổ sung dưới dạng chữ khắc, một số giải thích hoặc thông tin liên hệ. Mọi thứ có thể được hiển thị trong biểu tượng bên cạnh tên phải vừa với kích thước của biểu tượng yêu thích nhất có thể. Và anh ta, như đã chỉ ra, chỉ đơn giản là thu nhỏ (chỉ 16 x 16 pixel).
Cách chọnyêu thích?
Vậy làm cách nào để quản trị viên web có thể thiết kế một biểu tượng cho trang web của mình? Cần lưu ý rằng chỉ nén biểu trưng trang web, thường xuyên nhất, sẽ không hoạt động. Trên các biểu tượng được đặt dưới dạng biểu trưng của một tài nguyên cụ thể, các yếu tố khác nhau thường hiển thị, không phải lúc nào cũng hiển thị chính xác ở dạng thu nhỏ. Tốt hơn hết là nên từ bỏ ngay một cam kết như vậy.
Tất nhiên, kích thước của biểu tượng yêu thích không cho phép nói về việc chỉ cần chèn một dòng chữ vào đó. Mọi văn bản sẽ đơn giản là ẩn ở độ phân giải này. Chúng tôi cần phát triển một biểu tượng mới có thể truyền tải phong cách của trang web. Để tìm giải pháp, một lần nữa, chúng ta hãy chuyển sang các trang web lớn nhất.
Nhiều người sử dụng chữ cái đầu tiên cách điệu của tên dịch vụ làm biểu tượng yêu thích. Đây là cách, ví dụ, Bing, Yahoo, Yandex, Wikipedia, Google. Có một cách tiếp cận khác - nếu bạn có một tên trang web ngắn, bạn có thể đặt nó làm nền cho biểu tượng của mình. Để kích thước của biểu tượng yêu thích (tính bằng pixel, tôi nhắc lại, 16 x 16 pixel) hiển thị chính xác dòng chữ này, nó không được dài hơn 3 chữ cái. Ví dụ: đây là những gì dịch vụ Aol làm.
Cách tạo biểu tượng yêu thích?
Có một số cách để tạo biểu tượng cho tên trang web. Tất nhiên, dễ nhất là làm việc với các giải pháp làm sẵn khác nhau. Chúng ta có thể nói về một số dịch vụ hoặc chương trình cho phép bạn tạo biểu tượng từ một hình ảnh chính thức bằng cách giảm bớt nó. Tuy nhiên, tôi khuyên bạn nên tự phát triển một logo như vậy. Điều này trước hết sẽ cung cấp chocơ hội để học một cái gì đó; và thứ hai, nó sẽ cung cấp nhiều công cụ hơn. Tất cả những gì bạn cần biết là vẽ gì và cũng biết kích thước biểu tượng yêu thích trong phiên bản cuối cùng. Chúng tôi sẽ nói về kích thước biểu tượng cho trang web sau một chút, nhưng bây giờ chúng tôi sẽ lưu ý một số điểm tinh tế khi làm việc với những hình ảnh như vậy. Đặc biệt, không đề cập đến kích thước của biểu tượng yêu thích cho trang web, định dạng của một hình ảnh như vậy cần được làm rõ. Như các nhà thiết kế có kinh nghiệm lưu ý, hình ảnh phải được lưu dưới dạng-p.webp
Bạn có thể lưu hình ảnh, chẳng hạn như bằng Photoshop, nơi biểu tượng sẽ được vẽ.
Kích thước yêu thích
Vì vậy, bây giờ hãy nói về bức tranh mà chúng ta nhìn thấy bên cạnh tên trang web trong kết quả tìm kiếm sẽ lớn như thế nào. Theo mặc định, như đã đề cập, kích thước của nó chỉ là 16 pixel (mỗi bên). Tuy nhiên, nếu bạn thử chỉnh sửa hình ảnh này trong Photoshop, bạn sẽ tự mình thấy nó bất tiện như thế nào. Do đó, chúng tôi khuyên bạn nên làm việc với một bức ảnh được phóng to, trong tương lai có thể đơn giản nén dọc theo các cạnh và lưu ở định dạng bắt buộc.
Multiplatform
Tuy nhiên, nói về mức độ lớn của biểu tượng yêu thích trên trang web của bạn, có một điều nữa cần lưu ý. Không phải tất cả các nền tảng đều hiển thị hình ảnh tài nguyên theo cách giống nhau. Ví dụ: các thiết bị có màn hình Retina “xem” biểu tượng yêu thích của bạn ở 32 x 32 pixel. Và trong Safari và trên nền tảng Windows mới, và ở tất cả, các biểu tượng này đạt kích thước 64pixel.
Do đó, chúng tôi khuyên bạn nên lưu các phiên bản khác nhau của biểu tượng và chỉ cần cung cấp cho sự thay đổi của nó tùy thuộc vào nền tảng của người dùng trong tương lai. Một điểm thú vị khác - bạn có thể cố gắng tải biểu tượng ở định dạng lớn nhất, dựa trên thực tế là nó sẽ "thu nhỏ" tùy thuộc vào trình duyệt.
Biên tập viên bên ngoài
Tất nhiên là tốt nếu bạn giỏi Photoshop và biết kích thước biểu tượng yêu thích là bao nhiêu và làm thế nào để đạt được nó trong khi lưu hình ảnh của bạn. Tuy nhiên, có rất nhiều người mới bắt đầu chưa từng tìm hiểu kỹ về các trình chỉnh sửa đồ họa nên họ không thể vẽ được hình ảnh mong muốn một cách dễ dàng. Để giúp các quản trị viên web như vậy, có nhiều dịch vụ khác nhau cho phép bạn tự động tạo biểu tượng mà bạn quan tâm. Nhiều người trong số họ thậm chí còn miễn phí, không yêu cầu bất kỳ khoản đầu tư nào từ người dùng.
Đôi khi bạn chỉ cần đăng ký để làm việc, nhưng, như bạn hiểu, điều này được thực hiện một lần - sau tất cả, các công ty không thay đổi biểu tượng yêu thích của họ thường xuyên. Hãy xem Google, công ty này thay đổi biểu trưng hàng ngày, nhưng không chạm vào biểu tượng.
Cách cài đặt biểu tượng yêu thích?
Nói chung, việc thiết lập trang web của bạn sao cho nó hiển thị chính xác hình ảnh bạn cần là rất đơn giản. Chỉ cần thực hiện một loạt các bước đơn giản sẽ cho phép các công cụ tìm kiếm, cũng như các trình duyệt đơn giản, đọc được thông tin.
Để làm điều này, hình ảnh kết quả phải được lưu vớiđặt tên favicon.ico và được đặt trong thư mục gốc của tài nguyên của bạn. Vậy là xong, bây giờ hình ảnh của bạn sẽ tự động được nhận dạng và một lúc sau nó sẽ được liên kết với trang web của bạn.
Ngoài ràng buộc này, bạn có thể thêm một dòng nữa sẽ “gợi ý” vị trí đặt biểu tượng của bạn. Nó trông như thế này:
Cài đặt mã trong tiêu đề của trang web.
Kết luận
Vì vậy, sau khi đọc bài viết của chúng tôi, bạn đã tìm ra kích thước biểu tượng yêu thích cho một trang web và nó là gì. Ngoài ra, tôi nghĩ rằng bạn đã hiểu rằng việc tìm kiếm biểu tượng phù hợp cho tài nguyên của bạn là một điều cần thiết, bởi vì nó đóng vai trò quan trọng trong việc gia tăng sự công nhận và về một số điểm nổi bật khác giữa các đối thủ cạnh tranh của bạn. Ít nhất các trang web lớn nhất cũng làm như vậy, điều này có thể được lấy làm ví dụ điển hình. Và bên cạnh đó, nó không gây ra nhiều nỗ lực - sau khi tạo biểu tượng yêu thích một lần và cài đặt nó đúng cách trên trang web của bạn, bạn có thể quên nó trong vài tháng tới.
Vì vậy, hãy thoải mái thử nghiệm, nghĩ ra điều gì đó mới, thử - và mọi thứ sẽ thành công!
