You need to ensure that the browser shows the correct title text and icon in a Browser tab. Further, a manifest file should be created that implements specific icons for various mobile operating systems, so that if a user pins your website, a desirable icon is displayed similar to other app icons on a phone. This will ensure that if a user favorites or pin your web app on their mobile device's home screen, they'll get a native-looking app icon:
- Create or obtain an SVG version of your website's logo from a designer or site like https://www.flaticon.com
- In this case, I will be using a particular lemon image:
LemonMart's signature logo
When using images you find on the internet, pay attention to applicable copyrights. In this case, I have purchased a license to be able to publish this lemon logo, but you may grab your own copy at the following URL, given that you provide the required attribution to the author of the image: https://www.flaticon.com/free-icon/lemon_605070.
- Generate favicon.ico and manifest files using a tool such as https://realfavicongenerator.net
- Adjust settings for iOS, Android, Windows Phone, macOS, and Safari to your liking
- Ensure that you set a version number, favicons can be notorious with caching; a random version number will ensure that users always get the latest version
- Download and extract the generated favicons.zip file into your src folder
- Edit the angular.json file to include the new assets in your app:
angular.json
"apps": [
{
...
"assets": [
"src/assets",
"src/favicon.ico",
"src/android-chrome-192x192.png",
"src/favicon-16x16.png",
"src/mstile-310x150.png",
"src/android-chrome-512x512.png",
"src/favicon-32x32.png",
"src/mstile-310x310.png",
"src/apple-touch-icon.png",
"src/manifest.json",
"src/mstile-70x70.png",
"src/browserconfig.xml",
"src/mstile-144x144.png",
"src/safari-pinned-tab.svg",
"src/mstile-150x150.png"
]
- Insert the generated code in the <head> section of your index.html:
src/index.html
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=rMlKOnvxlK">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=rMlKOnvxlK">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=rMlKOnvxlK">
<link rel="manifest" href="/manifest.json?v=rMlKOnvxlK">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=rMlKOnvxlK" color="#b3ad2d">
<link rel="shortcut icon" href="/favicon.ico?v=rMlKOnvxlK">
<meta name="theme-color" content="#ffffff">
- Ensure that your new favicon displays correctly
To further your branding, consider configuring a custom Material theme and leveraging https://material.io/color, as discussed in Chapter 5, .