Favicon, Touch-Icons, discover their importance and increase your visibility
Last Updated:
By making it easier for users to navigate, the Favicon and Touch-Icons have become indispensable elements of Web interfaces.
Favicon vs Touch-Icons
The Favicon is an icon that appears in the address bar, bookmarks, tabs of a web browser. The icon generally takes the logo of the site to make it appear in miniature. By facilitating the identification of the site by the user, the Favicon is an essential element of the visual identity.
Touch-Icons characterize the icons that are displayed on mobile devices. Originally designed for Apple (Apple’s touch icons are displayed in Safari mobile), they now work on Android.
Favicon integration
The Favicon must be square and measure at least 180×180 pixels.
Microsoft recommends the following formats for its browsers: 16×16, 32×32 and 48×48 and Apple a format of 180×180.
Once the file is created, you must upload it to the root of your FTP account associated with your domain. Now insert the tag below between the “head” tags of your HTML code (header.php or index.html).
<link rel="shortcut icon" type="image/x-icon" href="https://domaine.com/favicon.ico">Replace “https://domaine.com/favicon.ico” by the path of your file.
Touch-Icons integration
Touch-Icons are variations of your Favicon in different formats. Once the variation is created, you must upload it to the root of your FTP account associated with your domain. Now insert the tags below between the “head” tags of your HTML code (header.php or index.html).
<!-- Favicon / Touch-Icons -->
<link rel="apple-touch-icon" sizes="57x57" href="https://domaine.com/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://domaine.com/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://domaine.com/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://domaine.com/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://domaine.com/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://domaine.com/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://domaine.com/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://domaine.com/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://domaine.com/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://domaine.com/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://domaine.com/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://domaine.com/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://domaine.com/favicon-16x16.png">Be sure to respect the different file formats and to replace “https://domaine.com/” by the path of your files.
In order to display the Touch-Icons you must create a “manifest.json” file and upload it to the root of your FTP account associated with your domain:
{
"name": "NAME",
"short_name": "NAME",
"icons": [
{
"src": "https://domaine.com/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://domaine.com/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}Be sure to replace “NAME” by the name of your site, to respect the different file formats and replace “https://domaine.com/” by the path of your files.
Once these files have been created and uploaded to the root of your FTP account associated with your domain, you can insert the following tags in the “head” of your HTML code (header.php or index.html).
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="https://domaine.com/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">To customize your Touch-Icons, you can change colors of meta tags.
Use a generator to create your Favicon and Touch-Icons
To simplify the creation and integration of your Favicon and Touch-Icons, you can use the realfavicongenerator.net generator or its equivalent plugin for the WordPress Favicon CMS by RealFaviconGenerator.
Add your Touch-Icon
To integrate your quick access icon to your website on your mobile devices, go to the home page of your site by opening Safari. Click on the share button at the bottom of the screen, select “Add to home screen”.