Señor Herramientas

Cómo usar

Cómo crear un favicon

El generador de favicon permite crear en el navegador un conjunto completo desde una imagen o un texto corto. Ajuste fondo, esquinas, tamaño de texto y colores en la vista previa cuadrada, y revise los tamaños generados antes de guardar.

Miniatura de Generador de faviconMiniatura de Generador de favicon

Casos de uso

Cuándo usarla

  • Preparar un conjunto de favicon antes de publicar un sitio
  • Crear archivos favicon sin software de edición de imágenes
  • Generar iconos PWA y manifest al mismo tiempo
  • Convertir rápidamente un logotipo en favicon.ico
  • Copiar un ejemplo HTML listo para usar en el sitio
  • Crear un favicon simple basado en texto en pocos pasos

Capacidades

Qué puede hacer esta herramienta

  • Generar favicon.ico y varios tamaños PNG a la vez
  • Crear SVG favicon y site.webmanifest
  • Ajustar fondo, margen y esquinas redondeadas
  • Descargar en ZIP y copiar un ejemplo HTML
  • Admitir entrada por imagen y por logotipo de texto
  • Crear un conjunto de favicon completamente en el navegador

Guía

Cómo usar cada zona de la pantalla

Aprenda a usar cada zona de la pantalla, incluidos ajustes, entrada, vistas previas, resultados y guardado.

01 HOWTO

Zona de material base

Referencia detallada por zonas para elegir el material del favicon, ajustar un logo de texto, revisar vistas cuadradas y tamaños, y guardar ICO, PNG, SVG, manifest y ejemplos HTML.

Pantalla que muestra Zona de material base en Generador de faviconPantalla que muestra Zona de material base en Generador de favicon

Qué puede hacer esta zona

  • Elija o revise la fuente de generación en esta zona.
  • Ajuste las opciones que afectan al resultado generado.
  • Revise la vista, fuerza o información de salida antes de guardar.
  • Guarde, copie, regenere o vuelva a los ajustes relacionados.

Dónde usarla

01
Elegir base

Elija o revise esta entrada antes de generar.

Pantalla que muestra dónde usar Elegir base en Generador de faviconPantalla que muestra dónde usar Elegir base en Generador de favicon
02
Ajustes de texto

Ajuste esta opción para el resultado previsto.

Pantalla que muestra dónde usar Ajustes de texto en Generador de faviconPantalla que muestra dónde usar Ajustes de texto en Generador de favicon
03
Vista cuadrada

Use esta vista o información para verificar el resultado.

Pantalla que muestra dónde usar Vista cuadrada en Generador de faviconPantalla que muestra dónde usar Vista cuadrada en Generador de favicon
04
Ir a generar

Guarde, copie, regenere o vuelva a la zona relacionada.

Pantalla que muestra dónde usar Ir a generar en Generador de faviconPantalla que muestra dónde usar Ir a generar en Generador de favicon

02 HOWTO

Zona de ajuste visual

Referencia detallada por zonas para elegir el material del favicon, ajustar un logo de texto, revisar vistas cuadradas y tamaños, y guardar ICO, PNG, SVG, manifest y ejemplos HTML.

Pantalla que muestra Zona de ajuste visual en Generador de faviconPantalla que muestra Zona de ajuste visual en Generador de favicon

Qué puede hacer esta zona

  • Elija o revise la fuente de generación en esta zona.
  • Ajuste las opciones que afectan al resultado generado.
  • Revise la vista, fuerza o información de salida antes de guardar.
  • Guarde, copie, regenere o vuelva a los ajustes relacionados.

Dónde usarla

01
Ajustar texto y color

Elija o revise esta entrada antes de generar.

Pantalla que muestra dónde usar Ajustar texto y color en Generador de faviconPantalla que muestra dónde usar Ajustar texto y color en Generador de favicon
02
Revisar vista

Ajuste esta opción para el resultado previsto.

Pantalla que muestra dónde usar Revisar vista en Generador de faviconPantalla que muestra dónde usar Revisar vista en Generador de favicon
03
Revisar base

Use esta vista o información para verificar el resultado.

Pantalla que muestra dónde usar Revisar base en Generador de faviconPantalla que muestra dónde usar Revisar base en Generador de favicon
04
Preparar generación

Guarde, copie, regenere o vuelva a la zona relacionada.

Pantalla que muestra dónde usar Preparar generación en Generador de faviconPantalla que muestra dónde usar Preparar generación en Generador de favicon

03 HOWTO

Zona de vista por tamaños

Referencia detallada por zonas para elegir el material del favicon, ajustar un logo de texto, revisar vistas cuadradas y tamaños, y guardar ICO, PNG, SVG, manifest y ejemplos HTML.

Pantalla que muestra Zona de vista por tamaños en Generador de faviconPantalla que muestra Zona de vista por tamaños en Generador de favicon

Qué puede hacer esta zona

  • Elija o revise la fuente de generación en esta zona.
  • Ajuste las opciones que afectan al resultado generado.
  • Revise la vista, fuerza o información de salida antes de guardar.
  • Guarde, copie, regenere o vuelva a los ajustes relacionados.

Dónde usarla

01
Generar favicon

Elija o revise esta entrada antes de generar.

Pantalla que muestra dónde usar Generar favicon en Generador de faviconPantalla que muestra dónde usar Generar favicon en Generador de favicon
02
Vistas por tamaño

Ajuste esta opción para el resultado previsto.

Pantalla que muestra dónde usar Vistas por tamaño en Generador de faviconPantalla que muestra dónde usar Vistas por tamaño en Generador de favicon
03
Revisar vista cuadrada

Use esta vista o información para verificar el resultado.

Pantalla que muestra dónde usar Revisar vista cuadrada en Generador de faviconPantalla que muestra dónde usar Revisar vista cuadrada en Generador de favicon
04
Ir a guardar

Guarde, copie, regenere o vuelva a la zona relacionada.

Pantalla que muestra dónde usar Ir a guardar en Generador de faviconPantalla que muestra dónde usar Ir a guardar en Generador de favicon

04 HOWTO

Zona de archivos de salida

Referencia detallada por zonas para elegir el material del favicon, ajustar un logo de texto, revisar vistas cuadradas y tamaños, y guardar ICO, PNG, SVG, manifest y ejemplos HTML.

Pantalla que muestra Zona de archivos de salida en Generador de faviconPantalla que muestra Zona de archivos de salida en Generador de favicon

Qué puede hacer esta zona

  • Elija o revise la fuente de generación en esta zona.
  • Ajuste las opciones que afectan al resultado generado.
  • Revise la vista, fuerza o información de salida antes de guardar.
  • Guarde, copie, regenere o vuelva a los ajustes relacionados.

Dónde usarla

01
Guardar y copiar

Elija o revise esta entrada antes de generar.

Pantalla que muestra dónde usar Guardar y copiar en Generador de faviconPantalla que muestra dónde usar Guardar y copiar en Generador de favicon
02
Revisar tamaños

Ajuste esta opción para el resultado previsto.

Pantalla que muestra dónde usar Revisar tamaños en Generador de faviconPantalla que muestra dónde usar Revisar tamaños en Generador de favicon
03
Generar de nuevo

Use esta vista o información para verificar el resultado.

Pantalla que muestra dónde usar Generar de nuevo en Generador de faviconPantalla que muestra dónde usar Generar de nuevo en Generador de favicon
04
Volver a base

Guarde, copie, regenere o vuelva a la zona relacionada.

Pantalla que muestra dónde usar Volver a base en Generador de faviconPantalla que muestra dónde usar Volver a base en Generador de favicon

Notas

Notas

Los puntos importantes se agrupan junto con sus razones para que pueda decidir antes de usar la herramienta.

Comprobar

Mantener la marca legible en tamaños pequeños

Los favicon se muestran en 16x16 y 32x32. Un texto corto o una marca simple suele reconocerse mejor que una imagen con muchos detalles.

Comprobar

Confirmar el contraste con el fondo

Si usa fondo sólido o degradado, confirme que el texto o la marca no se pierdan sobre el fondo.

Comprobar

Aplicar el HTML y el manifest

Use los archivos generados junto con el ejemplo HTML y el manifest para que navegadores e iconos de pantalla de inicio los detecten correctamente.

FAQ

Preguntas sobre Generador de favicon

Primero se resumen las preguntas que ayudan a decidir antes de usarla.

¿Las imágenes se suben a un servidor externo?

No. La generación del favicon se ejecuta completamente en el navegador y los archivos no se envían al exterior.

¿Qué archivos puede generar?

Puede generar favicon.ico, varios tamaños PNG, SVG favicon, site.webmanifest y un ejemplo HTML.

¿Puedo usarlo sin una imagen?

Sí. El modo de logotipo de texto permite crear un favicon simple a partir de una cadena corta.

¿Puedo descargar todo en un archivo ZIP?

Sí. El conjunto generado se puede guardar como ZIP.

¿Genera también el manifest para PWA?

Sí. Según el preajuste seleccionado, también puede generar site.webmanifest.

¿Puedo revisar cómo se ve en tamaños pequeños?

Sí. Puede comprobar el aspecto en tamaños como 16x16 y 32x32 dentro del área de vista previa.

Siguientes guías

Guías relacionadas

Las guías relacionadas se muestran a continuación para que pueda continuar sin perderse.