Créez des favicons et des icônes de web app en un instant
Une seule source, tous les fichiers qu'un site moderne réclame : un favicon.ico multirésolution, un favicon.svg vectoriel, des icônes Apple touch, des icônes de lanceur et maskable Android, un manifeste web et le snippet de head qui relie le tout.
Fichiers à générer
Collez ceci dans votre <head>
Il se met à jour selon les fichiers cochés. Déposez le pack à la racine de votre site et collez ce bloc.
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <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"> <meta name="theme-color" content="#3b82f6">
Comment ça marche
Choisissez une source
Un emoji, une à trois lettres, ou votre propre logo. Envoyer un fichier ne fait que le mettre en attente : rien n'est généré tant que vous ne le demandez pas.
Habillez la plaque
Forme, couleur unie ou dégradé, bordure et marge intérieure. L'aperçu se redessine à chaque changement.
Placez-la à la main
Glissez pour déplacer, molette pour zoomer sur le curseur, faites pivoter. Ctrl+Z annule n'importe quelle étape.
Livrez le pack
Téléchargez le ZIP, déposez-le à la racine de votre site et collez le snippet du head.
Un vrai ICO multicadre
Les cadres de 16, 32 et 48 pixels sont écrits en BMP 32 bits avec un vrai masque AND, ce qui les rend acceptables par les anciens shells Windows et les lecteurs d'icônes stricts.
Un véritable squircle
La plaque arrondie est une superellipse, la même famille de courbe qu'iOS utilise pour les icônes d'app, et non un rectangle arrondi qui en prend l'air.
favicon.svg vectoriel
Les icônes emoji et lettres sont exportées en balisage vectoriel réel : elles restent nettes sur tout écran et en mode sombre.
Une icône touch iOS correcte
L'icône Apple est aplatie sur la couleur de votre choix, parce qu'iOS affiche la transparence de l'écran d'accueil en noir plein.
Enchaînée au reste de la suite
Envoyez l'icône terminée vers la compression, le recadrage, la conversion ou la suppression d'arrière-plan sans la télécharger ni la réenvoyer.
Rien ne quitte l'onglet
Canvas et un compresseur ZIP dans votre navigateur. Aucun envoi, aucune API, aucun compte, et ça continue de marcher hors ligne.
Rendu une fois en 1024 pixels, puis réduit correctement
Dessiner un emoji directement dans un cadre de 16 pixels est ce qui rend la plupart des favicons générés illisibles : les polices d'emoji en couleur retombent sur leur plus petite image bitmap. FaviconBolt effectue un seul rendu maître en 1024 pixels et en dérive toutes les tailles, ce qui mesure 87% plus près d'un rééchantillonnage idéal à 16 pixels qu'un dessin direct à cette taille. Une passe d'accentuation optionnelle, sur alpha prémultiplié, restitue le contraste de bord perdu par le moyennage.
Génération 100% locale
Votre logo ne quitte jamais votre ordinateur. Le rendu, le binaire ICO et le ZIP sont construits dans la page, et les illustrations de cette page sont du SVG en ligne : rien n'est non plus téléchargé depuis un CDN.
Tous les fichiers qu'un navigateur va réellement demander
Décompressez le ZIP à la racine de votre site et collez le bloc de head généré. Le manifeste porte le vrai nom de votre site, son start URL et sa portée au lieu d'un texte de remplissage : l'invite d'installation affiche donc la bonne chose.
Les cadres de l'ICO sont des BMP avec masque AND plutôt que des flux PNG intégrés, l'icône Apple touch est livrée opaque, et l'icône maskable Android est à fond perdu pour que le masque système ne rogne pas deux fois votre visuel.
Questions fréquentes
QQue contient le fichier favicon.ico ?+
Trois cadres d'icône, 16x16, 32x32 et 48x48, empaquetés dans un seul binaire. Ils sont stockés en BMP 32 bits avec un masque AND de 1 bit, le format que tout lecteur d'icônes comprend. Les cadres compressés en PNG ne sont pris en charge qu'à partir de Windows Vista et certains analyseurs les refusent encore.
QPourquoi l'icône Apple touch a-t-elle un fond plein ?+
iOS ignore le canal alpha sur les icônes de l'écran d'accueil et compose toute transparence sur du noir. Aplatir l'icône touch sur une couleur choisie est le seul moyen de contrôler son rendu une fois installée.
QÀ quoi sert l'icône maskable ?+
Android applique son propre masque : un cercle sur certains lanceurs, un squircle sur d'autres. Une icône maskable est dessinée à fond perdu avec le visuel dans une zone de sécurité, pour que le système puisse la rogner sans entamer votre logo.
QPuis-je obtenir un favicon.svg vectoriel ?+
Oui : pour les modes emoji et lettres, c'est du balisage vectoriel authentique. Si vous envoyez un logo SVG, il reste vectoriel lui aussi. Pour une image matricielle, nous intégrons le rendu de 512 pixels dans le SVG et nous le disons, plutôt que de prétendre avoir vectorisé un JPEG.
QPuis-je positionner l'icône à la main ?+
Glissez le plan de travail pour déplacer le visuel, utilisez la molette pour zoomer vers le curseur et actionnez le curseur de rotation. Les flèches déplacent, plus et moins zooment, 0 réinitialise et Ctrl+Z remonte l'historique. Maintenir Alt affiche l'original intact.
QY a-t-il un envoi quelque part ?+
Non. Les fichiers sont décodés, rendus et compressés par votre propre navigateur. Il n'y a aucun appel serveur, et c'est aussi pour cela que l'outil continue de fonctionner sans réseau.