LumaTool
Procesamiento local

Generador de etiquetas favicon

Generador de etiquetas 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.

Generador de etiquetas favicon

Genera etiquetas head para favicon.ico, PNG favicon, Apple Touch Icon, manifest, theme-color y mask-icon.

Qué es esta herramienta

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.

Formatos admitidos

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

Archivos de salida

  • 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

Guía de tamaños

  • 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.

Ejemplos de entrada

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

Ejemplos de salida

  • 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

Casos de uso

  • 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.

Buenas prácticas

  • 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.

Errores comunes

  • 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.

Privacidad y procesamiento local

Tu archivo se procesa localmente en el navegador y no se sube a servidores de LumaTool. Decodificación, canvas, ICO, ZIP, manifest y HTML se generan en el cliente.

Ejemplos

Ejemplos de entrada

Entrada de ejemplo 
/favicon.ico
/favicon-32x32.png
/apple-touch-icon.png
Salida de ejemplo 
favicon.ico link tag
16x16 and 32x32 PNG link tags
apple-touch-icon link tag

Generador de etiquetas 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.

Ejemplos de salida

Entrada de ejemplo 
favicon paths and theme color
Salida de ejemplo 
favicon.ico link tag
16x16 and 32x32 PNG link tags
apple-touch-icon link tag
site.webmanifest link tag
theme-color meta tag

Tu archivo se procesa localmente en el navegador y no se sube a servidores de LumaTool. Decodificación, canvas, ICO, ZIP, manifest y HTML se generan en el cliente.

Nota de privacidad

Tu archivo se procesa localmente en el navegador y no se sube a servidores de LumaTool. Decodificación, canvas, ICO, ZIP, manifest y HTML se generan en el cliente.

Cómo usar

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

Ejemplos reales

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.

Casos de uso

  • 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.

Preguntas frecuentes

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.

¿Para qué sirve mejor Generador de etiquetas favicon?

Generador de etiquetas favicon sirve para tareas rápidas de herramientas de iconos desde el navegador, como revisar, convertir, limpiar o formatear datos.

¿Cómo se trata mi entrada?

Tu archivo se procesa localmente en el navegador y no se sube a servidores de LumaTool. Decodificación, canvas, ICO, ZIP, manifest y HTML se generan en el cliente.

Herramientas relacionadas

G

Generador de favicon

Crea favicon.ico, PNG, Apple Touch Icon, iconos Android, manifest, vistas previas, etiquetas HTML y ZIP en el navegador.

Herramientas de iconos Disponible Procesamiento local Sin subida Usar ahora G

Generador de iconos de app

Genera tamaños de icono para iOS, Android y PWA desde PNG, JPG, WebP o SVG con vista de zona segura.

Herramientas de iconos Disponible Procesamiento local Sin subida Usar ahora C

Conversor ICO

Convierte PNG, JPG y WebP a archivos favicon.ico de varios tamaños.

Herramientas de imagen Disponible Procesamiento local Sin subida Usar ahora V

Vista previa SVG segura

Previsualiza SVG de forma aislada e inspecciona tamaño, colores y riesgos.

Herramientas de imagen Disponible Procesamiento local Sin subida Usar ahora O

Optimizador SVG

Comprime, limpia, sanea, previsualiza, copia y descarga SVG eliminando scripts, eventos, metadata y contenido riesgoso.

Herramientas de iconos Disponible Procesamiento local Sin subida Usar ahora