Ajouter un favicon iPhone à son site iWeb

John12345678910 Messages postés 577 Statut Membre -  
 Profil bloqué -
Bonjour,

Mon site Web que je fait avec iWeb a un favicon qui marche sur un PC (que l'on voit en haut à coté de la barre).

Je voudrais mettre le même quand on va sur un Safari Mobile > Ajouter à l'écran d'accueil, c'est comme un favicon mais par exemple Google n'a pas le même que sur la version PC.

Quelqu'un connaît le codage à faire?
A voir également:

3 réponses

Profil bloqué
 
Il y a plusieurs méthodes :

Un logiciel de dessin (Gimp, pixia, inkscape...)

Un site web (qui transforme une image en favicon):
http://favicon.htmlkit.com/favicon/
https://www.favicon.cc
http://www.favicon.co.uk/
http://www.favicon.hu/
http://tools.dynamicdrive.com/favicon/
https://favikon.com/

Pour la plupart des navigateurs
Il suffit dans un premier temps de créer une image au format png ou gif (formats standards, à utiliser).

(on peut également utiliser des formats plus rares, voir le lien en fin de page).
Vous pouvez choisir plusieurs dimensions, 16x16 ou 32x32 (en pixels).
Pour Internet Explorer
Comme d'habitude, IE ne respecte pas les standards et n'utilise pas les images avec les bons formats.

Pour ce navigateur, il faut utiliser une image ou format ico (ou bmp renommée) (non standard, à éviter de préférence) , et de dimensions 16x16 pixels.
Pour créer une favicon animée ou générer simplement un fichier ICO
Cet outil vous permettra non-seulement de générer un fichier ICO facilement mais aussi d'animer votre favicon et de faire défiler du texte si vous le souhaitez.

Cliquez sur le bouton Parcourir... et choisissez une image se trouvant sur votre ordinateur.

Validez ensuite en cliquant sur le bouton Generate Favicon.ico

Vous aurez ensuite un aperçu de votre favicon.

Il vous suffit alors de télécharger le fichier zippé sur votre ordinateur.

Après avoir décompressé le fichier téléchargé, copier le fichier favicon.ico vers votre site.

Il faut ensuite déposer la favicon sur votre site, et indiquer son chemin via la balise link dans les balises d'en tête head.
Voici un exemple avec une image au format png :

<link rel="icon" type="image/png" href="/images/mafavicon.png" />

Selon le format, c'est l'attribut "type" qui change :

Format png : image/png
Format gif : image/gif
Format jpeg (extension jpg ou jpeg) : image/jpeg

Et si vous avez une favicon qui ne respecte pas les standards, l'attribut "rel" change également :

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

Il est également possible de déposer un fichier favicon.ico à la racine du site pour que certains navigateurs l'utilisent automatiquement, mais ce n'est pas standard.
0
vilokal Messages postés 10 Statut Membre
 
Bonjour,

Je te conseille ce site pour créer ton favicon rapidement et facilement en envoyant ton image :
https://www.favicon.cc/
Puis tu rajoute dans ta balise <head> ce code :
<link href="images/favicon.ico" rel="icon" type="image/x-icon" />

Le href signifie l'endroit ou se trouve ton favicon (ici dans le dossier image). Comme tu peux le voir l'image s'intitule favicon.ico car j'ai conservé le nom donné par le site après l'avoir téléchargé.

J'espère t'avoir aider ;)

(Lien publicitaire supprimé, Modération CCM)
0
Profil bloqué
 
Je récapitule j'ai donc tous supprimer les images en fav, et j'ai recommencer, j'ai ajouté ce code entre les Heads:

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

et j'ai ajouter l'image en .ico dans le dossier images en 32X32px
je réactualise et rien... Faut-il que je patiente plusieurs heurs pour voir la différence encore une fois?
0