PNG → ICO
Generador de favicon
Crea todos los iconos que necesita una web a partir de una imagen: favicon.ico, el Apple touch icon, los iconos de aplicación y el HTML para pegar. Todo se hace en tu navegador.
Suelta aquí tu logo o icono PNG, JPG o SVG. Lo ideal es una imagen cuadrada. apple-touch-icon.png · 180
icon-192.png · 192
icon-512.png · 512
Pégalo en el <head> de tu web
Funciona en tu navegador · los archivos no salen de tu dispositivo
Cómo crear un favicon
- Añade tu logo o icono. PNG, JPG o SVG. Funciona mejor una imagen cuadrada con una forma sencilla.
- Ajusta el margen, las esquinas y el fondo. Deja aire alrededor del icono, redondea las esquinas y rellena el fondo si tu logo es oscuro sobre transparente.
- Revisa las pestañas del navegador. La vista previa muestra el icono a su tamaño real de 16 px en una pestaña clara y otra oscura.
- Descarga el ZIP y pega el HTML. Sube los archivos a la raíz de tu web y pega las etiquetas en el
<head>.
Qué archivos crea el generador de favicon
| Archivo | Tamaño | Quién lo usa |
|---|---|---|
| favicon.ico | 16, 32 y 48 px | Pestañas del navegador, marcadores, accesos directos de Windows y cualquier herramienta que pida /favicon.ico |
| icon.svg | Escalable | Navegadores modernos, cuando la imagen de origen es un SVG |
| apple-touch-icon.png | 180 px | Accesos directos en la pantalla de inicio de iPhone y iPad |
| icon-192.png e icon-512.png | 192 y 512 px | Android y aplicaciones web instaladas, declarados en el manifest |
| manifest.webmanifest | – | Indica a los navegadores dónde están los iconos de la aplicación |
Los iconos de 192 y 512 px siguen el ejemplo de manifest de aplicación web de web.dev. El Apple touch icon siempre lleva fondo sólido, porque iOS muestra las zonas transparentes en negro.
Crear un favicon desde una imagen o un PNG
Parte de la versión más limpia de tu logo que tengas. Un favicon se muestra a 16 por 16 píxeles en una pestaña, así que el texto fino y las líneas delgadas desaparecen. Muchas marcas usan solo su símbolo o su inicial. Si la imagen de origen no es cuadrada, el generador la centra en un lienzo cuadrado con márgenes transparentes.
Usa el control de margen cuando el logo toque los bordes, y rellena el fondo cuando el logo sea oscuro y transparente, para que se siga viendo en las pestañas oscuras del navegador.
Favicon desde SVG
Si sueltas un SVG, el juego lo incluye como icon.svg y el HTML lo añade como icono adicional. Los navegadores que admiten favicons SVG lo usan a cualquier tamaño y los demás recurren a favicon.ico. Los iconos PNG se dibujan desde el vector, así que salen nítidos.
El favicon en Google
Google puede mostrar tu favicon junto a tus resultados. Sus directrices piden una imagen cuadrada de al menos 8 por 8 píxeles y recomiendan que sea mayor de 48 por 48 píxeles (Google Search Central). El tamaño de 48 px de favicon.ico y el icono de 192 px cumplen con eso. Para más detalle, consulta nuestra guía de tamaños de favicon.