Mettre le logo d'un site sur l'onglet des navigateurs en HTML

Catégorie < html >

1FORMATIK.com
Espace ~public
© 1998 - 2024

Sommaire

  • Qu'est ce qu'un fichier logo favicon
  • Que doit contenir un fichier logo favicon
  • Créer le logo d'un site au format ICO avec un logiciel
  • Créer le logo d'un site au format ICO avec un service en ligne
  • Ajouter le fichier ICO et créer le code HTML
  • Cas particulier des Applications Web Progressive

Information

Rédigé par Antoine
Publié le 2024-01-22
Modifié le 2024-01-22
610 affichages
2 likes
0 non-like

Qu'est ce qu'un fichier logo favicon

Pour mettre le logo d'un site sur l'onglet des navigateurs web, on utilise un fichier favicon.

Un fichier favicon est un fichier d'icône utilisé pour représenter un site web. Il est généralement affiché dans l'onglet du navigateur, la barre d'adresse ou les favoris.

Le format de fichier le plus couramment utilisé pour les favicons est ICO, bien que d'autres formats tels que PNG, GIF ou JPEG puissent également être utilisés.

Le favicon est donc une petite image qui aide à identifier visuellement un site web. Il généralement utilisé pour renforcer la marque du site et faciliter sa reconnaissance dans les résultats de recherche des moteurs de recherche et dans les onglets de navigation des navigateurs web.

Que doit contenir un fichier logo favicon

Même si un favicon peut être de différents formats, il est préférable d'utiliser le format ICO.

Un fichier favicon au format ICO peut contenir plusieurs images avec différentes résolutions pour s'adapter à divers emplacements d'affichage. Le format ICO permet d'inclure dans un même fichier plusieurs icônes de différentes tailles et résolutions : 16x16 pixels, 32x32 pixels, etc.

Chaque image à l'intérieur du fichier ICO est labelisé ico-n. La première image peut être ico-0, la deuxième ico-1, et ainsi de suite. Les métadonnées du fichier ICO contiennent la nomenclature des différentes images avec leurs informations quant à leurs tailles et résolutions. Les navigateurs et d'autres logiciels utilisent ensuite la taille appropriée en fonction du contexte où l'icône est affichée.

Le fichier favicon de votre site web doit donc idéalement être au format ICO et contenir plusieurs tailles et résolutions.

Créer le logo d'un site au format ICO avec un logiciel

Dans tous les cas vous aurez besoin d'un logo ; pour créer votre logo vous pouvez utiliser un logiciel de conception graphique tel que PhotoShop, GIMP, Illustrator ou tout autre logiciel de votre choix. Assurez-vous que votre logo a des dimensions appropriées pour les différentes tailles d'icônes que vous souhaitez inclure.

Vous devrez ensuire redimmensionner votre logo car vous aurez besoin de différentes tailles d'icônes pour le favicon. Les tailles courantes incluent 16x16, 32x32, 48x48, 64x64, 128x128, et 256x256 pixels. Assurez-vous que votre logo est redimensionné pour chaque taille souhaitée.

Pour certains cas particuliers vous aurez également besoin du logo au format PNG avec des tailles de 180x180, 192x192 et 512x512 pixels ; ainsi qu'au format SVG avec une taille de 16x16 pixels. Ces cas particuliers sont explicités plus bas dans le tutoriel.

Il existe plusieurs logiciels spécialisés tels que IcoFX pour Windows ou Faviconer pour macOS ; ils permettent de générer un fichier ICO pour mettre le logo d'un site sur l'onglet des navigateurs, ou ailleurs.

Créer le logo d'un site au format ICO avec un service en ligne

Pour automatiser la création du fichier favicon au format ICO, vous pouvez utiliser le service en ligne ICO converter.

Il en existe plusieurs autres, une simple recherche sur les mots clés "favicon maker" ou "icon generator" vous permettront de les identifier rapidemment.

Ajouter le fichier ICO et créer le code HTML

Vous devez idéalement placer le fichier ICO à la racine de votre site internet.

Celui d'1FORMATIK.com est ainsi accessible à l'adresse https://www.1formatik.com/favicon.ico.

Vous devez ensuite ajouter une balise link dans la section head de votre fichier HTML.

<!DOCTYPE html>
<html>
<head>
<title>Titre de votre page</title>
<!-- Balise link pour le favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- Autres balises -->
</head>
<body>
<!-- Contenu de la page -->
</body>
</html>

En plus de la balise link pour le favicon, vous pouvez également utiliser d'autres balises link pour spécifier des icônes personnalisées pour des appareils particuliers. Selon ces appareils, les icones devront être soit au format PNG, soit au format SVG, avec des tailles bien précises.

Les balises link pour spécifier des icônes pour des appareils particuliers sont généralement utilisées pour améliorer l'expérience utilisateur sur différentes plates-formes.

Voici quelques-unes des balises link couramment utilisées :

  • La balise link avec l'attribut rel="apple-touch-icon" spécifie une icône pour les appareils iOS avec une taille de 180x180 pixels.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  • La balise link avec l'attribut rel="mask-icon" spécifie une icône au format SVG, pour le navigateur Safari, sur Mac, avec une taille de 16x16 pixels.
<link rel="mask-icon" href="/safari.svg" color="#000000">

La valeur color="#000000" spécifie la couleur du masque qui sera utilisée pour l'icône épinglée dans Safari sur macOS. Cette couleur ne correspond pas à la couleur réelle de l'icône, mais plutôt à la couleur de fond du masque. Lorsque l'utilisateur épingle votre site dans la barre d'onglets, l'icône apparaîtra avec un arrière-plan utilisant le masque spécifié par l'image SVG. La couleur définie par color sera utilisée pour remplir la partie découpée.

  • La balise link avec l'attribut rel="icon" spécifie une icône pour les appareils Android avec une taille de 192x192 pixels.
<link rel="icon" sizes="180x180" href="/android.png">

Cas particulier des Applications Web Progressive

Pour déclarer une favicon pour une application web progressive, vous devez déclarer les icônes dans un fichier site.webmanifest au format JSON.

Assurez-vous d'avoir différentes tailles d'icônes pour prendre en charge les différentes résolutions d'écrans de ces applications. Les tailles recommandées sont généralement 192x192 et 512x512.

{
  "name": "1FORMATIK PWA",
  "short_name": "1FO App",
  "description": "Bienvenue sur 1FORMATIK.",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
      {
            "src": "/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
      },
      {
            "src": "/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
      }
  ]
}

Vous devez ensuite ajouter le fichier site.webmanifest à la racine de votre site web et déclarer ensuite le fichier dans votre page HTML :

<link rel="manifest" href="/site.webmanifest">

Dès lors les navigateurs compatibles avec les Applications Web Progressive utiliseront ces informations pour personnaliser l'apparence de l'application sur l'écran d'accueil de l'utilisateur.

Ce contenu vous a-t-il été utile ?

Autres publications dans la catégorie <html>

Publication Date Lien
Mettre le logo d'un site sur l'onglet des navigateurs en HTML2024-01-22
Créer un lien hypertexte en HTML ou en JavaScript2024-01-21
Quelles sont les différences entre une CLASS et un ID HTML2024-01-17
Comment bien redimensionner et optimiser une image HTML2024-01-01

Catégories

windowshtmlgameryoutubejavascriptappleréseaumicrophonebluetoothinternet

Faire un don

Soutenez-moi par un don.

Par avance, merci.

Faire un don à 1FORMATIK.com