Search…

Hướng Dẫn Tạo Favicon cho Web với ToICO

20/07/20202 min read
Hướng dẫn convert png sang ico online không cần cài đặt thêm phần mềm và sử dụng favicon cho website.

Favicon (viết tắt của Favorite Icon) là một hình ảnh, một biểu tượng dù rất nhỏ nhưng nó mang lại hữu ích, trải nghiệm rất tốt cho người dùng, qua đó có thể thấy được sự tỉ mỉ của các lập trình viện web.

Favicon (viết tắt của Favorite Icon) được giới thiệu lần đầu tiên vào năm 1999 với sự hỗ trợ của trình duyệt Internet Explorer 5.0.

Favicon là một hình ảnh, một biểu tượng thu nhỏ nằm kế bên trái của tiêu đề hoặc địa chỉ của trang web, cũng có thể là của một biểu tượng shortcut. Favicon được tạo ra với tác dụng giúp cho người dùng dễ dàng nhận ra được nội dung, những tính năng, dịch vụ mà trang web của bạn mang lại.

favicon-sample-bug-vn

Thông qua bài viết này, Bugs giới thiệu:

  • 1 số thông tin về favicon.
  • Tích hợp ICO vào HTML.
  • Ứng dụng chuyển đổi PNG sang ICO - 2Ico (convert PNG to ICO online) không cần cài đặt thêm phần mềm.

Trình duyệt tương thích với hình ảnh

Browser ICO PNG GIF Animated GIFs JPEG APNG SVG
Edge Yes Yes Yes No Unknown Unknown Unknown
Firefox 1.0 1.0 1.0 Yes Yes 3.0 41.0
Google Chrome Yes Yes 4.0 4.0 4.0 No No
Internet Explorer 5.0 11.0 11.0 No No No No
Opera 7.0 7.0 7.0 7.0 7.0 9.5 44.0
Safari Yes 4.0 4.0 No 4.0 No No

Đưa favicon vào trang web

Hiện tôi có thư mục như sau:

Viết đoạn mã HTML để chèn Favicon vào trang web (trong trường hợp dùng favicon.png).

Đoạn code cần chèn là

<link rel="icon" type="image/png" href="favicon.png"/>

<!DOCTYPE html>
<html>
    <head>
        <title>Favicon</title>
        <link rel="icon" type="image/png" href="favicon.png" />
    </head>
</html>

Giả sử bạn dùng favicon.ico thì dùng đoạn code là

<link rel="icon" type="image/ico" href="favicon.ico"/>

<!DOCTYPE html>
    <html>
        <head>
            <title>Favicon</title>
            <link rel="icon" type="image/png" href="favicon.png" />
    </head>
</html>

PNG hay ICO?

Nếu đề cập về sự phổ biến của anh, có thể thấy PNG phổ biến hơn, trong 1 số hiếm trường hợp cần tương thích với các trình duyệt web cũ, bạn có thể sử dụng ICO.

Nếu loại trừ yếu tố tương thích, thì ICO khác biệt PNG ở khả năng lưu trữ nhiều kích thước ảnh cùng lúc, khi cần sử dụng ở 1 kích thước phù hợp, trình duyệt web hoặc các chương trình đọc sẽ tìm kích thước ảnh phù hợp đang được lưu trữ trong ICO sẽ cho ra khả năng hiển thị tốt hơn.

Công cụ ToICO chuyển đổi favicon.ico

Trong trường hợp bạn cần 1 công cụ chuyển đổi ảnh PNG sang ICO, bạn có thể sử dụng các phần mềm hỗ trợ, hoặc plugin của Photoshop. Tuy nhiên, công việc chuyển đổi này không phải thực hiện thường xuyên, sẽ tốn nhiều công sức cài đặt.

Do đó, Bugs phát triển 1 công cụ online miễn phí để hỗ trợ bạn, bạn có thể sử dụng tại đây.

IO Stream

IO Stream Co., Ltd

30 Trinh Dinh Thao, Hoa Thanh ward, Tan Phu district, Ho Chi Minh city, Vietnam
+84 28 22 00 11 12
developer@iostream.co

383/1 Quang Trung, ward 10, Go Vap district, Ho Chi Minh city
Business license number: 0311563559 issued by the Department of Planning and Investment of Ho Chi Minh City on February 23, 2012

©IO Stream, 2013 - 2024