Imágenes, SVG e iconos
Suelta un logo o un .ico existente, revisa la pestaña a 16 px y descarga el paquete completo.
Suelta aquí un archivo PNG, JPG, WebP, GIF, SVG o ICO, o pega una imagen del portapapeles.
Las imágenes se leen y redimensionan en esta pestaña; no se sube nada.
Elige, suelta o pega una imagen para empezar.
Elige, suelta o pega una imagen para empezar.
Un sitio nuevo, un cambio de logo o un aviso de Lighthouse acaban en lo mismo: tienes un logo y necesitas media docena de archivos de icono y las etiquetas link que los enlazan. Este generador de favicon crea el conjunto actual a partir de esa única imagen, sin redimensionar seis veces la misma foto en un editor.
También sirve al revés. Suelta el favicon.ico que heredaste de otro proyecto: verás cada tamaño guardado dentro, podrás guardarlo como PNG y el más grande servirá de origen para los iconos de Apple y Android que falten.
Crea lo que navegadores y móviles piden hoy, y nada de lo que ya dejaron de pedir.
Un favicon.ico con varios tamaños, PNG de 16 y 32 px, el apple-touch-icon de 180 px, iconos Android de 192 y 512 px y el site.webmanifest salen de una sola imagen. Las etiquetas HTML apuntan a tu ruta real, así que un sitio servido desde /static/ no necesita seis correcciones a mano.
Suelta un favicon.ico existente y verás cada imagen incrustada con sus dimensiones reales, profundidad de color, codificación PNG o BMP y peso. Guarda cualquiera como PNG, o todas en un ZIP, sin buscar otra web.
iOS pone los iconos táctiles transparentes sobre negro. Por eso el apple-touch-icon siempre se rellena con tu color de fondo y se deja cuadrado, ya que iOS aplica su propia máscara redondeada; los iconos del navegador conservan la transparencia.
Un SVG o un PNG cuadrado de al menos 512 px da el resultado más nítido. Una imagen no cuadrada se centra en lugar de recortarse, y una imagen de mapa de bits de menos de 512 px muestra un aviso con su tamaño real, porque el icono Android de 512 px sería una ampliación.
La generación se repite unos 300 ms después de cada cambio. Fíjate en las pestañas clara y oscura y en el zoom ×4: los trazos finos y el texto pequeño desaparecen a 16 px. Un poco de margen ayuda a los logos anchos; el radio solo afecta a los iconos del navegador y de Android.
La ruta se escribe en cada etiqueta link y en cada src del manifest. Si los archivos irán en /assets/icons/, escríbela primero, descarga el ZIP y pega el HTML en el head de tus páginas.
favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png y site.webmanifest, más favicon.svg si el origen es un SVG. Todo está en la raíz del ZIP, listo para copiar junto a tu página de inicio.
El ICO puede combinar 16, 24, 32, 48, 64, 128 y 256 px, guardados como datos PNG que leen todos los navegadores actuales y Windows. Sirve para convertir PNG a ICO, no solo para crear un favicon completo.
El formato se reconoce por los bytes, no por la extensión, y los avisos indican el ancho y el alto reales. Un SVG nunca se marca como demasiado pequeño, porque escala sin pérdida.
Las etiquetas link, la meta theme-color y la lista de iconos del manifest salen de la misma ruta y los mismos colores, así que el HTML nunca apunta a un archivo que falte en el ZIP.
Para navegadores y móviles actuales: un favicon.ico con 16, 32 y 48 px, PNG de 16 y 32 px, un apple-touch-icon de 180 px e iconos de 192 y 512 px declarados en site.webmanifest. Justo lo que este generador de favicon mete en el ZIP.
Parte de un logo cuadrado o un SVG, suéltalo aquí, revisa la vista a 16 px, fija la ruta y descarga el ZIP junto con el HTML. Todo ocurre en el navegador y no hace falta registrarse.
El favicon.ico, a ser posible en la raíz del sitio, porque algunos navegadores y lectores de feeds piden /favicon.ico aunque no haya etiqueta link. El resto de archivos puede ir en una subcarpeta si indicas la ruta correcta.
Suelta el PNG, elige qué tamaños quieres dentro del ICO y pulsa Descargar favicon.ico. Obtienes un ICO real con varios tamaños, no un PNG con la extensión cambiada.
Sube los archivos del ZIP a la ruta indicada y pega el HTML copiado en el head de cada página. Ya incluye el enlace al manifest y la meta theme-color.
Los dos. El ICO cubre navegadores antiguos y rastreadores que piden /favicon.ico directamente; los navegadores modernos usan PNG y SVG. Aquí ambos salen de la misma imagen.
¿Falta algún tamaño o plataforma?
Suelta tu logo en el generador de favicon, revisa la pestaña de 16 px sobre fondo claro y oscuro, y lleva el ZIP y las etiquetas del head a tu sitio.
Guarda el archivo original del logo para futuras ediciones.