Aucun upload, 100 % local, sans compte

Générateur de favicon

Importez votre logo ou icône et téléchargez toutes les tailles de favicon standard en PNG. Inclut Apple Touch Icon et icônes PWA. Rien ne quitte votre appareil.

Comment fonctionne Générateur de favicon

Générateur de favicon prend n'importe quelle image fournie et la redimensionne aux dimensions standard de favicon en utilisant l'API Canvas drawImage : 16x16, 32x32, 48x48, 180x180 (icône Apple touch), 192x192 (Android Chrome) et 512x512 (manifeste PWA). Les six tailles sont générées dans votre navigateur, avec en plus un favicon.ico multi-tailles qui regroupe les images 16x16, 32x32 et 48x48 dans un seul fichier hérité. Votre image source ne quitte jamais votre appareil.

Un jeu de favicon complet couvre toute la gamme des icônes d'onglet de navigateur, des signets, des raccourcis d'écran d'accueil et des écrans de démarrage PWA. Utiliser une image source haute résolution (au moins 512x512 pixels) donne à l'algorithme de réduction le plus de détails possibles. Les balises HTML link nécessaires pour référencer chaque fichier généré sont affichées dans un extrait que vous pouvez copier directement dans l'élément head de votre page.

Rédigé par Bastien Sulyan

Comment utiliser Générateur de favicon, étape par étape

  1. Déposez votre image source sur la zone de chargement. Utilisez une image carrée de 512 px ou plus pour de meilleurs résultats.
  2. Prévisualisez les six tailles générées dans le panneau de résultats.
  3. Téléchargez les six fichiers PNG et le favicon.ico depuis le panneau de résultats.
  4. Copiez l'extrait HTML montrant les balises link pour toutes les tailles.
  5. Placez les fichiers PNG à la racine de votre site et collez les balises link dans l'en-tête de votre page.

Cas d'utilisation courants

  • Un développeur configure un nouveau site web et a besoin de toutes les tailles de favicon générées depuis le logo de la marque sans abonnement à un outil de design.
  • Un auteur de PWA génère les icônes 192x192 et 512x512 requises dans le manifeste de l'application web pour l'installation sur l'écran d'accueil.
  • Un blogueur rafraîchit l'identité de son site et remplace le favicon par défaut par une icône personnalisée construite depuis son logo.
  • Un indépendant produit rapidement le jeu complet de favicons pour un projet client sans attendre d'installer un logiciel de design hors ligne.

Questions fréquentes

Quels formats d'image puis-je utiliser comme source ?

N'importe quel format que le navigateur peut décoder fonctionne comme entrée : JPEG, PNG, WebP, GIF et SVG. Pour les sources SVG, le navigateur rastérise le vecteur sur un Canvas avant le redimensionnement, donc les PNG de sortie sont des images raster dans tous les cas.

Pourquoi mon favicon est-il flou dans l'onglet du navigateur ?

Les tailles 16x16 et 32x32 sont très petites. Si l'image source contient des détails fins ou des lignes minces, ils ne survivront pas à la réduction. Un design simple et en gras avec des formes claires fonctionne bien mieux aux petites tailles qu'une illustration complexe.

L'outil génère-t-il des fichiers ICO ?

Oui. En plus des six PNG, l'outil assemble un favicon.ico qui contient les images 16x16, 32x32 et 48x48 dans un seul fichier, celui que cherchent encore les anciens navigateurs Windows et certains robots à la racine du site. Les navigateurs récents se contentent des liens PNG : publier les deux ne coûte rien et laisse chaque client choisir.

L'image source est-elle traitée sur un serveur ?

Non. Les appels Canvas drawImage qui produisent chaque taille s'exécutent dans votre onglet de navigateur. L'image source est lue depuis votre disque local et les six sorties PNG sont créées en mémoire et proposées en téléchargement. Aucune donnée de fichier ne transite par un serveur.

Quelle taille dois-je utiliser pour l'icône Apple touch ?

iOS et iPadOS utilisent le PNG de 180x180 pixels référencé par la balise link apple-touch-icon. Cette taille est utilisée quand un utilisateur ajoute votre site à son écran d'accueil sur un appareil Apple. L'outil génère ce fichier en plus des autres tailles.

Puis-je utiliser une image rectangulaire comme source ?

Oui, mais la sortie sera mise en boîte aux lettres ou en pilier pour s'adapter au canvas carré. Pour de meilleurs résultats, commencez avec une image carrée ou recadrez votre image source en carré avant d'utiliser l'outil.

Outils liés

Tout reste local, explorez des outils complémentaires.

Tous les outils image