1. Tìm hiểu về 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:
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:
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:
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,
Lục Đức Thành
Latest posts by Lục Đức Thành (see all)
- Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
- Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
- WordPress 5 có gì mới? - 23/12/2018
- Sublime Text 3 Portable Windows 64 bit - 11/12/2017
- Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017