thêm Favicon vào cho website

2021-01-19 2672 lượt xem

Mục lục [ hide ]

Làm thế nào để thêm favicon vào website
- Cách 1 -Để cho trình duyệt tự động lấy favicon
- Cách 2 -Dùng hình bình thường và xác định nó trong code
Vấn đề

Favicon không phải là khái niệm mới. Nó đã xuất hiện từ lâutrên các trình duyệt và với các lập trình viên việc thêm 1 favicon là khá dễ dàng. Nhưng nếu bạn thêm không chuẩn thì việc sảy ra ảnh nhỏ, xấu là điều không thể tránh khỏi.

trước tiên mình sẽ nói cách là thông thường mà sẽ gặp tình huống fail nhwung trước hết hãy xem cách làm thông thường đã:

Làm thế nào để thêm favicon vào website

Cách 1 -Để cho trình duyệt tự động lấy favicon

Hầu hết các trình duyệt sẽ tự động xác định file favicon.ico đặt trên thư mục website của bạn và đặt nó làm icon của website. ví dụ website của mình là https://ebudezain.com thì trình duyệt sẽ mặc định favicon là đường dẫn https://ebudezain.com/favicon.ico

Cách 2 -Dùng hình bình thường và xác định nó trong code

Chúng ta cũng có thể hoàn toàn thêm ảnh vào web sau đó báo cho trình duyệt biết favicon của bạn ở đường dẫn nào bằng code html trong cặp thẻ head.

<!DOCTYPE html>
<html lang="en">
<head>
    ....
    <link rel="shortcut icon" type="image/png" href="/images/favicon.png"/>
    ....
</head>
<body>
    ....
</body>
</html>

Vấn đề

bạn có thể nhìn thông qua màn hình iphone khi hiện thị các favicon đó nhìn nó xấu và mờ như này:

các favicon của youtube hay booking nhìn mộng mơ thì favicon của mình như cứt luôn. Và cách sửa lại mình hay làm như sau:

vào link này: https://www.favicon-generator.org/

Chọn ảnh và bấm create favicon

rồi bấm download về. giải nén và sửa lại như sau:

<!DOCTYPE html>
<html lang="en">
<head>
    ....
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    ....
</head>
<body>
    ....
</body>
</html>

Sau đó bạn xem thành quả nha

chủ đề