Creador de favicon online gratuito
Generador de favicon: crea un favicon.ico desde tu logo
Convierte un PNG, JPG, WebP o SVG en un favicon.ico de 16, 32 y 48 px, retoca píxel a píxel los tamaños diminutos, míralo en una pestaña del navegador y copia la etiqueta <link>. Gratis, transparente, sin guardar nada.
Cómo funciona
Crea un favicon en tres pasos
Unos tres minutos del logo al archivo listo para subir. Empieza con una imagen cuadrada de al menos 256 px, o dibuja el favicon desde cero.
-
01Importa tu logo
Pulsa Importar, elige un PNG, JPG, WebP o SVG (o suéltalo en la página), arrastra el marco cuadrado sobre la parte que quieras y haz clic en Importar.
-
02Corrige los tamaños de 16 y 32 px
Abre los tamaños pequeños en la cuadrícula de píxeles, quita el detalle fino y engrosa las líneas finas. Abre Vista previa en Windows para ver el icono en una maqueta de pestaña de navegador.
-
03Exporta favicon.ico
Pulsa Exportar, marca solo 16, 32 y 48 px, escribe
faviconcomo nombre de archivo y haz clic en Descargar .ICO. La pestaña Web favicon muestra la etiqueta para pegar.
Qué archivos
favicon.ico, icono Apple touch, PNG y SVG
Para qué sirve cada archivo y cuáles genera IconEditor por ti.
| Archivo | Se usa para | ¿Lo da IconEditor? |
|---|---|---|
favicon.ico (16, 32, 48 px) | Todos los navegadores de escritorio, marcadores y herramientas que piden /favicon.ico sin leer tu HTML | Sí. Marca 16, 32 y 48 px al exportar. |
| PNG de 16 / 32 / 48 px | Etiquetas explícitas <link rel="icon" type="image/png" sizes="32x32"> | Sí. Descargar PNG para un tamaño, o un ZIP con todos los tamaños marcados. |
apple-touch-icon.png (180 px) | Pantalla de inicio del iPhone y el iPad | En parte. Exporta el PNG de 256 px y redúcelo a 180 px con una herramienta de imagen; no hay casilla de 180 px. |
| PNG de 192 y 512 px | Android, PWA, manifiesto de la aplicación web | No. El tamaño más grande es 256 px. Escala tu ilustración original a 192 y 512 px con una herramienta de imagen. |
icon.svg | Navegadores modernos; escala a cualquier tamaño | No. IconEditor no escribe SVG. Si tu logo ya es un SVG, súbelo tal cual junto al .ico. |
manifest.webmanifest | Nombres e iconos de las aplicaciones web instalables | No. Este archivo se escribe a mano (tres líneas bastan para empezar). |
Para un sitio web típico — un blog, una tienda, la página de una empresa — basta con el .ico más un icono Apple touch. Los PNG más grandes solo importan si la gente instala tu sitio como aplicación.
Añádelo a tu sitio
Las etiquetas <link> que copiar
Sube los archivos a la raíz de tu sitio y añade las etiquetas dentro de <head>.
Mínimo: solo el .ico
<link rel="icon" href="/favicon.ico" sizes="any">Es exactamente el fragmento de la pestaña Web favicon del cuadro de exportación. Los navegadores también piden /favicon.ico por su cuenta cuando no hay etiqueta, así que el archivo en la raíz funciona incluso sin ella.
Recomendado: ico + SVG + icono Apple touch
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Si además ofreces un icono SVG, escribe sizes="32x32" en el enlace del .ico: de lo contrario, Chrome puede preferir el .ico al SVG. Quita las líneas del SVG y del manifiesto si no tienes esos archivos.
Qué mira Google Search
Google muestra tu favicon junto al resultado en la búsqueda móvil y de escritorio. Sus directrices piden una imagen cuadrada cuyo tamaño sea un múltiplo de 48 px (la entrada de 48 px de tu .ico lo cumple), un único favicon para todo el sitio, una URL estable, una página que Googlebot pueda rastrear y un archivo no bloqueado en robots.txt. Tras un cambio, dale de días a semanas para verlo en los resultados.
Diseño
Un favicon que aún se lee a 16 píxeles
El icono entero mide más o menos lo que una letra minúscula.
Una forma, uno o dos colores
Usa la inicial o la parte más simple del logo. Un logotipo legible a 200 px es una mancha a 16 px.
Edita a mano la versión de 16 px
La reducción automática difumina las líneas de un píxel. En la cuadrícula de píxeles puedes colocar tú mismo cada uno de los 256 píxeles; son cinco minutos y se nota.
Comprueba pestañas claras y oscuras
Los navegadores muestran el favicon sobre fondos claros y oscuros. Previsualiza el icono en ambos y evita rellenos de negro o blanco puros sobre fondo transparente.
Decide la transparencia a propósito
Un favicon transparente se funde con la pestaña; un cuadrado redondeado de color sigue visible en cualquier tema. Elige con Fondo y Esquinas bajo el lienzo.
Los principios son los mismos que para un icono de aplicación de Windows, por eso el mismo archivo sirve para ambos. La guía de diseño de iconos y la guía rápida de tamaños profundizan.
¿Qué es un favicon?
Un favicon es el pequeño icono que el navegador muestra junto al título de la página en la pestaña, en los marcadores y en el historial; buscadores como Google también lo muestran junto a tu resultado en el móvil. El nombre viene de «favorite icon». Técnicamente es una imagen pequeña — tradicionalmente un favicon.ico multitamaño en la raíz del sitio, hoy a menudo acompañado de un SVG y un PNG para móviles.
¿Qué tamaños de favicon necesito?
Un favicon.ico con 16, 32 y 48 px cubre todos los navegadores de escritorio y cumple la regla de Google del «múltiplo de 48 px». Añade un apple-touch-icon de 180 × 180 px para la pantalla de inicio de iOS y, si ofreces una aplicación web, PNG de 192 y 512 px en el manifiesto web. IconEditor genera el .ico y PNG en sus siete tamaños (hasta 256 px); los archivos de 180, 192 y 512 px debes crearlos con una herramienta de imagen.
¿Este generador crea el paquete completo de favicons?
No, y lo dice con claridad. Crea el favicon.ico y te da PNG de 16, 24, 32, 48, 64, 128 y 256 px, además del fragmento <link>. No genera archivos de 180, 192 o 512 px, ni manifiesto web, ni un archivo browserconfig. Para la mayoría de sitios, el .ico más un apple-touch-icon es suficiente; si necesitas el juego completo, diseña aquí el icono y usa un generador de paquetes para los tamaños.
¿Uso ICO, PNG o SVG para mi favicon?
Valen los tres. El .ico es el que todos los navegadores y muchas herramientas siguen pidiendo automáticamente en /favicon.ico, así que inclúyelo. Un SVG escala a cualquier tamaño y puede seguir el modo oscuro, pero los navegadores antiguos lo ignoran. El PNG es el formato más sencillo para el icono Apple touch. Un conjunto habitual y robusto es favicon.ico + SVG + PNG de 180 px.
¿Puedo hacer un favicon desde un JPG o un SVG?
Sí. JPG, PNG, WebP, GIF, BMP y SVG se importan igual. Un JPG no tiene transparencia, así que el favicon es un cuadrado completo salvo que borres el fondo o ajustes las esquinas. Un SVG se rasteriza a 1024 px y se reduce, lo que da el resultado más limpio.
¿Por qué mi favicon no cambia después de subir uno nuevo?
Los navegadores guardan los favicons en caché de forma muy agresiva, a menudo con independencia de la página. Recarga con Ctrl+F5, abre directamente la URL del archivo y actualízala, o dale al archivo nuevo otro nombre (por ejemplo favicon-v2.ico) y actualiza el enlace. Los resultados de búsqueda pueden tardar días o semanas en reflejar un cambio.
¿El generador es gratis y se guardan mis imágenes?
Es gratis, sin cuenta ni marca de agua. Tu imagen se convierte en memoria en nuestro servidor y se descarta enseguida; tu trabajo en curso se guarda solo en tu propio navegador. Consulta la política de privacidad.
Relacionado
Sigue por aquí
Crea tu favicon ahora
El editor se abre con el cuadro de importación listo. Gratis, en tu navegador, sin instalar nada y sin guardar nada.