jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils images et assets

Gratuit Generateur de manifeste web app

Générez un fichier JSON site.webmanifest pour les sites statiques prêts pour PWA.

Chargement de l'outil...

Qu'est-ce que Generateur de manifeste web app ?

Un manifeste d'application web est un fichier JSON qui indique aux navigateurs les informations sur votre application web et comment elle doit se comporter lorsqu'elle est installée sur l'appareil d'un utilisateur. Il contrôle le nom de l'application, les icônes, les couleurs et le comportement de lancement. Pour les sites statiques sur GitHub Pages, un manifeste est l'étape clé pour rendre le site installable en tant qu'application web progressive.

Réponse rapide

Un manifeste d'application web contrôle l'apparence de votre site lorsqu'il est installé sur l'écran d'accueil d'un appareil. Il définit le nom de l'application, les icônes, la couleur de thème et le comportement de lancement pour les sites statiques prêts pour PWA.

Last updated: 2026-06-11

Limites

  • Le manifeste fonctionne uniquement en HTTPS. Les sites HTTP ne peuvent pas utiliser le manifeste pour les invites d'installation.
  • Le manifeste nécessite des fichiers d'image d'icônes réels aux chemins spécifiés. Des icônes manquantes ou mal nommées font rejeter le manifeste par le navigateur.
  • Le comportement d'installation diffère entre Android et iOS. Android utilise le manifeste pour les invites d'installation, tandis que iOS s'appuie sur les balises meta Apple touch icon et ne supporte pas l'installation PWA complète depuis le manifeste.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Saisissez le nom de votre site et un nom court optionnel qui tient en moins de 12 caractères.
  2. Sélectionnez le mode d'affichage : standalone supprime la barre du navigateur pour une expérience de type application.
  3. Définissez les chemins d'icônes vers des images PNG aux tailles recommandées comme 192x192 et 512x512.
  4. Copiez le manifeste JSON généré et enregistrez-le sous site.webmanifest à la racine de votre site.

A quoi il sert

  • Rendre un site de documentation statique installable sur les écrans d'accueil mobiles.
  • Ajouter des métadonnées PWA à un blog pour que les lecteurs réguliers puissent le lancer comme une application.
  • Préparer un manifeste d'application web avant de soumettre un site à un répertoire PWA.

Cas d'usage

Exemples concrets

Exemple

Site d'outils avec mode standalone

Un site statique qui publie des outils utilitaires basés sur navigateur définit l'affichage sur standalone et theme-color pour correspondre à son accent de marque corail. Les visiteurs sur Android peuvent ajouter le site à leur écran d'accueil et l'ouvrir sans la barre d'adresse.

Exemple

Blog avec manifeste minimal

Un blog personnel utilise uniquement le nom, le nom court et une icône 192x192. Il laisse l'affichage sur browser et ignore l'orientation. Le blog apparaît comme un raccourci régulier mais affiche toujours une icône de marque sur l'écran d'accueil.

Erreurs frequentes

  • Définir des chemins d'icônes qui pointent vers des emplacements invalides ou des fichiers manquants, ce qui fait que le navigateur rejette le manifeste.
  • Générer un manifeste mais oublier la balise <link rel='manifest' href='/site.webmanifest'> dans l'en-tête de la page, de sorte que le navigateur ne le lit jamais.
  • Choisir le mode d'affichage fullscreen ou standalone pour un site riche en contenu où les utilisateurs ont encore besoin de la barre d'adresse pour la navigation.

Vérification

  1. Ouvrez Chrome DevTools > Application > Manifest pour vérifier que le manifeste est correctement analysé et que les icônes sont accessibles.
  2. Testez le site en HTTPS sur un appareil Android avec Chrome et confirmez que l'invite Ajouter à l'écran d'accueil apparaît.

FAQ

Questions sur Generateur de manifeste web app

Où dois-je placer le fichier manifeste ?

Placez site.webmanifest à la racine de votre site et référencez-le avec <link rel='manifest' href='/site.webmanifest'> dans l'en-tête de la page. Le fichier doit être servi avec le type MIME application/manifest+json.

Un site statique classique a-t-il besoin d'un manifeste ?

Un manifeste est facultatif mais recommandé. C'est le seul moyen de contrôler l'apparence de votre site lorsqu'un utilisateur l'enregistre sur son écran d'accueil. Sans manifeste, le navigateur utilise une capture d'écran générique comme icône.

Quelles tailles d'icônes sont requises pour PWA ?

Au minimum, fournissez des icônes PNG 192x192 et 512x512. L'icône 192x192 est utilisée pour l'écran d'accueil et l'icône 512x512 est requise pour le badge PWA installable sur Android.

Ai-je besoin d'un service worker pour que le manifeste fonctionne ?

Non. Le manifeste d'application web fonctionne indépendamment des service workers. Le manifeste contrôle l'apparence de votre site lorsqu'il est enregistré sur un écran d'accueil (nom, icône, couleur de thème, mode d'affichage). Un service worker n'est requis que si vous souhaitez des fonctionnalités hors ligne complètes, une synchronisation en arrière-plan ou des notifications push. Vous pouvez ajouter un manifeste à un site statique classique sans aucun service worker.

Outils lies

Autres outils outils images et assets

A essayer aussi

A essayer aussi