Taking things for granted is human nature. Web Designers and Developers are no special in this regard; they often neglect small details.
Favicons and Manifest.Json are two such details. Although favicons get a fair share of attention, their role with manifest.json is rarely discussed.
In this article, we'll dive deeper into the role of these two elements and explore how they contribute to creating a better web design.
Favicons: A Brief Overview
Favicons have been around since the websites started. These are essential to web design, SEO, branding, credibility, bookmarking, and user experience; you name it.
You see bookmarks commonly in the browser tab and on the bookmark bar. Often, favicon is the only way to identify the currently browsed websites.
Favicons were typically 16x16 pixels or 32x32 pixels in size and were saved as .ico files.
However, now browsers allow .png and other image formats and also support large pixel sizes.
You identify the favicon on the website by the following code.
<link rel="icon" type="image/png" href="/path/to/favicon.png">This code specifies the favicon's location and its file type. It's almost always in the website's root directory to ensure a proper display.
Manifest.json: A Closer Look
The favicons have been a staple of web design for years; a more recent addition is the manifest.json file.
This file provides additional information about a website to the browser, such as the website's name, icon, and theme color.
The manifest.json file came with the arrival of Progressive Web Apps (PWAs). You can install these websites on a user's device, like a native app.
The manifest.json file is a simple JSON file that contains a set of key-value pairs. Here's an example of what a manifest.json file might look like:
{
"name": "Superdense.com",
"short_name": "superdense",
"start_url": "https://www.superdense.com",
"icons": [
{
"src": "/path/to/icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff"
}Let's break down what each of these key-value pairs means:
"Name": It's the name of the website that will be displayed when the website is installed as a PWA or added to the user's home screen.
"Short_name": A shorter version of the website name displayed in limited space scenarios (e.g., the user's home screen).
"Start_url": The URL of the website's primary entry point (e.g., the homepage).
"Icons": An array of images that represent the website. These icons are used in various places, such as the browser's tab bar and when the website is installed as a PWA.
"Theme_color": This is the website's primary color. You can customize this in the browser's UI to match the website's branding.
"Background_color": The website's background color customizes the PWA splash screen color.
Importance of Using a Manifest.json File
Using a manifest.json file has several benefits for both web developers and users. Here are a few reasons why using this file is important:
Improved User Experience: By using a manifest.json file, web developers can create an immersive and engaging experience for their users.
Using name, icon, and theme color, users identify and recognize the website when installed as a PWA or added to the user's home screen.
Increased Engagement: PWAs can increase user engagement by providing an app-like experience, even when not connected to the internet.
Users can interact with PWAs in the same way they interact with native apps, such as receiving push notifications and adding the app to their home screen.
Improved Performance: PWAs can also provide improved performance, as they can cache website data and work offline. This would reduce the need to download data from the server repeatedly.
How to Create a Manifest.json File
Creating a manifest.json file is pretty easy. Here are the steps to create a manifest.json file:
Open a text editor, i.e., VS Code, Sublime Text or Notepad.
Copy and paste this JSON code shown above into the text editor.
{
"name": "Superdense.com",
"short_name": "superdense",
"start_url": "/index.html",
"icons": [
{
"src": "/path/to/icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff"
}Modify the key-value pairs with your website's information. For example, update the "name" key with your website's name and the "icons" key with the path to your website's icon file.
Save the file as "manifest.json" in the root directory of your website.
Also, Link to the manifest.json file from your website's HTML code using the following code:
<link rel="manifest" href="/path/to/manifest.json">
Best Practices for Using Favicons and Manifest.json Files
Manifest.json is a requirement to install and run the PWA. The favicon image of the website is the icon image of the manifest.json.
So, using proper favicons with manifest.json files can improve the look and functionality of a website.
Here are some best practices to keep in mind.
Use a High-Quality Icon: When creating a favicon or icon for a manifest.json file, use a high-quality image, at least 192x192 pixels. The high pixel size ensures the icon looks crisp and clear on any device. Ideally, you provide a list of icons of various sizes, like Github does in https://github.com/manifest.json:
{
"name":"GitHub",
"short_name":"GitHub",
"start_url":"/",
"display":"standalone",
"icons":[
{
"sizes":"114x114",
"src":"https://github.githubassets.com/apple-touch-icon-114x114.png"
},
{
"sizes":"120x120",
"src":"https://github.githubassets.com/apple-touch-icon-120x120.png"
},
{
"sizes":"144x144",
"src":"https://github.githubassets.com/apple-touch-icon-144x144.png"
},
{
"sizes":"152x152",
"src":"https://github.githubassets.com/apple-touch-icon-152x152.png"
},
{
"sizes":"180x180",
"src":"https://github.githubassets.com/apple-touch-icon-180x180.png"
},
{
"sizes":"57x57",
"src":"https://github.githubassets.com/apple-touch-icon-57x57.png"
},
{
"sizes":"60x60",
"src":"https://github.githubassets.com/apple-touch-icon-60x60.png"
},
{
"sizes":"72x72",
"src":"https://github.githubassets.com/apple-touch-icon-72x72.png"
},
{
"sizes":"76x76",
"src":"https://github.githubassets.com/apple-touch-icon-76x76.png"
},
{
"src":"https://github.githubassets.com/app-icon-192.png",
"type":"image/png",
"sizes":"192x192"
},
{
"src":"https://github.githubassets.com/app-icon-512.png",
"type":"image/png",
"sizes":"512x512"
}
],
"prefer_related_applications":true,
"related_applications":[
{
"platform":"play",
"url":"https://play.google.com/store/apps/details?id=com.github.android",
"id":"com.github.android"
}
]
}Keep the File Sizes Small: To ensure a website loads quickly, keep the favicon and manifest.json file sizes small.
Loading speed is especially important for mobile users with limited data plans or sometimes slower internet speeds.
Test Across Multiple Browsers: Before deploying a website, test the favicon and manifest.json file across multiple browsers
This would help to display the icon in the manifest.json file correctly. As a side note, Safari often creates many problems for web developers.
Final Thoughts
Favicons and manifest.json files contribute to better web design.
Favicons help establish brand identity and improve the user experience. In comparison, manifest.json files provide additional information about the website to create immersive PWAs.
We tried to guide you in syncing these two together. So, your website stays user-friendly and keeps progressing in bookmarking and other industries. And it makes sure that you have great-looking icons in Superdense as your bookmark manager.
