STDIO
Tìm kiếm gần đây
    Nội dung
    0
    0
    Chia sẻ
    Nội dung
    0
    0
    Chia sẻ

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

    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.
    26/05/2018 20/07/2020 2 phút đọc
    Hướng Dẫn Tạo Favicon cho Web với ToICO

    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.

    0 Bình luận
    Bugs

    Bugs

    Chuyện của những nhà phát triển.

    Khi bạn nhấn vào sản phẩm do chúng tôi đề xuất và mua hàng, chúng tôi sẽ nhận được hoa hồng. Điều này hỗ trợ chúng tôi có thêm kinh phí tạo nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO

    Trang chính

    Công ty TNHH STDIO

    • 30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
      +84 28.36205514 - +84 942.111912
      developer@stdio.vn
    • 383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
      Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012
    ©STDIO, 2013 - 2021