STDIO
Tìm kiếm gần đây
    • 0

    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.

    Võ Lê Huy

    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.

    Bugs

    Bugs

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

    Sản phẩm

    Đề xuất

    Dynamic Web Application với Eclipse Helios và Tomcat Server

    Dynamic Web Application với Eclipse Helios và Tomcat Server

    Hướng dẫn tạo ứng dụng web bằng IDE Eclipse Helios và Apache Tomcat Web ...

    Nguyễn Hoàng Vinh

    09/09/2017

    Khám phá thêm

    Hướng Dẫn Viết Game Zero Với Cocos2d-x - Phần 4: Hiện thực MainMenuScene

    Hướng Dẫn Viết Game Zero Với Cocos2d-x - Phần 4: Hiện thực MainMenuScene

    Hướng dẫn tạo màu nền cho background, tạo sprite gắn vào scene, tạo ...

    Lập Trình GameCocos2d-x

    05/03/2015

    Tạo QR Code với HTML5 - JavaScript

    Tạo QR Code với HTML5 - JavaScript

    Hướng dẫn tạo QR Code với JavaScript, Canvas, HTML5, tương thích các ...

    JavaScriptJavaScript Nâng Cao

    21/08/2014

    Hướng Dẫn Viết Game Zero Với Cocos2d-x - Phần 5: Hiện thực GameScene - Vẽ Suit

    Hướng Dẫn Viết Game Zero Với Cocos2d-x - Phần 5: Hiện thực GameScene - Vẽ Suit

    Hướng dẫn khởi tạo một layer mới trong game và vẽ các suit với Cocos2d-x

    Lập Trình GameCocos2d-x

    07/03/2015

    Làm Việc Nhóm với Team Foundation Server (TFS)

    Làm Việc Nhóm với Team Foundation Server (TFS)

    Hướng dẫn cách tạo một Team Foundation Server - TFS với Visual Studio ...

    Tuấn Trần

    18/08/2015

    Cách Sử Dụng Canva Để Tạo Hình Ảnh Đồ Họa, Infographics Và Các Bài Thuyết Trình Đẹp

    Cách Sử Dụng Canva Để Tạo Hình Ảnh Đồ Họa, Infographics Và Các Bài Thuyết Trình Đẹp

    Canva giúp tiết kiệm thời gian và cho phép bạn tạo hình ảnh đồ họa theo ...

    Linh Cao

    05/04/2020

    Tạo Chương Trình C++ Đầu Tiên Với Visual Studio

    Tạo Chương Trình C++ Đầu Tiên Với Visual Studio

    Hướng dẫn sử dụng Visual Studio tạo project C++ đầu tiên.

    Rye Nguyen

    27/07/2015

    Hướng Dẫn Viết Game Zero Với Cocos2d-x - Phần 7: Hiện thực GameScene - Button

    Hướng Dẫn Viết Game Zero Với Cocos2d-x - Phần 7: Hiện thực GameScene - Button

    Hướng dẫn gắn thêm các button vào game, và hiện thực hàm resetButton cho ...

    Lập Trình GameCocos2d-x

    12/03/2015

    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 - 2020