Comment insérer une image dans le titre d'une page Web avec Dreamweaver

Étape 1

Sélectionnez une image appropriée Les favicons sont très petits et ne mesurent que 16 pixels carrés. L’image sélectionnée doit donc être assez simple pour être lisible en miniature. Les logos complexes semblent serrés ou peuvent présenter des bords irréguliers lors du redimensionnement à 16 pixels. Si cela vous arrive, envisagez d'utiliser une autre image n'incluant pas votre logo, mais reflétant plutôt le type de contenu de votre site Web ou la gamme de couleurs figurant sur le site. Dans tous les cas, assurez-vous que votre image est un carré parfait pour assurer une réduction.

Étape 2

Changer la taille de l'image. Après avoir choisi une image à réduire, ouvrez le fichier dans Photoshop. Dans le menu situé en haut de l'écran, sélectionnez "Image", puis cliquez sur "Taille de l'image". Dans la boîte de dialogue qui apparaît, modifiez la largeur et la hauteur de l'image en 16 pixels, puis cliquez sur "OK".

Étape 3

Enregistrez votre image sous forme de fichier GIF ou PNG. Ces types de fichiers ne présentent pratiquement aucun problème lorsqu'ils doivent être convertis au format ICO à l'étape suivante. Pour enregistrer votre image dans l'un de ces formats, sélectionnez "Fichier" dans le menu principal de Photoshop, puis "Enregistrer sous". Nommez le fichier favicon, cliquez sur le menu déroulant situé sous le champ du nom du fichier et sélectionnez l’option "GIF" ou "PNG".

Étape 4

Convertir l'image au format ICO. Photoshop ne peut pas enregistrer ce type de fichier seul. Au lieu de cela, vous devez télécharger un connecteur ou utiliser un utilitaire Web. Par exemple, utilisez le générateur de favicon gratuit disponible sur le site Web "favicon.cc" (voir Références). Sur la page principale de ce site, cliquez sur le bouton "Importer une image". Localisez le fichier GIF ou PNG créé à l'étape 3 et cliquez sur "Télécharger". En quelques secondes, l'utilitaire transformera votre fichier en une image de 16 pixels carrés. Pour l'enregistrer sur votre ordinateur au format ICO, recherchez le titre portant le libellé "Aperçu" en bas de la page, puis cliquez sur "Télécharger le favicon". Enregistrez ce fichier dans le dossier avec le reste des fichiers de vos pages Web.

Étape 5

Ajoutez le favicon à votre site web. Vous lierez des pages Web individuelles de la même manière que les fichiers externes, tels que JavaScript et CSS. Ouvrez votre page Web avec Dreamweaver, puis modifiez le code en sélectionnant l'option "Afficher" dans le menu en haut de l'écran, puis cliquez sur l'option "Code". Ensuite, il inclut les balises de code suivantes: Ce code suppose que l’icône favicon existe dans le dossier de l’image. Si vous placez le favicon ailleurs, mettez à jour l'emplacement du contenu. Pourquoi avez-vous besoin d'inclure deux liens? Pour la compatibilité entre les navigateurs. Internet Explorer 7 gère les favicons de manière différente des autres navigateurs et requiert une seule règle pour garantir une présentation correcte.

Étape 6

Enregistrez votre page Web, puis ouvrez-la dans votre navigateur. Maintenant, vous verrez votre favicon. Si votre navigateur était déjà ouvert, vous devrez peut-être le fermer complètement et le redémarrer avant que l'icône favicon n'apparaisse. N'oubliez pas non plus que certains navigateurs affichent un favicon pour les titres des pages situées dans le dossier Favoris et non dans le titre même de la barre de navigation.