Générateur de favicon
Créez la petite icône qui s'affiche dans les onglets du navigateur et sur l'écran d'accueil des téléphones, à partir de quelques lettres ou de votre logo. Vous obtenez toutes les tailles, un favicon.ico et le code HTML à coller.
APERÇU
HTML
<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" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Collez ces lignes dans la balise <head> de vos pages.
Tout se passe dans votre navigateur. Rien de ce que vous saisissez n'est envoyé à un serveur.
Comment créer un favicon
Choisissez des lettres ou une image
Tapez une à trois lettres ou un emoji, ou ouvrez votre logo.
Personnalisez-le
Choisissez la forme et les couleurs, ou l'arrière-plan et la marge pour une image.
Téléchargez-le et ajoutez-le
Téléchargez le ZIP, placez les fichiers dans le dossier racine de votre site et collez le code HTML dans la section head de la page.
Le contenu du ZIP
Un favicon.ico en versions 16, 32 et 48 pixels pour les navigateurs, des icônes PNG en 16 et 32 pixels, une icône Apple touch de 180 pixels pour l'écran d'accueil des iPhone et iPad, des icônes de 192 et 512 pixels pour Android, et un fichier site.webmanifest qui les répertorie.
Penser en 16 pixels
Dans un onglet de navigateur, un favicon est minuscule. Une ou deux lettres bien grasses ou un symbole simple restent reconnaissables ; un logo détaillé devient illisible. Vérifiez l'aperçu en 16 pixels avant de télécharger.
Questions fréquentes
Où placer les fichiers ?
Dans le dossier racine de votre site web, pour que /favicon.ico et les autres chemins du code HTML existent. Ajoutez ensuite les lignes HTML dans la balise <head>.
Pourquoi mon ancien favicon s'affiche-t-il encore ?
Les navigateurs gardent longtemps les favicons en cache. Pour vérifier, rechargez la page en vidant le cache ou ouvrez le site dans une fenêtre de navigation privée.
Mon logo est-il envoyé sur un serveur ?
Non. Toutes les icônes sont dessinées dans votre navigateur.