Facebook
18
Tháng 11Cách thay đổi favicon trong Next.js
Trong bài hướng dẫn này, chúng ta sẽ tìm hiểu về cách thay đổi favicon mặc định trong ứng dụng next.js.
Bước 2: Chuyển đến thư mục
Bước 3:
Thêm
pages/index.js
Lưu ý: Đường dẫn file
Tương
tự, nếu bạn có một favicon ở định dạng
Thay đổi favicon
Bước 1: Mở ứng dụng next.js trong trình soạn thảo code.Bước 2: Chuyển đến thư mục
public và thêm favicon mới bằng cách thay thế favicon cũ.Bước 3:
Thêm
favicon tới component <Head> của pages như sau:pages/index.js
import Head from 'next/head'
export default function Home() {
return ( <div className="container"> <Head> <title>Next App</title> <link rel="icon" href="/favicon.ico" /> </Head> <p>code khác ở đây...</p> </div> ) }
Lưu ý: Đường dẫn file
favicon.ico nên là /favicon.ico không nên là /public/favicon.ico
Bước 4: Khởi động lại server bằng chạy lệnh npm run dev và tải lại ứng dụng next.js để thấy favicon mới.Tương
tự, nếu bạn có một favicon ở định dạng
.png hoặc .jpg thì bạn cũng có thể làm theo các bước trên.
Đánh giá