Generador de favicon
Convierte una imagen, SVG, letras o un emoji en un favicon.ico, todos los tamaños de iconos PNG, un icono táctil de Apple y un manifiesto de aplicación web, todo en un solo ZIP. Gratis, y tus archivos nunca salen de tu dispositivo.
Vista previa
- 16
- 32
- 48 px
Pestañas del navegador
Pantalla de inicio: iPhone y Android
Agrega el favicon a tu sitio
Sube los archivos del ZIP a tu carpeta de íconos y luego pega estas etiquetas dentro del elemento head de cada página. Siguen la carpeta, el nombre y el color del tema que configuraste.
Cómo funciona
Un generador de favicons crea los pequeños íconos que los navegadores, los resultados de búsqueda y los celulares muestran para un sitio web. Este genera un favicon.ico de múltiples tamaños (16, 32 y 48 píxeles), íconos PNG de 16 a 512 píxeles, un ícono táctil de Apple de 180 píxeles, íconos adaptables para Android y un site.webmanifest a partir de tu imagen, SVG, letras o emoji, todo en tu navegador, y escribe las etiquetas HTML para pegar en tus páginas.
- Elige una fuente
Elige una imagen o SVG, o escribe letras o un emoji. Cada vista previa se actualiza mientras trabajas.
- Estiliza el ícono
Configura el fondo, el radio de las esquinas y el relleno, y luego revisa las vistas previas de la pestaña del navegador y la pantalla de inicio.
- Descarga y agrégalo
Crea el paquete, sube los archivos a tu sitio y pega las etiquetas HTML en el head de tus páginas.
Qué contiene el paquete
| Archivo | Píxeles | Uso |
|---|---|---|
| favicon.ico | 16, 32, 48 | Pestañas y marcadores del navegador. Los navegadores también solicitan /favicon.ico por su cuenta. |
| favicon-16x16.png, favicon-32x32.png, favicon-48x48.png | 16, 32, 48 | Campos de ícono del sitio en temas y constructores de sitios que solicitan archivos PNG |
| favicon-96x96.png | 96 | Resultados de búsqueda de Google y pantallas de alta densidad |
| apple-touch-icon.png | 180 | Pantalla de inicio de iPhone y iPad |
| icon-192.png, icon-512.png | 192, 512 | Pantalla de inicio de Android y aplicaciones web instaladas |
| icon-maskable-192.png, icon-maskable-512.png | 192, 512 | Lanzadores de Android que recortan los íconos en un círculo u otra forma |
| favicon.svg | Cualquiera | Un ícono de pestaña que se mantiene nítido en cualquier tamaño en navegadores modernos. Se incluye cuando comienzas desde un SVG. |
| site.webmanifest | Texto | Nombre de la aplicación, colores y lista de íconos de la aplicación |
| favicon-tags.html | Texto | Las etiquetas HTML para pegar dentro de head |
Cada tamaño se genera a partir del mismo diseño de 512 píxeles y se reduce por pasos, para que los íconos pequeños se vean suaves. El archivo ICO contiene imágenes PNG, compatibles con todos los navegadores actuales y Windows.
Íconos adaptables y zona segura
Android recorta los íconos de las aplicaciones en un círculo, un cuadrado redondeado u otra forma elegida por el fabricante del teléfono. Un ícono adaptable llena todo el cuadrado con su fondo y mantiene el logotipo dentro de la zona segura: un círculo centrado cuyo diámetro es el 80 % del ícono. La configuración de tamaño del logotipo escala el logotipo en los íconos adaptables; al 56 % o menos, incluso un logotipo cuadrado queda completamente dentro de ese círculo.
Por qué el ícono de Apple tiene un fondo sólido
Los iPhone y iPad redondean las esquinas de un apple-touch-icon por sí mismos y muestran sus partes transparentes en negro. Por lo tanto, el ícono de Apple es un cuadrado completo sobre un color sólido: tu color de fondo o el fondo del ícono de la aplicación que eliges cuando el fondo es transparente.
Tu imagen permanece en este dispositivo
Los íconos, el manifiesto y el archivo ZIP se generan en tu navegador. No se sube nada, y no hay cuenta, marca de agua ni límite.
Preguntas frecuentes
¿Qué tamaños de favicon necesito para un sitio web?
Los navegadores usan íconos de 16 y 32 píxeles para pestañas y marcadores, que un favicon.ico almacena junto con una versión de 48 píxeles. Agrega un PNG de 96 píxeles para la búsqueda de Google, un apple-touch-icon de 180 píxeles para iPhones y iPads, e íconos de 192 y 512 píxeles listados en un manifiesto de aplicación web para Android y aplicaciones web instaladas, idealmente con versiones adaptables a máscara. Este generador crea todos ellos en un solo archivo ZIP.
¿Cómo agrego un favicon al HTML de mi sitio web?
Sube los archivos del ZIP a la carpeta raíz de tu sitio o a la carpeta que configuraste en la herramienta. Luego, pega las etiquetas del cuadro HTML de esta página dentro del elemento head de cada página: enlaces a favicon.ico, el PNG de 96 píxeles, apple-touch-icon.png y site.webmanifest, además de una etiqueta meta theme-color. Las mismas etiquetas están en favicon-tags.html dentro del ZIP.
¿Puedo crear un favicon a partir de un emoji?
Sí. Elige Emoji y escribe o pega un emoji. La herramienta lo dibuja centrado en cada tamaño, sobre un fondo transparente o de color. Usa la fuente de emojis de tu dispositivo, por lo que se ve igual que en tu pantalla, y los íconos descargados conservan ese aspecto en todos los dispositivos.
¿Mi imagen subida se procesa de forma privada en esta herramienta?
Sí. Tu imagen se lee y se dibuja en tu navegador, y los íconos y el archivo ZIP también se generan allí. Nada se sube a un servidor, así que un logotipo que aún no es público permanece en tu dispositivo.
¿Cuál es una limitación del generador de favicon?
Crea un solo diseño para todos los tamaños, por lo que no agrega imágenes separadas para 16 píxeles, íconos de modo oscuro o favicons animados. Los emojis y las fuentes Serif, Monospace y System usan las fuentes de tu dispositivo, así que pueden verse diferentes en otra computadora; la fuente Sans serif dibuja las letras latinas igual en todas partes. Una imagen de origen pequeña se ve borrosa a 180 y 512 píxeles, así que comienza con una imagen de 512 píxeles o un SVG.
¿Todavía necesito un archivo favicon.ico?
Sigue siendo la opción más segura. Los navegadores solicitan /favicon.ico cuando una página no tiene etiquetas de ícono, y algunos navegadores antiguos, lectores de feeds y otras herramientas solo leen ese archivo. El favicon.ico de esta herramienta contiene imágenes de 16, 32 y 48 píxeles en un solo archivo, por lo que se ve nítido en pantallas normales y de alta densidad.
¿Qué es un ícono enmascarable?
Un ícono enmascarable es un ícono de aplicación para lanzadores de Android que recortan los íconos en círculos, cuadrados redondeados u otras formas. Su fondo llena todo el cuadrado y el logotipo permanece dentro de la zona segura, un círculo centrado con un diámetro del 80 % del ícono. Las vistas previas en esta página muestran la zona segura y dos máscaras comunes.