Favicons là gì và cách sử dụng chúng

Favicon yêu thích của bạn là gì?

 

Biểu tượng yêu thích là một hình ảnh nhỏ riêng lẻ của một trang web được hiển thị bên cạnh thanh địa chỉ. Tùy thuộc vào trình duyệt, nó cũng xuất hiện trong dấu trang / dấu trang trong thanh công cụ dấu trang và thanh bảng hoặc dưới dạng lối tắt trên màn hình. Cái tên Favicon là sự kết hợp của hai từ tiếng Anh "favourite" và "icon", có thể dịch là "biểu tượng yêu thích". Microsoft đã giới thiệu sự đổi mới này với Internet Explorer 4. Ngày nay tất cả các trình duyệt đều hỗ trợ biểu tượng yêu thích

Mặc dù các trình duyệt hiện tại cũng có thể sử dụng các định dạng đồ họa phổ biến như GIF và JPEG dưới dạng favicon, David Parker, một nhà thiết kế web tại dịch vụ trợ giúp giấy, khuyên bạn nên sử dụng định dạng ICO. Định dạng khá lạ này có thể chứa một bộ sưu tập đồ họa ở các độ phân giải khác nhau. Trình duyệt chọn kích thước mà nó hiện cần.

Có một số lượng lớn các biểu tượng yêu thích được tạo sẵn trên Internet cho trang web của riêng bạn. Nếu bạn muốn tạo một biểu tượng yêu thích riêng lẻ, bạn có thể sử dụng bất kỳ trình tạo biểu tượng yêu thích nào, tạo biểu tượng yêu thích từ mọi bức ảnh chỉ với một vài cú nhấp chuột và đưa ra các mẹo về cách tích hợp nó. Một biểu tượng yêu thích đẹp là một phần của một thiết kế web tốt.

Sau khi tích hợp biểu tượng yêu thích, bạn có thể sử dụng bất kỳ trình xác thực biểu tượng yêu thích nào để kiểm tra biểu tượng yêu thích mà bạn đã tích hợp xem có lỗi không. Cả lỗi trong văn bản nguồn và lỗi trong đặc tả đường dẫn đều được công nhận. Trong phần tiếp theo, bạn sẽ tìm thấy câu trả lời cho các câu hỏi thường gặp liên quan đến hệ thống quản lý nội dung.

Giới thiệu Favicon
Thông thường người dùng các hệ thống quản lý nội dung (CMS) như Wordpress, Joomla hoặc Drupal tự hỏi mình làm thế nào để tích hợp một favicon riêng lẻ. Trong hầu hết các trường hợp, đã có một biểu tượng yêu thích demo mà bạn chỉ cần thay thế. Tuy nhiên, có rất nhiều câu hỏi mà chúng tôi sẽ cố gắng giải quyết trong phần văn bản sau.

 

Dán Favicon trong Wordpress
WordPress là một trong những hệ thống đã có favicon riêng trong thư mục gốc của phần mềm. Sau khi cài đặt, có một tệp favicon.ico. Điều này phải được thay thế bằng tệp favicon.ico mới, được cá nhân hóa. Nó thường xảy ra rằng trình duyệt không thay thế biểu tượng ngay lập tức vì các biểu tượng được lưu trữ trong bộ nhớ cache của trình duyệt. Khởi động lại hoặc xóa bộ nhớ cache của trình duyệt sẽ hữu ích trong trường hợp này. Nếu bạn sử dụng chủ đề WordPress của riêng mình, có thể xảy ra trường hợp mã để tích hợp biểu tượng yêu thích không có sẵn trong văn bản nguồn. Trong trường hợp này, bạn phải sao chép mã để tích hợp biểu tượng yêu thích vào vùng trong tệp header.php

 

Mã HTML
Có ba cách khác nhau để đưa biểu tượng yêu thích vào trang web của bạn. Lý do tại sao có những khả năng khác nhau là chức năng khác nhau của trình duyệt web (ví dụ: Firefox, Internet Explorer, v.v.).

Biểu tượng HTML Biến thể này là tiêu chuẩn HTML chính thức của W3C. Có thể sử dụng các định dạng đồ họa khác nhau (.ico, .png, .gif, .jpg, .svg). Loại MIME tương ứng và địa chỉ của đồ họa phải được chỉ định. Các loại kịch câm khác nhau được liệt kê dưới đây.

Biểu tượng lối tắt HTML Tuy nhiên, phải sử dụng một biến thể khác cho Internet Explorer. Vì kiểu tích hợp sau đây tương thích với hầu hết các trình duyệt, bạn nên sử dụng nó.

favicon.ico trong Thư mục gốc
Với biến thể này, không cần mã HTML, vì trình duyệt tự động tìm kiếm tệp "favicon.ico" trong thư mục gốc, nhưng không thể sử dụng định dạng nào khác ngoài định dạng ico. Vì không phải tất cả các trình duyệt đều hỗ trợ kỹ thuật này, nên chèn một trong các mã HTML ở trên vào văn bản nguồn. Thư mục gốc còn được gọi là thư mục chính, thư mục cơ sở hoặc "gốc" là cấp cao nhất của miền.

 

Các loại kịch câm

Ico
image / vnd.microsoft.icon
.jpg
image / jpeg
.gif
image / gif
.png
image / png
.svg
image / svg + xml

 

Chèn Favicon trong Joomla
Joomla cũng đã có một favicon demo trong thư mục gốc cần được thay thế. Tuy nhiên, cũng cần lưu ý ở đây rằng biểu tượng yêu thích phụ thuộc vào mẫu và cũng có thể nằm trong thư mục con của mẫu được sử dụng. Theo quy định, không có mã bổ sung nào phải được viết trong văn bản nguồn, chỉ có biểu tượng yêu thích được tải lên thư mục của mẫu

 

Chèn Favicon trong Drupal
Drupal có một chút đặc biệt khi nói đến favicon. Hầu hết thời gian, biểu tượng yêu thích không nằm trong thư mục gốc của CMS như thường lệ, mà nằm trong thư mục chính của mẫu. Nhưng nó cũng phải được thay thế ở đây.

 

Tìm con đường của Favicon
Tất nhiên, mọi phần mềm và mọi trang web đều khác nhau và có thể khác với các giải pháp được đề xuất. Do đó, tệp biểu tượng yêu thích có thể không được tìm thấy ngay lập tức, mặc dù biểu tượng yêu thích được hiển thị bởi trình duyệt. Trong trường hợp đó, bạn cũng có thể sử dụng bất kỳ trình xác thực nào để tìm đường dẫn của biểu tượng yêu thích.

 

Đôi nét về tác giả
Hannah Butler làm việc như một nhà phát triển và thiết kế web. Bên cạnh đó, cô ấy thích chia sẻ kinh nghiệm của mình dưới dạng các bài báo. Trong trường hợp này, cô ấy có phần riêng của mình trên trang web writemypaper4me.co . Trong tương lai, cô ấy sẽ bắt đầu viết blog để mô tả phương pháp làm việc của mình cho những người khác