Comment ajouter un favicon multi-navigateur à votre documentation HTML générée

On nous a demandé sur FaceBook, s’il était possible d’attribuer un favicon à une construction d’aide HTML générée par HelpNDoc. C’est une excellente question et la réponse est oui, tout à fait, grâce au puissant système de modèle d’HelpNDoc. Voyons comment cela peut être fait en créant d’abord notre favicon, puis notre propre modèle personnalisé qui utilisera ce favicon.

Créer un favicon compatible multi-navigateur

La plupart des navigateurs Web, sont capables d’utiliser les fichiers images PNG, pour le favicon. Ce n’est pas le cas pour Internet Explorer, les téléphones ou les tablettes. Préparons ces fichiers icônes.

Voici les principaux formats de fichiers icônes que nous devrons préparer, de manière à être sûrs de supporter autant de navigateurs Web que possible:

• favicon.ico: C’est un fichier ICO pour Internet Explorer. Ce fichier doit contenir des icônes d’au moins 16x16 pixels et 32x32 pixels. X-Icon Editor est une excellente ressource gratuite pour créer des fichiers ICO.
• favicon.png: C’est une version haute résolution du fichier favicon.ico. Il sera utilisé par tous les autres navigateurs Web et sa taille doit être d’au moins 64x64 pixels, puisqu’il sera redimensionné automatiquement lorsque nécessaire.

Aujourd’hui, il n’est pas rare que les lecteurs de votre documentation HTML, l’épinglent à leurs tablettes ou à leurs téléphones et l’utilisent comme une application. Il est donc recommandé que vous créiez des icônes spécifiques, pour vous assurer qu’elles seront aussi belles que possible sur n’importe quel appareil. Comme ce n’est pas le but de cet article, nous vous encourageons à consulter l’article de blog fréquemment mis à jour de Mathias Bynens, “Everything you always wanted to know about touch icons” afin d’en apprendre plus sur les différents appareils et les tailles des icônes.
On peut dire la même chose de Windows 8 Metro UI tiles.

Créer un nouveau modèle HelpNDoc

Maintenant que nos images favicon sont prêtes, nous allons devoir créer un nouveau modèle HTML, afin que nous puissions le modifier et y ajouter notre favicon. Nous allons utiliser le modèle HTML par défaut, comme base de départ.

Il est fortement recommandé de ne jamais modifier les modèles standard d’HelpNDoc: ce sont les modèles fournis avec HelpNDoc et qui sont susceptibles de changer à chaque nouvelle version. Il est assez facile de créer un nouveau modèle basé sur les modèles par défaut. Voici comment cela peut être fait:

• Localisez le répertoire d’installation d’HelpNDoc. Habituellement, il s’agit de “C:\Program Files\IBE Software\HelpNDoc” ou de “C:\Program Files (x86)\IBE Software\HelpNDoc”
• À l’intérieur du répertoire d’installation d’HelpNDoc, se trouve le modèle HTML par défaut que nous avons besoin de copier. Localisez et copiez ce répertoire: “templates\html\default”
• Collez ce répertoire dans votre répertoire de modèles HTML personnalisés. Il s’agit généralement de “Mes Documents\HelpNDoc\Templates\html”
• Pour nous assurer que ce modèle est unique, nous devons d’abord renommer le répertoire collé: de “default” à “favicon” par exemple
• Nous avons également besoin d’éditer le fichier “template.info” dans ce répertoire pour changer “name=Default HTML Template” en “name=favicon template” par exemple

Et nous avons terminé. HelpNDoc va maintenant reconnaître ce modèle et l’afficher dans la fenêtre “Générer la documentation”. Nous pouvons maintenant le modifier pour ajouter notre favicon.

Ajouter un favicon à notre modèle nouvellement créé

Maintenant que le modèle est prêt à être modifié, nous allons devoir faire quelques modifications pour pouvoir ajouter notre favicon.

Il y a deux étapes pour mettre à jour ce modèle nouvellement créé et y ajouter notre favicon.
Nous devons d’abord copier le favicon précédemment créé dans le sous-dossier “assets” de ce modèle. Le sous-dossier “assets”, sera exporté tel quel par HelpNDoc, à la racine de votre documentation finale, c’est donc là que vous pouvez placer tous les fichiers valises, comme les fichiers favicon, CSS et Javascript.
Ensuite, nous devons éditer le fichier “index.pas.html”, pour ajouter des liens vers notre favicon. Il suffit d’ajouter le code suivant avant la balise HTML </ head> dans ce fichier:

<link rel="icon" href="favicon.png">
<!--[if IE]>
	<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
<![endif]-->

Et c’est tout! Vous pouvez maintenant générer votre documentation HTML après vous être assuré d’avoir sélectionné le modèle nouvellement créé: il affichera comme prévu le favicon dans tous les navigateurs Web.
Remarque: Internet Explorer n’affiche pas le favicon si vous affichez votre documentation HTML localement. Vous devrez d’abord le télécharger vers votre serveur Web. Les autres navigateurs Web n’ont pas cette limitation.

Voir aussi...

L'arme secrète des rédacteurs techniques : les avantages uniques de l'analyseur de caractères de HelpNDoc

HelpNDoc est une solution de choix pour les professionnels qui cherchent à créer une documentation de haute qualité, attrayante et conviviale. Cependant, ce n’est pas seulement son interface …

Lire la suite →

Obtenir le meilleur de HelpNDoc : Comment la fonctionnalité "Conserver les fichiers temporaires" peut-elle aider les rédacteurs techniques ?

Lorsque l’on travaille sur de la documentation technique, chaque outil et chaque fonctionnalité à notre disposition peut faire une grande différence en termes de productivité et d’efficacité. L’une de …

Lire la suite →

Revitalisez vos fichiers d'aide : Convertir les anciens fichiers WinHelp HLP en documentation moderne avec HelpNDoc

À une époque où l’information est consommée sur une pléthore d’appareils et de plateformes, les fichiers WinHelp HLP classiques - autrefois la norme en matière de documentation d’aide basée sur …

Lire la suite →

Maîtriser la publication multicanal : pourquoi HelpNDoc laisse WordPress dans la poussière

Dans le monde numérique interconnecté d’aujourd’hui, le concept de publication multicanal est devenu plus critique que jamais. Alors que le public recherche des informations sur différentes …

Lire la suite →