Favicon, Touch-Icons, discover their importance and increase your visibility

palms-web-touch-icon-favicon-decouvrez-leur-importance-et-augmenter-votre-visibilite

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.

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">

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">

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"
}

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">

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”.