Favicon và cách sử dụng

1. Tìm hiểu về Favicon

Favicon

Favicon

Favicon hay Favorite icon được dùng để tạo icon cho các trang web, nó được dùng như là shortcut icon, Web site icon, tab icon hoặc bookmark icon.

Kích thước của Favicon thường là 16×16, 32×32, 48×48, hoặc 64×64, độ sâu màu là 8-bit, 24-bit, hoặc 32-bit. Favicon hỗ trợ các định dạng file .ico, .png, .gif

Một cách đơn giản và phổ biến, tương thích với tất cả các trình duyệt, Favicon trên các trang web thường là: 16×16, 8-bit màu, định dạng .ico

2. Cách tạo Favicon cho các trang web

Để tạo Favicon cho các trang web, bạn chỉ cần:

1. Đặt file favicon.ico vào thư mục gốc của web

2. Chèn đoạn code sau trong phần <head> của trang web:

HTML Code:
1
2
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">

Vậy là xong!

Để làm việc sâu hơn với Favicon, như hiển thị icon tốt hơn cho các màn hình Retina chẳng hạn, bạn có thể phải cấu hình và chuẩn bị nhiều hơn:

HTML Code:
1
2
3
4
5
6
7
8
9
10
11
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
 
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
 
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
 
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch- icon-precomposed.png">

3. Cách tạo Favicon trong WordPress

Để tạo FavIcon cho các trang web xây dựng bằng WordPress:

1. Đặt file favicon.ico vào thư mục gốc của Theme

2. Chèn đoạn code sau trong phần <head> của file header.php:

HTML Code:
1
2
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" type="image/x-icon">
<link rel="icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" type="image/x-icon">

4. Công cụ tạo favicon.ico

Có rất nhiều công cụ hỗ trợ tạo file .ico, cài đặt có, dùng công cụ online cũng nhiều. Với bản cài đặt trên Desktop, “IconCool Studio” là một phần mềm khá mạnh mẽ, quen thuộc.

Riêng với file favicon.ico đặt biệt này, có rất nhiều công cụ online hỗ trợ, các công cụ này cũng na ná nhau, tuy nhiên chất lượng hình ảnh của file favicon.ico được tạo ra có khác nhau đôi chút. Qua kinh nghiệm sử dụng, tôi thấy công cụ online FavIcon Generator của DynamicDrive.com là khá ổn. Công cụ này giúp bạn chuyển đổi các file ảnh như gif, jpg, png sang file favicon.ico.

Bạn truy cập vào địa chỉ http://tools.dynamicdrive.com/favicon/, Click lên “Chọn tệp tin” (hoặc kéo thả) để chọn một file ảnh có kích thước vuông, rồi click lên nút “Create Icon“, đợi một chút, rồi, click lên nút “Download FavIcon” để tải file favicon.ico về, xong!

Trang này còn “bonus” luôn cho bạn đoạn code để chèn Favicon vào web trong phần hướng dẫn bên dưới “More information on favicon

Qua kinh nghiệm sử dụng, tôi thấy trang https://www.favicon-generator.org/ cho kết quả còn sắc nét hơn cả trang DynamicDrive!

Bạn có thể vào trang IconArchive.com để tìm kiếm rất nhiều icon đẹp miễn phí, nếu bạn không muốn tự thiết kế.

Favicon là một kỹ thuật nhỏ, rất đơn giản. Chúc bạn thành công!

Tài liệu, từ khóa để tìm hiểu thêm về favicon:

– Favicon trên trang WikiPedia

– Don’t Forget About Favicons on Retina Screens

– Favicon Online Tool, FavIcon Generator, FavIcon Maker

– Retina FavIcon

– Icon Editor

Cheers,

AZDigi - Hosting WordPress tốt nhất!
The following two tabs change content below.
Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Bình luận

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

*
*
Website