Sin archivos · Sin alojamiento · Sin compilación
Haz clic en cualquier ícono y tendrás la etiqueta <link rel="icon">
completa en tu portapapeles, con el dibujo incrustado como data URI. Pégala en el
<head> de tu página y listo.
¿Buscas un emoji concreto? Están todos en la galería de emojis, con nombre en español.
'/></svg>)
'/></svg>)
'/></svg>)
' stroke-width='16'/></svg>)
'/><path d='M0 62q12-16 25 0t25 0 25 0 25 0v38H0Z' fill='%2338bdf8' opacity='.85'/></svg>)
'/><rect width='100' height='100' rx='26' fill='url(%23b)'/></svg>)
Nada coincide con esa búsqueda.
Crea el tuyo
Ajusta los valores, mira la vista previa y copia tu etiqueta. Tan simple como suena.
Un solo elemento <text> dentro de un SVG. Funciona en todos los navegadores modernos.
Una letra sobre una forma. El favicon todoterreno para proyectos personales.
También en favicons
Una para inventarlo con un emoji; otra para ver el de cualquier web.
Notas técnicas
/favicon.ico como respaldo si conservas uno.
# de los colores hex debe codificarse como %23,
o el navegador interpretará el resto del URI como un fragmento. Todo lo que copies
aquí ya viene codificado.
@media (prefers-color-scheme: dark) en un bloque <style>.
Chrome y Safari lo respetan; Firefox todavía no.
Cada ícono de esta página es marcado SVG en línea: nada aquí carga un archivo de imagen externo. Si quieres entender cómo funciona por dentro, en el blog explicamos cómo crear un favicon SVG paso a paso. ¿Te gustan los componentes copiables? Prueba también el generador de texto ondulado animado o explora todas las herramientas gratuitas.
Preguntas frecuentes
Porque un solo archivo vectorial escala perfecto a cualquier tamaño: pestañas,
marcadores y pantallas retina. Además, al incrustarlo como data URI no necesitas
subir archivos ni generar peticiones HTTP extra: la etiqueta <link>
contiene el ícono completo.
Chrome, Edge, Firefox y las versiones modernas de Safari los soportan sin problema.
Para navegadores muy antiguos basta con dejar un /favicon.ico clásico
en la raíz del sitio como respaldo: cada navegador elegirá el formato que entienda.
Un data URI incrusta el contenido del ícono directamente en el atributo
href de la etiqueta link. El SVG viaja dentro del propio HTML, así que
no hay archivo que subir, ni ruta que se pueda romper, ni petición adicional que
ralentice la carga.
Sí. Dentro del SVG puedes incluir un bloque <style> con
@media (prefers-color-scheme: dark) para cambiar los colores según el
tema del sistema. Chrome y Safari lo respetan hoy; Firefox todavía no, pero mostrará
la versión clara sin errores.