Vous obtenez favicon.ico, les tailles PNG, une icône Apple touch, des icônes Android et masquables, un manifeste web et le HTML à coller, le tout dans un seul .zip. Créez un jeu d'icônes complet pour votre site à partir d'une lettre ou d'une image. C'est gratuit et privé.
Comment créer un favicon
- Sous Partir de, choisissez Une lettre ou Une image. Pour une image, appuyez sur Choisir une image.
- Pour une lettre, saisissez vos Lettres et choisissez l'Épaisseur, la Police, la Couleur du texte, le Style et l'Arrière-plan.
- Choisissez la Forme : Carré, Arrondi ou Cercle. Ajustez la Marge intérieure, ou Gardez l'arrière-plan transparent.
- Sous Votre site, ajoutez le Nom du site ou de l'appli, le Nom court et le Dossier des icônes.
- Regardez l'Aperçu, qui montre l'icône dans un onglet de navigateur, dans les résultats de recherche et sur un téléphone.
- Appuyez sur Copier le HTML pour le code à coller dans votre page, et sur Tout télécharger (.zip) pour les fichiers.
À quoi sert chaque fichier
favicon.ico contient les versions 16, 32 et 48 pixels dans un seul fichier et fonctionne dans tous les navigateurs, y compris les anciens. Les favicons PNG donnent aux navigateurs modernes une icône d'onglet nette. apple-touch-icon.png sert quand quelqu'un ajoute votre site à l'écran d'accueil d'un iPhone ou d'un iPad, et les icônes Android plus site.webmanifest servent quand votre site est installé sur Android ou comme appli.
Qu'est-ce qu'une icône masquable ?
Android recadre les icônes d'applis en cercles, squircles ou carrés arrondis selon le téléphone. Une icône masquable remplit tout le carré avec votre couleur d'arrière-plan et garde le logo dans les 80 % du milieu : rien d'important n'est donc coupé quelle que soit la forme utilisée par le téléphone.
Conseils pour un favicon lisible
À 16 pixels, le détail disparaît. Une lettre en gras, un symbole simple ou la partie la plus reconnaissable de votre logo fonctionne mieux que le logo complet avec des mots. Un fort contraste entre le symbole et l'arrière-plan l'aide à ressortir parmi les autres onglets, dans les thèmes clair et sombre du navigateur.
Ajouter les icônes à votre site
- Décompressez les fichiers et importez-les dans le dossier nommé sous Dossier des icônes, généralement la racine de votre site.
- Collez le HTML copié dans la section head de chaque page.
- Rechargez la page et videz le cache de votre navigateur si l'ancienne icône continue de s'afficher. Les navigateurs gardent les favicons très longtemps.
- Partez d'une image carrée d'au moins 512 pixels de large pour que chaque taille reste nette.
Qui l'utilise
Propriétaires de petites entreprises avec un nouveau site, freelances qui créent des sites pour des clients, blogueurs et étudiants qui mettent un projet en ligne. Pour redimensionner ou convertir d'abord votre logo, essayez le convertisseur d'images.
Questions
Mon image est-elle envoyée ?
Non. Les icônes sont créées dans votre navigateur.
Quels formats d'image puis-je utiliser ?
PNG, JPG, SVG et WebP.
Pourquoi mon ancien favicon s'affiche-t-il encore ?
Les navigateurs gardent les favicons en cache très longtemps. Videz le cache ou ouvrez le site dans une fenêtre privée pour vérifier.