Générateur de favicon et convertisseur PNG en ICO

Les fichiers, et à quoi sert chacun

Les navigateurs, les téléphones et les moteurs de recherche cherchent chacun l’icône du site à leur propre endroit et dans leur propre taille. Le ZIP contient tout ce dont un site actuel a besoin :

Google affiche le favicon d’un site à côté de ses résultats de recherche, et il en cherche un d’au moins 48 pixels de côté, ce que couvre l’ensemble.

Partir du bon logo

Utilisez un PNG ou un SVG carré d’au moins 512 pixels de côté. Un SVG est l’idéal : chaque taille est dessinée à partir des formes, et il est aussi inclus sous le nom favicon.svg. Un logo large avec un nom à côté du symbole ne survit pas à 16 pixels ; utilisez le symbole seul, ou la première lettre, pour l’icône. Vérifiez la version de 16 pixels dans l’aperçu, car c’est celle que la plupart des gens voient dans leurs onglets.

Forme, marge et fond

• Remplissage ajoute de l’espace autour du logo à l’intérieur du carré, 6 % par défaut. Les logos qui touchent les bords paraissent à l’étroit dans un onglet.
• Forme découpe l’icône en carré, en carré arrondi ou en cercle. Elle se voit surtout avec un fond rempli ; avec un fond transparent, gardez assez de marge pour que les coins ne rognent pas le logo.
• Remplir le fond est désactivé par défaut, ce qui garde la transparence pour que l’icône s’accorde aux thèmes clairs et sombres des navigateurs. Activez-le pour un logo qui disparaît sur les onglets sombres, comme un symbole noir.
• Fond de l’icône Apple touch : les iPhone n’acceptent pas la transparence sur les icônes de l’écran d’accueil et afficheraient du noir derrière ; cette icône reçoit donc toujours une couleur unie, blanche sauf si vous en choisissez une autre.

Ajouter les icônes à votre site

Placez tous les fichiers dans le dossier racine de votre site, à côté de la page d’accueil, et collez ces lignes dans la balise <head> de chaque page. Les mêmes lignes se trouvent dans install.html, dans le ZIP :

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Si vous êtes parti d’un SVG, l’extrait contient aussi une ligne pour favicon.svg. Remplacez le nom dans site.webmanifest par celui de votre site avant l’envoi ; c’est ce qu’Android affiche sous l’icône sur un écran d’accueil.

Si la nouvelle icône ne s’affiche pas

• Les navigateurs gardent les favicons en cache longtemps. Ouvrez directement le fichier de l’icône, puis rechargez la page, ou vérifiez dans une fenêtre privée.
• Les résultats de recherche montrent encore l’ancienne. Google met à jour les favicons quand il explore de nouveau la page d’accueil, ce qui peut prendre de quelques jours à quelques semaines.
• L’icône est floue. Le logo source était petit. Partez d’un SVG ou d’un PNG de 512 pixels ou plus.