web-dev-qa-db-fra.com

Comment puis-je obtenir le titre de ma page pour avoir une icône?

J'aimerais que le logo de mon site soit affiché dans la zone des icônes du titre plutôt que sur le document blanc par défaut. Exactement comme Stack Overflow l'a.

51
littlechris
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

ajoutez ceci à votre HTML Head . Bien sûr, le fichier "favicon.ico" doit exister . Je pense que les fichiers 16x16 ou 32x32 pixels sont préférables.

77
Nick

c’est une question intéressante alors laissez-la vérifier si vous avez une image à utiliser comme icône de site Web, puis 

Ajoutez ceci à votre script 

   <link rel="icon" type="image/gif" href="animated_favicon1.gif" />

sinon, si vous avez une icône pour votre icône de site Web, vous avez choisi 

 <link rel="shortcut icon" href="favicon.ico" />

J'utilise toujours http://www.iconspedia.com/ pour plus d'icônes 

si ma réponse a résolu votre problème, donnez-moi un vote ok

17
anirudha

Ils sont appelés favicons et sont assez faciles à fabriquer/utiliser. Lisez/ http://www.favicon.com/ pour obtenir de l'aide.

7
Paul McLean

Apparemment, vous pouvez utiliser cette astuce. 

<title>???? My title</title>

Cette icône est semblable à un texte.

6
devXen

Selon w3school :

<link rel="icon" href="your_icon"/>
1
Gavin Lee

Si vous utilisez Ruby Rails, utilisez le code ci-dessous.

Pour calculer le chemin du fichier, la fonction asset_path est utilisée pour trouver l'image que nous utilisons à l'intérieur du code Rails incorporé dans <%= code %>

<link rel="icon" type="image/png" href="<%= asset_path('icon_name.jpg')%>">

Ce code fonctionnera de manière provocante. Dans un commentaire, j'ai vu qu'ils utilisaient ejs syntex, ce qui n'est pas pour tout le monde, mais seulement pour ceux qui travaillent avec express.js

<link rel="icon" href="demo_icon.gif" sizes="16x16">
<title> Reddit</title>

vous pouvez également ajouter des png et jpg

sebscribe my youtube playlist pour apprendre la conception web, le développement, les graphiques vectoriels, la manipulation de photos Je vous aiderai dès que possible si vous rencontrez un problème technique Merci

0
MD SHAYON

Le réponse acceptée fonctionne parfaitement. Je veux juste mentionner un problème mineur avec le réponse que devXen a donné .

Si vous définissez l’icône comme ceci:

<link rel="shortcut icon" type="image/x-icon" href="icon.ico">

L'icône fonctionnera comme prévu:

 enter image description here 

Cependant, si vous le définissez comme devXen a suggéré:

<title>???? Amir A. Shabani</title>

Le titre de la page se déplace lors de l'actualisation:

 enter image description here 

Je conseillerais donc d'utiliser <link> à la place.

0
AmirAShabani