Generador de favicon
Todos los tamaños de favicon, un .ico multitamaño real y un manifiesto web a partir de una sola imagen. Todo se ejecuta localmente: no se sube nada.
- Entrada
- PNG · JPEG · WebP · SVG
- Salida
- ICO · PNG · webmanifest · ZIP
Suelta tu logotipo
PNG, JPEG, WebP o SVG. Lo ideal es cuadrado y de al menos 512 × 512 px. También puedes pegar una imagen.
Crear un favicon: todos los archivos desde una sola imagen
Este generador de favicon convierte un único logotipo en el conjunto completo que necesita hoy un sitio web: un favicon.ico con iconos de 16, 32 y 48 píxeles dentro, PNG nítidos de 16 a 512 píxeles, el Apple touch icon, los iconos de Android Chrome, un site.webmanifest y las etiquetas HTML para pegar en tu página. Haz cuadrada la imagen, añade margen, redondea las esquinas o colócala sobre un fondo sólido y descárgalo todo en un ZIP. El redimensionado y el ZIP se hacen en tu dispositivo, así que tu logotipo nunca se sube a ningún sitio.
Cómo crear un favicon
- Suelta un PNG, JPEG, WebP o SVG en la página, o pégalo. Un logotipo cuadrado de al menos 512 × 512 píxeles, o un SVG, da el resultado más nítido.
- Elige Ajustar para conservar la imagen entera con espacio alrededor, o Rellenar para recortarla en un cuadrado. Añade margen y radio de esquina si quieres un icono redondeado.
- Elige un color de fondo o déjalo transparente. El Apple touch icon siempre lleva un fondo sólido, porque iOS pinta la transparencia de negro.
- Rellena el nombre de la aplicación y los colores del manifest web y pulsa Descargar ZIP, o descarga archivos sueltos desde la vista previa.
- Sube los archivos a la raíz de tu sitio y pega las etiquetas HTML en el
<head>de cada página.
¿Qué archivos de favicon necesitan de verdad los navegadores actuales?
Los consejos sobre favicons están llenos de restos de 2012: decenas de tamaños, XML de mosaicos de Windows y máscaras de pestañas fijadas de Safari. Los navegadores actuales buscan mucho menos. Cuatro archivos cubren prácticamente todos los navegadores, teléfonos y sistemas operativos en uso.
Todo lo demás del ZIP está ahí para estar completo: los PNG de 16, 32 y 48 píxeles para herramientas y CMS que los piden por nombre, y un mosaico opcional de Windows de 150 × 150 para sitios fijados antiguos. Los archivos extra no hacen daño, pero no hace falta enlazarlos todos.
- favicon.ico
- La alternativa universal. Los navegadores piden /favicon.ico por su cuenta aunque ninguna etiqueta apunte a él, y lo mismo hacen los lectores RSS, los gestores de marcadores y los rastreadores. Un archivo contiene las versiones de 16, 32 y 48 píxeles, y cada una es un PNG dentro del contenedor ICO, que todos los navegadores leen desde Windows Vista.
- icon.svg
- Un favicon vectorial, nítido a cualquier tamaño y nivel de zoom. Chrome, Edge, Firefox y las versiones recientes de Safari lo usan cuando está enlazado. Solo lo obtienes si partes de un SVG; una imagen rasterizada no puede convertirse en un vector real.
- apple-touch-icon.png
- Un PNG opaco de 180 × 180 que los iPhone y iPad muestran cuando alguien añade tu sitio a la pantalla de inicio. iOS aplica su propia máscara redondeada, así que las esquinas deben ser rectas y el fondo sólido.
- Iconos del manifest
- Los PNG de 192 y 512 píxeles listados en site.webmanifest. Android los usa para el acceso directo en la pantalla de inicio y la pantalla de bienvenida de una aplicación web instalada, y Chrome los comprueba antes de ofrecer instalar un sitio.
Las etiquetas HTML que hay que pegar
El fragmento enlaza el ICO con sizes="32x32" en lugar de sizes="any". Con "any", Chrome prefiere el ICO incluso cuando hay un SVG disponible. Si subes un SVG, el fragmento también lo enlaza, de modo que los navegadores compatibles con favicons SVG lo usan y el resto recurre al ICO. Sin SVG, se enlazan en su lugar los PNG de 32 y 16 píxeles.
La metaetiqueta theme-color tiñe la barra del navegador en Android y en Safari, y site.webmanifest lleva el nombre de tu aplicación, los colores y los iconos grandes. Mantén los nombres de archivo tal cual y coloca todos los archivos en la raíz de tu dominio, o cambia las rutas del fragmento para que coincidan con donde los pongas.
Diseñar un favicon que sobreviva a 16 píxeles
- Simplifica. Un icono de 16 × 16 tiene 256 píxeles en total. Los logotipos con texto y las líneas finas se emborronan; una sola letra, un símbolo o el isotipo sin texto se leen mucho mejor.
- Usa un contraste que funcione con ambos colores de pestaña. Las pestañas del navegador son claras u oscuras según el tema. La vista previa muestra cada tamaño sobre un fondo blanco y otro casi negro, así detectas un logotipo oscuro que desaparece en modo oscuro antes de publicarlo.
- Ante la duda, ponle un fondo. Un fondo sólido con algo de margen y radio de esquina mantiene visible un logotipo fino o transparente en cualquier pestaña y queda intencionado en la pantalla de inicio.
- Parte de algo grande. Las imágenes se reducen en pasos a la mitad para conseguir bordes limpios, pero nada puede añadir detalle que no esté en el original. Usa 512 píxeles o más, o un SVG.
- Revisa los colores. Si el color de tu marca es demasiado tenue sobre una pestaña blanca u oscura, pruébalo con el comprobador de contraste, o convierte un valor que te dieron en otra notación con el conversor de colores.
Por qué no se sube nada
La mayoría de los generadores de favicon envían tu logotipo a un servidor para redimensionarlo. Este dibuja cada tamaño en un canvas de tu navegador, escribe el archivo ICO byte a byte en JavaScript y construye el ZIP con un pequeño módulo WebAssembly, así que la imagen nunca sale de tu dispositivo y la herramienta sigue funcionando sin conexión una vez cargada la página. Eso importa con una marca aún no lanzada o con el logotipo de un cliente que todavía no deberías compartir.
Preguntas frecuentes
- ¿Qué tamaño debe tener un favicon?
- Las pestañas del navegador muestran los favicons a 16 × 16 píxeles CSS, que son 32 × 32 en pantallas de alta densidad, por eso el ICO contiene versiones de 16, 32 y 48 píxeles. Añade un Apple touch icon de 180 × 180 y los iconos de 192 y 512 píxeles para el manifest web y tendrás cubiertos todos los casos habituales. Parte de una imagen de al menos 512 × 512 píxeles.
- ¿Sigo necesitando un archivo favicon.ico?
- Sí. Los navegadores, los lectores de feeds y los rastreadores piden /favicon.ico automáticamente aunque ninguna etiqueta apunte a él, y los navegadores antiguos solo entienden ICO. Mantén uno en la raíz de tu sitio junto a los iconos SVG y PNG.
- ¿Puedo usar un SVG como favicon?
- Sí. Chrome, Edge, Firefox y las versiones recientes de Safari admiten favicons SVG mediante una etiqueta link con type="image/svg+xml". Sube aquí un SVG y se incluye como icon.svg junto al ICO de respaldo, y el fragmento HTML enlaza ambos.
- ¿Qué es un apple-touch-icon?
- Es el PNG de 180 × 180 píxeles que usa un iPhone o iPad cuando alguien añade tu web a la pantalla de inicio. Debe tener fondo sólido y esquinas rectas, porque iOS redondea las esquinas por su cuenta y vuelve negras las zonas transparentes.
- ¿Por qué no se ve mi favicon?
- Los navegadores guardan los favicons en caché de forma agresiva, a menudo durante días. Comprueba que el archivo es accesible en la ruta de tu etiqueta link y luego fuerza la recarga o abre el sitio en una ventana privada. Renombrar el archivo o añadir un parámetro de versión como favicon.ico?v=2 obliga a descargarlo de nuevo.
- ¿Cómo convierto un PNG a ICO?
- Suelta el PNG en esta página y descarga favicon.ico. El generador lo redimensiona a 16, 32 y 48 píxeles y empaqueta los tres en un solo archivo ICO, con cada tamaño guardado como PNG dentro del contenedor.
- ¿Para qué sirve site.webmanifest?
- Es un pequeño archivo JSON que indica a Android y Chrome el nombre de tu sitio, el color del tema, el color de fondo y los iconos de 192 y 512 píxeles que deben usar cuando el sitio se añade a la pantalla de inicio o se instala como aplicación.
- ¿Se sube mi logotipo a un servidor?
- No. Cada icono se dibuja y codifica en tu navegador y el ZIP se construye en tu dispositivo. No se envía nada a ningún sitio, y la página sigue funcionando sin conexión una vez cargada.