Taille favicon trop petite

**bza88** · 22/11/2018, 16h00

salut,
je viens de mettre mon favicon mais il apparaît trop petit, en effet il y aurait encore la place pour qu'il apparaisse un peu plus gros. Comment pourrais je faire ? je l'ai même mis en dimension (64*64,72*72,etc...) plus grande, mais il apparaît toujours en petit. je voudrais qu'il soit un peu plus imposant genre favicon de Facebook.

**Vil'Coyote** · 22/11/2018, 18h05

si tu augment la taille cela doit s'augmenter (je ne connais pas la taille max mais il me semble 32x32?)
du coup vérifie le cache du navigateur?

**bza88** · 23/11/2018, 14h52

salut,
je me suis servi de ce site( http://favicons.fr/a8591cd2ce5135465...ab.htm#Preview) pour générer les favicons de mon site. sauf qu'il apparaît trop petit dans ma page a côté du titre.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
    <head>
        <title>xxxxxxx</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="ressources/images/logo/favicon/favicon.ico" type="image/x-icon">
        <link rel="icon" href="ressources/images/logo/favicon/favicon.png" type="image/png">
        <link rel="icon" sizes="32x32" href="ressources/images/logo/favicon/favicon-32.png" type="image/png">
        <link rel="icon" sizes="64x64" href="ressources/images/logo/favicon/favicon-64.png" type="image/png">
        <link rel="icon" sizes="96x96" href="ressources/images/logo/favicon/favicon-96.png" type="image/png">
        <link rel="icon" sizes="196x196" href="ressources/images/logo/favicon/favicon-196.png" type="image/png">
        <link rel="apple-touch-icon" sizes="152x152" href="ressources/images/logo/favicon/apple-touch-icon.png">
        <link rel="apple-touch-icon" sizes="60x60" href="ressources/images/logo/favicon/apple-touch-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="76x76" href="ressources/images/logo/favicon/apple-touch-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="ressources/images/logo/favicon/apple-touch-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="ressources/images/logo/favicon/apple-touch-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="aressources/images/logo/favicon/pple-touch-icon-144x144.png">
        <meta name="msapplication-TileImage" content="ressources/images/logo/favicon/favicon-144.png">
        <meta name="msapplication-TileColor" content="ressources/images/logo/favicon/#FFFFFF">
 
        <!-- bootstrap & fontawesome -->
        <link rel="stylesheet" href="ressources/styles/css/bootstrap/bootstrap.min.css" />
        <link rel="stylesheet" href="ressources/styles/css/font-awesome/font-awesome.min.css" />
        <link rel="stylesheet" href="ressources/styles/css/custom/login.css" />
 
  </body>
</html>

je voudrais qu'il soit comme celui de Facebook, yahoo ou même comme celui de Developpez.com, etc...

Invité · 23/11/2018, 15h36

Bonjour,

1- tu peux lire aussi :

Ajouter des icônes personnalisées à un site

2- MONTRE-nous TON icône.

@Vil'Coyote
Avant, on allait à 32 x 32 maxi.
Aujourd'hui, compte tenu de la puissance accrue, des résolutions et définitions** d'écran (smartphone *,...) de plus en plus élevées, on peut facilement aller jusqu'à 120 x 120 px (c'est ce que j'emploie).
* Ces icônes ne s'affichent pas uniquement dans la barre d'adresse.
Quand sur smartphone on clique "ajouter en favori sur l'écran d'accueil" (ou un truc du genre), ces icônes sont affichées en plus grand à l'écran.
** un plus grand "piqué" permet aussi des détails plus précis.

**bza88** · 23/11/2018, 15h40

salut,
voici mon icône
http://favicons.fr/a8591cd2ce5135465...ab.htm#Preview

Invité · 23/11/2018, 15h49

Tu veux dire que ton icone, c'est ça :

Elle ne peut pas s'afficher "plus grande" dans l'espace (carré) dans laquelle est est définie.
Si tu veux qu'elle soit "plus grande", il faut en modifier la mise en page !

Par exemple :

ou

Toutes ces icônes sont incluses dans un carré de 60 x 60px.
Les 2ème et 3ème (que j'ai réalisées) paraissent en effet "plus grandes".

**bza88** · 23/11/2018, 15h58

quand tu parles de mise en page, c'est au niveau de photoshop ? parce que je l'ai monté avec photoshop cs6 ensuite je l'ai convertie en favicon en utilisant un service en ligne. qu'elle mise me conseilles-tu ? merci

Invité · 23/11/2018, 16h00

J'ai répondu dans mon précédent message.

Et OUI, il faut adapter ton logo avec Photoshop (ou autre), pour qu'il tienne dans un carré.

(voici un exemple parmi d'autres, où j'ai dû adapter le logo à la forme carré de l'icône)

**bza88** · 23/11/2018, 16h04

est ce que tu pourrais m'envoyer tes deux images (deuxième et troisième ) ? je voudrais aussi les tester chez moi. merci

Invité · 23/11/2018, 16h11

...est ce que tu pourrais ... ? ... tes deux images (deuxième et troisième ) ?...

Il doit manquer des mots à ta phrase....

N.B. Si tu voulais dire : "t'envoyer les fichiers"
Désolé. Je les ai supprimés de mon ordi.

Mais il te suffit de "cliquer droit" sur les images (de mon précédent message), puis cliquer "enregistrer sous..."

Taille favicon trop petite

Conception Web

Discussions similaires

Partager

Partager