Generador de favicon — favicon.ico e iconos PNG
Herramienta de navegador que crea favicon.ico, iconos PNG en varios tamaños, el manifest y el código HTML
Funciona en tu navegador · no se sube nada
Uno o dos caracteres se leen mejor. Se admiten hasta 4.
Se guarda en "name" de site.webmanifest.
Qué es
Un favicon es el pequeño icono que aparece en las pestañas del navegador, en los marcadores y en la pantalla de inicio. Esta herramienta convierte un logotipo, unas letras o un emoji en todos los tamaños que necesitas, y te da las etiquetas HTML y el manifiesto de aplicación web que los acompañan. La imagen se procesa solo dentro de tu navegador.
Cómo se usa
- Elige en Crearlo a partir de. Texto o emoji te deja escoger el texto, la fuente y el fondo; Una imagen usa el archivo de tu logotipo.
- Con una imagen, decide Cómo hacerla cuadrada (recortar el centro o añadir márgenes) y si activas Fondo transparente. Elige una Forma: cuadrado, cuadrado redondeado o círculo.
- Si quieres, rellena Nombre del sitio, Nombre corto y Color del tema; se incluyen en site.webmanifest y en el código HTML.
- Revisa la vista previa de cada tamaño y descárgalos uno a uno o pulsa Descargar todo (ZIP).
- Sube los archivos a la raíz de tu sitio y pega el Código para el
<head>de tu HTML.
Archivos y reglas
| Archivo | Tamaño | Uso |
|---|---|---|
| favicon.ico | 16, 32, 48 | icono por defecto del navegador, entornos antiguos |
| favicon-16x16.png, favicon-32x32.png | 16, 32 | pestaña del navegador |
| favicon-48x48.png | 48 | acceso directo del escritorio |
| apple-touch-icon.png | 180 | pantalla de inicio de iOS (cuadrado opaco hasta los bordes) |
| android-chrome-192x192.png, android-chrome-512x512.png | 192, 512 | Android, PWA |
| android-chrome-maskable-512x512.png (opcional) | 512 | icono adaptable de Android: dibujo en la zona segura central sobre un fondo hasta los bordes |
- Imagen maestra: primero se dibuja un cuadrado de 512 px y todos los tamaños salen de él. Los tamaños pequeños se obtienen dividiendo a la mitad paso a paso, lo que deja bordes más limpios que un único salto grande.
- Estructura del ICO: una cabecera de 6 bytes, una entrada de directorio de 16 bytes por imagen y después los datos PNG.
- Ajuste del texto: el ancho del texto no pasa de un 78 % del icono y el tamaño de la fuente, del 72 %.
- Color del texto: se adapta al fondo con un negro o un blanco legible; aun así puedes cambiarlo.
Ejemplo de código
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Preguntas frecuentes
¿Se sube mi imagen?
No. El redimensionado y el empaquetado del archivo ICO se hacen dentro de tu navegador, y los resultados solo se descargan en tu dispositivo.
¿Qué archivos se generan?
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png y un favicon.ico con 16, 32 y 48. Además incluye un site.webmanifest y las etiquetas link de HTML, y puedes descargarlo todo en un solo ZIP.
¿Qué hay dentro de favicon.ico?
Imágenes de 16, 32 y 48 píxeles guardadas como flujos PNG dentro de un contenedor ICO. Los navegadores actuales y Windows desde Vista leen ese formato. La herramienta escribe ella misma la cabecera y el directorio del ICO, y sus pruebas comprueban los bytes mágicos (00 00 01 00) y el número de entradas.
¿Qué pasa si la imagen no es cuadrada?
Un favicon es cuadrado, así que por defecto se recorta el cuadrado más grande centrado. Si el recorte estropea tu logotipo, elige «Mantenerla entera con márgenes» para conservar las proporciones y dejar transparente el espacio sobrante.
¿Algo que tener en cuenta con texto o emoji?
A 16 píxeles solo se leen uno o dos caracteres grandes. Los emoji se ven distintos en cada plataforma, así que el icono usa el dibujo que hace tu dispositivo. Las fuentes también salen de tu dispositivo, de modo que algunas letras pueden variar un poco de un ordenador a otro.
¿Dónde pongo los archivos?
Súbelos a la raíz de tu sitio y pega las etiquetas link en el head de tu HTML. Si van en otra carpeta, cambia las rutas en el código. Los navegadores guardan los favicons en caché durante mucho tiempo, así que borra la caché si un cambio no aparece enseguida.
