From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Configuring favicon using image files

Configuring favicon using image files - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Configuring favicon using image files

“

Favicon is presenting the application's icon, which is placed on the web browser tab, phone, home screen, and search engine results. We haven't configured any favicon, but here it is displayed because Next.js applies favicon by giving specific files. Basically it follows the file conventions. In fact, there are two ways to configure the favicon. First is by using image files, which may have an extension of .ico, .jpg or .png. And second is by using the code which you type in .js, .ts or .tsx file. If you have a file named favicon, icon or apple-icon with extension of .ico, .jpg or png, then that file is treated as a fav icon. And here you can see that we already have one. Let me change the name to fav only. And now you see the fav icon is gone. However, if I change the fav to icon and check, then it is working fine. Let's also check with the name apple hyphen icon and still it works the same. So when it comes to putting a favicon, you just have to give the file name that's an easier…

Contents