Chuyển tới nội dung chính

Blog entry by Lương Văn Hiếu

Cách thay đổi favicon trong Next.js

Cá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.

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.


  • Chia sẻ

Đánh giá