LumaTool
Traitement local

Générateur de balises favicon

Générateur de balises favicon generates copy-ready favicon HTML link tags for favicon.ico, PNG favicons, Apple Touch Icon, web manifest, theme color, shortcut icon, and mask icon.

Runs locallyNo uploadYour input is processed in your browser.

Générateur de balises favicon

Générez les balises head pour favicon.ico, PNG favicon, Apple Touch Icon, manifest, theme-color et mask-icon.

Qu’est-ce que cet outil ?

A favicon HTML tag generator writes the link and meta tags that belong in the HTML head. It helps avoid missing sizes, incorrect type attributes, inconsistent paths, or forgetting the web manifest and theme color.

Formats pris en charge

  • No upload is required.
  • /favicon.ico
  • /favicon-16x16.png
  • /favicon-32x32.png
  • /apple-touch-icon.png
  • /site.webmanifest

Fichiers de sortie

  • favicon.ico link tag
  • 16x16 and 32x32 PNG link tags
  • apple-touch-icon link tag
  • site.webmanifest link tag
  • theme-color meta tag
  • optional shortcut icon and mask icon tags

Guide des tailles

  • favicon.ico keeps broad compatibility.
  • 16x16 and 32x32 PNG help modern browsers choose crisp tab icons.
  • 180x180 Apple Touch Icon supports iOS home screen shortcuts.
  • site.webmanifest points browsers to PWA icon metadata.
  • theme-color controls browser UI color on supported devices.

Exemples d’entrée

  • /favicon.ico
  • /favicon-32x32.png
  • /apple-touch-icon.png
  • /site.webmanifest
  • #ffffff theme color

Exemples de sortie

  • favicon.ico link tag
  • 16x16 and 32x32 PNG link tags
  • apple-touch-icon link tag
  • site.webmanifest link tag
  • theme-color meta tag
  • optional shortcut icon and mask icon tags

Cas d’usage

  • Create favicon head code for a static HTML site.
  • Add favicon tags to a React or Vite index.html file.
  • Prepare link tags for a Next.js or WordPress project.
  • Check that generated paths match files in the public folder.
  • Copy a complete favicon code block without hand-writing every tag.

Bonnes pratiques

  • Start from high-resolution square artwork when possible.
  • Keep the subject centered and avoid tiny text inside small icons.
  • Use transparent backgrounds only when the mark remains visible on light and dark surfaces.
  • Use consistent file paths between exported files and HTML code.
  • After replacing favicons, clear browser cache or change filenames if the old icon remains visible.

Erreurs courantes

  • Uploading a low-resolution source and expecting sharp large icons.
  • Using artwork that touches the edge and gets clipped after rounding or cover mode.
  • Shipping only favicon.ico and forgetting Apple Touch Icon or manifest icons.
  • Leaving HTML paths that do not match the files in the public folder.
  • Not previewing 16x16 and 32x32 outputs before release.

Confidentialité et traitement local

Votre fichier est traité localement dans le navigateur et n’est pas envoyé aux serveurs LumaTool. Décodage, canvas, ICO, ZIP, manifest et HTML sont générés côté client.

Exemples

Exemples d’entrée

Entrée exemple 
/favicon.ico
/favicon-32x32.png
/apple-touch-icon.png
Sortie exemple 
favicon.ico link tag
16x16 and 32x32 PNG link tags
apple-touch-icon link tag

Générateur de balises favicon generates copy-ready favicon HTML link tags for favicon.ico, PNG favicons, Apple Touch Icon, web manifest, theme color, shortcut icon, and mask icon.

Exemples de sortie

Entrée exemple 
favicon paths and theme color
Sortie exemple 
favicon.ico link tag
16x16 and 32x32 PNG link tags
apple-touch-icon link tag
site.webmanifest link tag
theme-color meta tag

Votre fichier est traité localement dans le navigateur et n’est pas envoyé aux serveurs LumaTool. Décodage, canvas, ICO, ZIP, manifest et HTML sont générés côté client.

Note de confidentialité

Votre fichier est traité localement dans le navigateur et n’est pas envoyé aux serveurs LumaTool. Décodage, canvas, ICO, ZIP, manifest et HTML sont générés côté client.

Comment utiliser

  1. Étape 1. Enter your favicon file paths.
  2. Étape 2. Select which icon tags to include.
  3. Étape 3. Set the theme color and optional mask icon.
  4. Étape 4. Copy the generated HTML code into your website head.

Exemples concrets

Create favicon head code for a static HTML site

Create favicon head code for a static HTML site.

Add favicon tags to a React or Vite index

Add favicon tags to a React or Vite index.html file.

Prepare link tags for a Next

Prepare link tags for a Next.js or WordPress project.

Cas d’utilisation

  • Create favicon head code for a static HTML site.
  • Add favicon tags to a React or Vite index.html file.
  • Prepare link tags for a Next.js or WordPress project.
  • Check that generated paths match files in the public folder.
  • Copy a complete favicon code block without hand-writing every tag.

FAQ

Where should I place favicon HTML tags?

Place them inside the HTML head. In Vite or React projects this is often index.html; in framework projects use the framework head or metadata system.

Do I still need favicon.ico?

Yes, it is still useful for compatibility even when PNG icons are present.

What is apple-touch-icon?

It is the icon iOS uses when a user saves a website to the home screen.

What is site.webmanifest?

It is a web manifest file that tells browsers about PWA icons, display mode, theme color, and related install metadata.

Why is my favicon not updating?

Favicons are cached heavily. Verify paths, clear cache, and consider changing filenames when replacing icons.

Can I use this code in React or Vite?

Yes. Put the files in public/ and paste the generated tags into index.html unless your framework uses a metadata API.

À quoi sert surtout Générateur de balises favicon ?

Générateur de balises favicon aide à réaliser rapidement des tâches outils icônes dans le navigateur, comme vérifier, convertir, nettoyer ou formater des données.

Comment mon entrée est-elle traitée ?

Votre fichier est traité localement dans le navigateur et n’est pas envoyé aux serveurs LumaTool. Décodage, canvas, ICO, ZIP, manifest et HTML sont générés côté client.

Outils associés

G

Générateur de favicon

Créez favicon.ico, PNG, Apple Touch Icon, icônes Android, manifest, aperçus, balises HTML et ZIP dans le navigateur.

Outils icônes Disponible Traitement local Aucun téléversement Utiliser maintenant G

Générateur d’icônes app

Générez des tailles iOS, Android et PWA depuis PNG, JPG, WebP ou SVG avec aperçu de zone sûre.

Outils icônes Disponible Traitement local Aucun téléversement Utiliser maintenant C

Convertisseur ICO

Convertit PNG, JPG et WebP en favicon.ico multi-tailles.

Outils image Disponible Traitement local Aucun téléversement Utiliser maintenant A

Aperçu SVG sécurisé

Prévisualise le SVG isolé et inspecte dimensions, couleurs et risques.

Outils image Disponible Traitement local Aucun téléversement Utiliser maintenant O

Optimiseur SVG

Compressez, nettoyez, sécurisez, prévisualisez, copiez et téléchargez des SVG sans scripts ni événements.

Outils icônes Disponible Traitement local Aucun téléversement Utiliser maintenant