ximg.es

Générateur de favicon

Saisissez une lettre ou importez votre logo, et téléchargez toutes les icônes dont un site a besoin aujourd’hui, avec le code du <head>. Tout est généré dans votre navigateur.

Créer à partir
Aperçu de l’icône
180 × 180

    HTML pour le <head>

    <link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

    Les fichiers dont un site a besoin aujourd’hui

    Plus besoin de vingt tailles. Ces cinq fichiers suffisent pour tous les navigateurs, l’écran d’accueil des mobiles et les résultats de Google :

    Comment l’installer

    Téléchargez le ZIP, copiez les fichiers à la racine de votre site (là où se trouve index.html) et collez le HTML dans le <head>. Si vous changez l’icône plus tard, le navigateur peut mettre du temps à s’en apercevoir car il la garde en cache : renommer le fichier ou ajouter ?v=2 au lien règle le problème.

    Conseils de design

    Un favicon provisoire en une ligne

    Si vous avez juste besoin de quelque chose pendant la maquette, le générateur ximg.es sert déjà une image carrée avec une lettre, sans rien télécharger : 

    <link rel="icon" href="https://ximg.es/32x32/2563eb/fff.png?text=X">

    Questions fréquentes

    Quelle taille doit faire un favicon ?

    Le favicon.ico contient 16, 32 et 48 px. Il faut aussi un PNG de 180 px pour l’iPhone et d’autres de 192 et 512 px pour Android. Cet outil les génère tous.

    Le favicon.ico est-il nécessaire si j’ai déjà le SVG ?

    Oui. Safari et certains outils n’utilisent toujours pas le SVG, et Google comme les lecteurs RSS demandent directement /favicon.ico.

    Mes images sont-elles envoyées sur un serveur ?

    Non. Les icônes sont dessinées avec canvas dans votre navigateur, et le ZIP y est créé aussi.

    Pourquoi mon favicon ne se met-il pas à jour ?

    Les navigateurs le gardent longtemps en cache. Ajoutez ?v=2 au lien, ou ouvrez le site dans une fenêtre privée pour vérifier le nouveau.

    Pourquoi l’icône de l’iPhone a-t-elle un fond ?

    Parce qu’iOS n’accepte pas la transparence dans apple-touch-icon et peindrait le fond en noir. L’outil utilise votre couleur de fond, ou du blanc si vous avez choisi un fond transparent.

    Qu’est-ce que le site.webmanifest ?

    Un fichier JSON qui décrit votre site comme une application : nom, icônes et couleurs. Android l’utilise lorsqu’on ajoute le site à l’écran d’accueil.

    Plus d'outils

    Voir tous les outils · Générateur d'images placeholder