Generador de favicons
Crea el icono de tu web a partir de un logo, letras o emoji y descarga el conjunto completo: favicon.ico, iconos para iPhone y Android, manifiesto y código para pegar.
En la pestaña del navegador
Todos los tamaños
Archivos
Código para <head>
Pon los archivos en la raíz de tu web, junto a la página principal, y pega este código dentro de la etiqueta head en cada página.
Un favicon en un par de minutos
- 1Elige la baseletras, emoji o tu propia imagen
- 2Ajusta el diseñocolores, fuente, esquinas y tamaño
- 3Descarga el conjuntoZIP con iconos, manifiesto y código
Texto, emoji o imagen
Letras sobre fondo de color es la opción más común: la primera letra del nombre se lee incluso a 16 px. Un emoji es una forma rápida de tener un icono llamativo sin diseñador. El logo conviene que sea cuadrado y sin detalles pequeños: a 16 px todo lo pequeño se mezcla.
Revisa el tamaño pequeño
Mira la vista previa de la pestaña en tema claro y oscuro. Si el símbolo se pierde en una pestaña oscura, añade un fondo o elige un color más vivo. El margen alrededor de la imagen ayuda cuando el logo toca los bordes.
Qué hacer con los archivos
Pon todos los archivos del ZIP en la raíz de tu web, junto a la página principal, y pega el código en la sección head. En WordPress, Tilda y otros constructores normalmente basta con subir favicon.ico o un PNG de 512 px en los ajustes del sitio.
Preguntas frecuentes
¿No encuentras la respuesta? Escríbenos y te ayudamos.
Aquí creas tu propio icono desde cero. "Favicon del sitio" hace lo contrario: a partir de un enlace encuentra y descarga los iconos que ya tiene otra web.
Como mínimo, favicon.ico en la raíz del sitio: todos los navegadores lo buscan. Un PNG de 32 px da un icono nítido en la pestaña, apple-touch-icon.png de 180 px da el icono en la pantalla del iPhone, y site.webmanifest con iconos de 192 y 512 px lo necesitan Android y PWA.
Tres imágenes: 16, 32 y 48 px en formato PNG. El navegador y Windows eligen solos el tamaño adecuado.
iOS redondea por sí mismo las esquinas del icono en la pantalla de "Inicio" y rellena las zonas transparentes de negro. Por eso guardamos apple-touch-icon cuadrado y con fondo: blanco, si elegiste transparente.
Sí. El emoji se dibuja con la fuente de tu sistema: en iPhone con estilo Apple, en Windows con estilo Microsoft, en Android con estilo Google. El archivo guarda el aspecto que ves en la vista previa.
Descomprime el ZIP en la raíz de tu web y pega el código del bloque "Código para <head>" dentro de la etiqueta head. Si el icono no cambia, recarga la página sin caché: los navegadores recuerdan el favicon antiguo mucho tiempo.
Prueba también
También gratis y sin registro