What is favicon in website
A flutter favicon is a graphic Image or you can say it as a website logo icon that is assoiciated with a webiste. A favicon appears on a address bar i.e. in tabs of a browser when a website loads, it like a identity of a website.
How to change favicon in flutter web app
To add favicon icon in flutter web app, follow below steps:-
1. Generate logo – favicon.ico
A logo that you want to show as favicon icon in flutter web app, you need to generate graphic image(icon) of different dimension size (eg: 192 X 192, 512 X 512).
We can make use of online free tools called favicon generator
Drag & Drop your website logo over there, it will automatically generate icons with different dimension sizes. Look as below screenshot.
2. Paste generated icon in web folder of flutter project
Now, In flutter project
/web folder copy paste the generated icon of size 192 x 192.
/web/icons, paste all the above png images. For better understanding refer my project structure
3. Seting path of favicon in code
/web/index.html file, set path to new icon you added.
<!-- Favicon --> <link rel="icon" type="image/png" href="favicon.png"/>
<!-- Favicon --> <link rel="apple-touch-icon" href="icons/apple-touch-icon.png"> <link rel="icon" type="image/png" href="logo.png"/>
4. Change manifest.json icon filename
Then in manifest.json, set the path to the newly added favicon image, refer screenshot below