How to add favicon to a Flutter web app

Every mobile app has a unique app icon which allows the user to visually differentiate an app.

Mobile apps have app icons where as websites use favicons.

Steps:

I have created a Flutter web project and called it as Quizzer,

1. Design a logo for your favicon, I used canva.com
2. Save the icon in png format to your device(in my case, Q.png).
3. Open favicon-generator.org and upload the icon that was saved.

4. After clicking on create, download the generated favicon and move it to your project’s web folder.(Quizzer/web/favicon.ico)

4.(a) Click on Download the generated favicon

4.(b) Add the generated favicon under the web folder of your project

5. Head over to index.html in the web folder of your project and add the following link tag under head section:
<link rel=”icon” href=”favicon.ico”>

6. Save and close index.html, hot restart the project and the favicon appears!