Update the Favicon
A Favicon is an icon that appear on the tab for a page next to the page’s title. Favicons help boost visibility in the user’s browser and help strengthen the website’s brand identity. Changing the default favicon of a Next.js application is one of the first things you can do when branding your website.
The demo app includes two favicons: the default Next.js one (public/favicon2.ico
) and the McMaster favicon (public/favicon.ico
), which was downloaded from the McMaster University Brand Standards Website Favicon Folder.
To change the favicon of your SPA, open the app/layout.tsx
file and modify the metada
constant by changing the icon
attribute to /favicon.ico
as shown below:
export const metadata: Metadata = {
title: 'RSD Workshop App', // title of the application shown in the browser tab
description: 'Generated by create next app',
viewport: 'width=device-width, initial-scale=1',
icons: {
icon: '/favicon.ico', // favicon shown next to the title in the broswer tab
},
}
Default Favicon | McMaster Favicon |
---|---|
Since browsers often cache website favicons, you may need to clear your browser cache or open the website in an incognito window for the updated icon to appear.