Imágenes · Generador de favicons

Genera favicons para una web en el Mac

Todos los favicons que necesita una web, además del manifiesto web y el HTML para pegar en tu página.

Funciona en tu Mac

Preguntar a la IAChatGPTClaudePerplexityModo IAGrokMarkdown

Descargar OneMacTools Más herramientas de Imágenes

Generador de favicons en un Mac

Generador de favicons con archivos de ejemplo y sus opciones

Lo que Generador de favicons produjo con los archivos de ejemplo

Capturas de pantalla de la app, con archivos de ejemplo.

Cómo usar Generador de favicons

1
Arrastra tu logotipo
Usa una imagen, cuadrada si es posible y de al menos 512 px. Las imágenes que no son cuadradas se recortan a un cuadrado centrado.
2
Añade los datos de tu sitio web
Escribe el nombre del sitio y el color del tema para el manifiesto web, y elige el Fondo del icono táctil de Apple.
3
Haz clic en Crear favicons
Se crean todos los archivos de favicon, junto con el manifiesto y el fragmento HTML.
4
Súbelo a tu sitio
Copia los archivos de la carpeta “favicons” (en una carpeta con fecha en Descargas › OneMacTools) a la raíz de tu sitio web, y pega el HTML en el <head> de tu página. El fragmento de código también aparece en la app.

Qué hace Generador de favicons

A partir de un logotipo, obtén favicon.ico con 16, 32 y 48 px dentro, PNG de 16 y 32 px, un Apple touch icon de 180 px sobre fondo sólido para que no se vuelva negro en el iPhone, e iconos de 192 y 512 px para Android y apps web instalables, además de un site.webmanifest con el nombre de tu web y el color del tema, y el fragmento HTML para tu <head>.

Ideal para

Añadir un favicon a un sitio web nuevo
Haz que una web se pueda instalar en los móviles
Sustituye un favicon borroso

Opciones explicadas

Nombre del sitio: El nombre que se usa en site.webmanifest, que se muestra cuando alguien instala tu sitio en un teléfono. Si lo dejas vacío, se usa el nombre del archivo de la imagen. El nombre corto son los primeros 12 caracteres.
Color del tema: Un color hexadecimal como #1E90FF, que se usa como color de tema del navegador y como color de fondo del manifiesto. Blanco si se deja vacío.
Fondo del icono táctil de Apple: Blanco, Color del tema o Negro. Los iPhone muestran sobre negro los iconos transparentes de la pantalla de inicio, así que el icono táctil de Apple de 180 px lleva un fondo sólido.
Redondear las esquinas: Desactivado por omisión. Redondea las esquinas de tu logotipo en todos los tamaños de favicon.

Buenas prácticas

Usa una marca sencilla, no tu logotipo completo con texto. A 16 px solo se reconocen las formas marcadas.
Parte de un PNG transparente para que el favicon quede bien en pestañas del navegador claras y oscuras.
Escribe el color del tema como valor hexadecimal. Colorea la interfaz del navegador en algunos teléfonos, así que elige el color principal de tu marca.
Después de subirlo, abre tu sitio web en una ventana privada para comprobar el icono nuevo, porque los navegadores guardan los favicons en caché mucho tiempo.

Funciona con

En: Una imagen, idealmente un PNG cuadrado de 512 px o más.
Salida: Una carpeta “favicons” con favicon.ico (con 16, 32 y 48 px dentro), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png y android-chrome-512x512.png, más site.webmanifest y add-to-head.html.

Las imágenes que no son cuadradas se recortan a un cuadrado centrado.

Preguntas sobre Generador de favicons

¿Qué archivos de favicon necesita un sitio web?

favicon.ico para navegadores antiguos, PNG de 16 y 32 px para las pestañas, un icono táctil de Apple de 180 px para la pantalla de inicio del iPhone, e iconos de 192 y 512 px con un manifiesto web para Android. OneMacTools los crea todos, junto con el HTML para pegar en el <head> de tu página.

¿Adónde van los archivos?

En la carpeta raíz de tu web, junto a index.html. Tanto el fragmento HTML como el manifiesto esperan encontrarlos ahí.

¿Cómo creo un favicon.ico en el Mac?

Arrastra tu logotipo a Generador de favicons y haz clic en Crear favicons. Se crea favicon.ico con versiones de 16, 32 y 48 px dentro, junto a los tamaños en PNG.

¿Por qué mi icono se ve negro en la pantalla de inicio del iPhone?

iOS muestra en negro las zonas transparentes de un icono de la pantalla de inicio. Para evitarlo, el icono táctil de Apple se coloca sobre un fondo sólido blanco, negro o del color del tema.

¿Para qué sirve site.webmanifest?

Indica a los teléfonos el nombre, los iconos y los colores de tu web cuando alguien la añade a su pantalla de inicio o la instala como app web.

Mi nuevo favicon no aparece. ¿Qué pasa?

Los navegadores guardan los favicons en caché de forma muy agresiva. Comprueba que los archivos están en la raíz de tu sitio web y el fragmento de código en <head>, y vuelve a cargar en una ventana privada.

¿Generador de favicons sube mis archivos?

No. Generador de favicons funciona por completo en tu Mac, así que tus archivos nunca salen de él y funciona sin conexión.

¿Generador de favicons modificará mis archivos originales?

No. Los resultados se guardan como archivos nuevos en una carpeta con fecha en Descargas › OneMacTools, y tus originales se quedan exactamente como estaban, salvo que actives una opción que diga lo contrario.

¿Qué necesita Generador de favicons?

Solo un Mac con macOS 26 o posterior. No hay que instalar nada más.

Haz esto a continuación

Generador de imagen OG

Crea la tarjeta de 1200 × 630 que aparece cuando se comparte tu enlace en X, LinkedIn, Slack, WhatsApp e iMessage.

Generador de iconos de app

De una imagen cuadrada a todos los iconos de app: el catálogo de recursos de iOS para Xcode, iconos de launcher y adaptables de Android y un .icns de Mac.