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.