Générateur de favicon

À quoi sert cet outil

Le générateur de favicon transforme une lettre, un emoji ou votre logo en toutes les icônes dont un site web moderne a besoin. Il dessine l’icône à chaque taille, assemble favicon.ico, écrit un manifeste d’application web et vous donne les balises <link> à coller dans le <head> de votre page. Téléchargez le tout en un seul ZIP.

Partir d’un texte est le moyen le plus rapide d’obtenir une icône nette : saisissez un à trois caractères ou un emoji, choisissez les couleurs, une police et une forme (carré, arrondi ou cercle). Les icônes texte reçoivent aussi un favicon.svg vectoriel, qui reste net à toutes les tailles et sur les écrans haute densité.

Mode d’emploi

1. Choisissez Texte ou Image comme source. Pour une image, cliquez sur Choisir une image… et sélectionnez un PNG, SVG ou JPG carré.
2. Réglez la Forme, et activez Remplir l’arrière-plan pour poser l’icône sur une tuile colorée, ou désactivez-le pour la garder transparente.
3. Saisissez le Nom du site : c’est le libellé affiché sous l’icône quand quelqu’un ajoute votre site à l’écran d’accueil d’un téléphone, écrit dans site.webmanifest (Android) et dans la balise apple-mobile-web-app-title (iOS). Indiquez ensuite le Dossier des icônes où vous mettrez les fichiers en ligne, généralement /.
4. Vérifiez l’aperçu : l’icône de 16 px est ce que les visiteurs voient dans un onglet du navigateur.
5. Cliquez sur Télécharger le ZIP, mettez les fichiers en ligne sur votre site et collez le HTML dans <head>.

Exemple

Les réglages par défaut produisent ces balises :

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

Astuces

• Les navigateurs mettent les favicons en cache de façon agressive. Après avoir remplacé une icône, ouvrez la page dans une fenêtre de navigation privée pour voir le changement.
• iOS ignore la transparence de l’icône Apple touch et la remplit de noir : gardez l’arrière-plan rempli pour obtenir une icône d’écran d’accueil propre.