Generador de Favicon
Sube una imagen, descarga todos los tamaños de favicon — PNG de 16 a 512 px más las etiquetas HTML. Funciona por completo en tu navegador.
1.149 visitas
No se pudo leer la imagen — prueba con PNG/JPG/WebP
Los Tamaños Que Importan en 2026
Distintos dispositivos y contextos esperan cada uno un tamaño de favicon diferente, porque un favicon no es un solo archivo — es una familia de archivos. Las pestañas del navegador usan PNG diminutos de 16×16 y 32×32 píxeles. El "Añadir a pantalla de inicio" de iOS usa un apple-touch-icon de 180×180. Android y las PWA instaladas obtienen íconos de 192×192 y 512×512 píxeles desde el manifiesto de la app web para su arte de pantalla de inicio y de carga. Una sola imagen de origen no puede servir directamente a todos estos casos — un logo de 512 px comprimido directamente en una pestaña de 16 px pierde casi todo su detalle, y un ícono de 16 px estirado hasta 512 px se ve borroso y con bloques. Así que el enfoque correcto es renderizar una fuente de alta resolución hacia cada tamaño objetivo por separado, redibujando los píxeles de cero en cada tamaño en lugar de escalar una salida a partir de otra.
Eso es exactamente lo que hace esta herramienta: carga tu imagen de origen en un canvas HTML dentro de tu navegador y la redimensiona a los seis tamaños estándar — 16, 32, 48, 180, 192 y 512 píxeles — cada uno dibujado directamente desde el original, y luego te entrega los PNG correspondientes junto con las etiquetas <link> para pegar en el <head> de tu sitio. Nada se sube; el redimensionado ocurre con la Canvas API en tu propio dispositivo.
Diseñar Para el Tamaño Más Pequeño
Como se pierde tanto detalle a 16 px, el diseño de favicons se trabaja al revés, partiendo del tamaño más pequeño y no del más grande. Recorta al símbolo del logo en lugar de al nombre completo escrito — el texto se convierte en una mancha ilegible por debajo de unos 24 px. Mantén un contraste fuerte tanto contra barras de pestañas claras como oscuras, ya que los navegadores alternan entre temas. Un color de fondo sólido suele leerse mejor que la transparencia en los tamaños más pequeños, donde unos pocos píxeles semitransparentes en el borde pueden parecer ruido. Muchas marcas mantienen una versión simplificada de "ícono de app" de su logo — una sola letra, inicial o glifo — precisamente porque su logo completo no sobrevive a la prueba de los 16 px.
También ayuda entender el archivo de manifiesto que conecta los íconos de 192 y 512 píxeles para los sitios instalables: el manifiesto de la app web (manifest.json) referencia esos dos tamaños por URL para que los instaladores de PWA de Android y escritorio sepan qué ícono buscar para la pantalla de inicio y el selector de apps. Los sitios que omiten los íconos del manifiesto siguen siendo totalmente funcionales — la pestaña del navegador y los íconos de pantalla de inicio de iOS funcionan de forma independiente — pero el propio aviso de instalación puede recurrir a un ícono genérico o directamente no ofrecer la instalación.
Preguntas Frecuentes
¿Todavía necesito un archivo .ico?
Rara vez. Todos los navegadores modernos aceptan favicons PNG declarados mediante el atributo sizes en una etiqueta link. Mantener un /favicon.ico en la raíz de tu sitio solo ayuda a agentes de usuario muy antiguos y herramientas que piden directamente esa ruta heredada fija.
¿Qué imagen debería subir?
Una imagen cuadrada, idealmente de 512 px o más, PNG o un raster exportado desde SVG con el símbolo centrado y suficiente margen a su alrededor. Las imágenes no cuadradas se recortan al centro en un cuadrado antes de redimensionar, para que nada se estire.
¿Por qué mi ícono se ve borroso o sucio a 16 px?
Dieciséis píxeles físicamente no pueden contener detalle fino — los trazos delgados, los degradados y el texto pequeño se disuelven en una mancha. Simplifica el símbolo de origen, aumenta el contraste, o diseña una versión dedicada para tamaños pequeños si tu logo completo no sobrevive al ícono de pestaña más diminuto.
¿Cuál es la diferencia entre los íconos de 192 px y 512 px?
Ambos alimentan los manifiestos de Android y PWA: el de 192 px se usa para el ícono de pantalla de inicio en densidad normal, mientras que el de 512 px se usa para pantallas de alta densidad y para la pantalla de carga que se muestra mientras se abre una PWA — Android elige el que corresponda según el contexto.
¿Tengo que añadir todos los tamaños, o solo un par?
Para un sitio moderno, 32 px más el apple-touch-icon de 180 px cubre a la gran mayoría de los visitantes. Añade los íconos de manifiesto de 192/512 px solo si el sitio es instalable como PWA; los tamaños de 16 y 48 px ayudan sobre todo en contextos heredados.
Herramientas Similares
Reportar un Problema
Generador de Favicon
Comentarios
Aún no hay comentarios — ¡sé el primero en escribir uno!