Configure Favicon to be compatible in all browsers
2 min read
go to What is Favicon? sectionWhat is Favicon?
Favicon, which stands for “favorite icon,” is a small icon that appears next to the title of a web page on the browser tab. In fact, we add this favicon to the PWA website to display the icon on mobile or desktop.
example is the RW logo on the tab brochure above.
go to Favicon Function sectionFavicon Function
- Website Identity
Like a brand mark or identification mark on a website. the point is actually just to distinguish it from other websites. for example, if the config is not configured, it will be like,
- Visual Identity
The point is that the favicon becomes one of the mandatory visual identities. like when our site is opened, added to the home screen or our site is bookmarked. this favicon can be a way of branding and adding credibility so that our site looks professional.
go to Favicon Generate Tool sectionFavicon Generate Tool
There are many tools used to make one design into several formats and sizes. One of the most recommended in my opinion, realfavicongenerator.net. We can set compatibility specifically on many platforms.
The way to generate a favicon, by preparing an icon in image format.
Tips for creating a favicon design and also for improving its quality,
- Choose a simple and recognizable design
- Using solid, flat colors
- Avoiding Favicons that are too complicated or too small
Opti generate favicon in realfavicongenerator.net can also optimize on several platforms,
- Desktop brochers and search engines,
- IOS
- Android chrome
- Window
Generate Favicon Result
After generating the icon in realfavicongenerator.net there is an option to set the version of the existing icon. After the processgenerate is complete, it will be redirected to the instruction page for favicon installation.
we just download the package and we enter the code in <Head> The most recommended tool for generating favicons