Conversión segura en el servidor
Generador de favicon
Convierte una sola imagen en un juego completo de favicon. Obtienes un favicon.ico de
varios tamaños, los tamaños PNG que esperan los navegadores y los teléfonos, un manifiesto web y el
código HTML exacto para pegar en tus páginas, todo en un ZIP. Hace mucho que un favicon no es un solo archivo,
y esta herramienta genera todas las piezas en lugar de dejarte averiguar cuáles necesitas.
Arrastra y suelta tu imagen PNG aquí
Añade varias a la vez. Cada archivo se procesa y luego se elimina de nuestro servidor.
Hasta 20 MB por archivo Admite lotes
Cola de conversión
→
Tu navegador no pudo leer este archivo, así que se convirtió en nuestro servidor y se eliminó allí de inmediato.
Tu archivo tenía fotogramas o páginas. Esta descarga solo incluye el primero.
Paso a paso
Cómo usar esta herramienta en 4 pasos
-
Agrega tu logotipo
Funciona mejor cuadrado, idealmente de 512×512 o más. Sirven PNG, JPG, WebP y SVG; un SVG es lo ideal, porque se renderiza nítido a cualquier tamaño.
-
Espera un momento mientras se genera el juego
-
Descarga el ZIP y descomprímelo
-
Sube todos los archivos a la raíz de tu sitio
Sube todos los archivos a la raíz de tu sitio y pega el HTML del README incluido en tu
<head>.
Conviene saber
Sobre este formato
Hubo un tiempo en que un favicon era un solo archivo de 16×16 llamado favicon.ico en la
raíz del sitio. Eso sigue funcionando, y sigue viéndose mal casi en todas partes, porque los lugares en
los que aparece un icono se han multiplicado.
Lo que incluye el archivo, y por qué existe cada cosa:
favicon.ico: el archivo clásico, con versiones de 16, 32, 48 y 256 píxeles en uno. Los navegadores lo buscan automáticamente, Windows lo usa para los accesos directos, y muchas herramientas de vista previa de enlaces y de fuentes RSS lo esperan.favicon-16x16.pngyfavicon-32x32.png: los navegadores modernos prefieren PNG cuando se les ofrece, y 32 es lo que usa una pestaña de alta densidad.apple-touch-icon.png(180×180): la pantalla de inicio de iOS. Sin él, quien guarde tu sitio en un iPhone obtiene una captura borrosa en lugar de tu logotipo.android-chrome-192x192.pngy512x512: pantallas de inicio y pantallas de carga de Android.site.webmanifest: indica a Android qué iconos usar y cómo mostrar tu sitio cuando se guarda. Ábrelo y rellena el nombre de tu sitio, que dejamos en blanco porque no lo conocemos.README.txt: dónde va cada archivo y el HTML que hay que pegar. Se incluye porque los archivos no sirven de nada sin él, y porque quien abra este archivo dentro de seis meses no tendrá esta página delante.
Los generadores antiguos producen veinte archivos o más para dispositivos que ya no existen: imágenes de mosaico de Windows, una docena de tamaños de Apple, browserconfig.xml. Este juego es pequeño a propósito: cubre todos los contextos que siguen importando en la práctica.
Calidad
Calidad y tamaño del archivo
La imagen de origen importa más que cualquier ajuste, y hay tres cosas sobre ella que deciden si el resultado se ve bien.
Empieza con algo grande, o con un vector. Un SVG es lo ideal, porque cada tamaño se renderiza a partir de las formas en lugar de escalarse desde un mapa de bits. Si no, usa 512×512 o más: solo el icono de Android ya necesita 512.
Hazlo cuadrado. Los iconos son cuadrados en todos los sitios donde aparecen. Un logotipo ancho se encajará en un cuadrado con espacio alrededor y se verá pequeño y perdido. Recórtalo antes en cuadrado o diseña una marca cuadrada.
Simplifica. Es lo que la mayoría se salta, y importa más que la resolución. A 16×16 tienes 256 píxeles en total: el logotipo completo de una empresa con su eslogan es ilegible, por muy bueno que sea el original. Fíjate en los favicons de los sitios que usas a diario: casi todos son una sola letra, una marca sencilla o una forma contundente, y mucho más simples que el logotipo real de esa misma empresa.
Si tu logotipo es detallado, haz una versión simplificada aparte para el icono. Es lo normal y es lo que hacen las grandes organizaciones.
La transparencia se conserva. Normalmente es lo que quieres: un icono con fondo blanco incorporado se ve como un cuadrado blanco en un navegador con tema oscuro.
Instalar el juego de iconos
Sube todo a la raíz de tu sitio, para que los archivos estén disponibles en
https://example.com/favicon.ico, etc. Las subcarpetas no sirven: los navegadores buscan
específicamente /favicon.ico, y las rutas del manifiesto dan por hecho la raíz.
Después, agrega esto a tu <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Por último, abre site.webmanifest y rellena name y
short_name.
«Lo subí y no cambió nada»
Es con mucho el problema más común, y casi nunca son los archivos.
Los navegadores guardan los favicons en caché de forma muy agresiva, a menudo más que cualquier otro recurso, y a veces ignoran por completo una recarga normal. Antes de concluir que algo está mal:
- Prueba una recarga forzada, una ventana de incógnito o un navegador con el que nunca hayas visitado el sitio.
- Abre el archivo directamente (
https://example.com/favicon.ico) para confirmar que realmente está ahí y se está sirviendo. - Dale tiempo. Algunos navegadores solo vuelven a comprobar el icono pasado un rato, o después de reiniciarse.
Si el archivo se abre directamente pero la pestaña sigue mostrando el icono antiguo, es la caché. Si el archivo da un error 404, está en el lugar equivocado.
¿También quieres un icono SVG?
Los navegadores modernos aceptan un favicon SVG, que se mantiene nítido a cualquier tamaño y puede adaptarse al modo oscuro:
<link rel="icon" href="/icon.svg" type="image/svg+xml">Es un buen complemento, no un sustituto. Conserva el ICO como respaldo: los accesos directos de Windows, los navegadores antiguos y muchas herramientas de terceros todavía lo buscan.
Más allá de los sitios web
El favicon.ico de este archivo es un icono normal de Windows con varios tamaños, así
que también sirve para iconos de aplicaciones, accesos directos del escritorio e iconos de carpetas.
Donde Windows muestre un icono, elegirá el tamaño que mejor encaje con la vista, que es justo por lo
que el archivo contiene cuatro.
Privacidad
Qué pasa con tu archivo
Esta herramienta funciona en nuestro servidor, así que da el mismo resultado en cualquier teléfono u ordenador. Tu archivo se sube, y esto es exactamente lo que le pasa:
- Se guarda fuera de la parte pública del servidor con un nombre aleatorio, nunca con el nombre de tu archivo.
- Se procesa y el archivo original se elimina de inmediato, tanto si la conversión funciona como si falla.
- El resultado queda tras un enlace firmado que solo recibes tú, que deja de funcionar a los 20 minutos, y el archivo se elimina en cuanto lo descargas.
- Lo que nunca se descarga se elimina automáticamente en menos de 30 minutos.
- La imagen en sí nunca se registra ni se guarda. Si una conversión falla, anotamos los formatos y el error, no el archivo.
- Los metadatos de la cámara, incluidas las coordenadas GPS que indican dónde se tomó la foto, se eliminan del resultado. Solo se conserva la rotación necesaria para mostrar la imagen derecha.
Preguntas y respuestas
Generador de favicon: preguntas frecuentes
¿De qué tamaño debe ser mi imagen de origen?
De 512×512 o más, y cuadrada. Un SVG es todavía mejor, porque cada tamaño se renderiza a partir de las formas en lugar de escalarse desde los píxeles. Solo el icono de Android ya necesita 512, así que cualquier cosa más pequeña se ampliará.
¿Qué archivos tengo que subir realmente?
Todos, a la raíz de tu sitio, no a una subcarpeta. Los navegadores buscan específicamente /favicon.ico, y el manifiesto hace referencia a los iconos de Android con rutas relativas a la raíz. El README incluido explica para qué sirve cada archivo.
Subí los archivos pero mi navegador sigue mostrando el icono antiguo.
Casi seguro que es la caché, no los archivos. Los navegadores guardan los favicons en caché de forma muy agresiva y a veces ignoran una recarga normal. Prueba una ventana de incógnito o un navegador con el que no hayas visitado el sitio, y abre /favicon.ico directamente para confirmar que se sirve. Si se abre pero la pestaña no se actualiza, es la caché; si da un 404, está en el lugar equivocado.
¿Por qué mi logotipo se ve borroso en tamaños pequeños?
Porque a 16×16 tienes 256 píxeles en total, y ninguna resolución lo arregla. Haz una versión simplificada para el icono: una sola letra, una marca sencilla o una forma contundente. Fíjate en los favicons de los sitios que usas a diario: casi todos son mucho más simples que el logotipo real de la empresa.
¿Sigo necesitando favicon.ico si tengo iconos PNG?
Sí, consérvalo. Los navegadores piden /favicon.ico automáticamente aunque no haya etiqueta de enlace, y los accesos directos de Windows, los navegadores antiguos y muchas herramientas de fuentes RSS y vistas previas de enlaces lo buscan específicamente. Los PNG son lo que prefieren los navegadores modernos cuando se les ofrecen ambos.
¿Por qué tan pocos archivos? Otros generadores producen veinte o más.
Porque la mayoría de ellos están pensados para dispositivos que ya no existen: imágenes de mosaico de Windows, una docena de tamaños antiguos de Apple, browserconfig.xml. Estos seis cubren todos los contextos que siguen importando, y un juego más pequeño es más fácil de instalar correctamente.
Sigue explorando
Herramientas de imagen relacionadas
Convertir PNG a ICO
Convierte PNG en un ICO de varios tamaños como es debido, con versiones de 16, 32, 48 y 256 píxeles. Se conserva la transparencia.
Convertir ICO a PNG
Convierte archivos ICO de Windows a PNG conservando la transparencia. Extrae la imagen más grande que contiene el icono.
Convertir SVG a PNG
Convierte SVG a PNG a cualquier resolución, con la transparencia intacta. Se renderiza a partir del vector, así que los bordes quedan nítidos a cualquier tamaño...
Redimensionar imagen
Cambia una imagen a cualquier tamaño en píxeles. Mantén las proporciones o fija ambas medidas, con ajustes para redes sociales. Gratis y sin registro.