A favicon (short for "favorite icon") is the small icon that appears in your browser's tab, next to the page title. It's one of the most recognizable elements of any website, yet many developers overlook it.
Where Do Favicons Appear?
Favicons show up in more places than you might think:
Browser tabs — The most common place. Each open tab displays the site's favicon.
Bookmarks bar — When users bookmark your site, the favicon helps them find it later.
Google search results — Since 2019, Google shows favicons next to URLs in mobile search results, and now on desktop too.
History — Your browser history uses favicons for quick visual identification.
PWA home screen — If your site is installed as a Progressive Web App, the favicon becomes the app icon.
Why Favicons Matter
1. Brand Recognition
A well-designed favicon reinforces your brand. Think about how instantly recognizable Google's "G", Twitter's bird, or YouTube's play button are — even at 16×16 pixels.
2. User Experience
When users have 20+ tabs open, favicons are the only way to distinguish between sites. Without a favicon, your tab becomes a generic blank icon — easy to close, easy to forget.
3. SEO Impact
Google displays favicons in search results. A missing or low-quality favicon can make your listing look unprofessional, reducing your click-through rate (CTR). Studies show that websites with favicons can see a CTR improvement of up to 20%.
4. Trust & Credibility
A professional favicon signals that someone cares about the details. It's a small thing, but it contributes to the overall perception of quality.
Favicon File Formats
Format
Best For
Browser Support
.ico
Legacy support, can contain multiple sizes
All browsers
.png
Modern browsers, sharp rendering
All modern browsers
.svg
Scalable, supports dark mode
Chrome, Firefox, Edge (not Safari)
.gif
Animated favicons (rare)
Limited
Common Favicon Sizes
16×16 — Browser tab (classic size)
32×32 — Browser tab (high-DPI / Retina)
180×180 — Apple Touch Icon (iOS home screen)
192×192 — Android Chrome
512×512 — PWA splash screen
How to Get Started
The quickest way to get a favicon from an existing website is to use a dedicated tool. Mzu favicondl lets you enter any domain and instantly download its favicon in multiple sizes — no sign-up required.
If you need to create a favicon from scratch, you can use the image-to-favicon converter in our Tools section to generate all the sizes you need from a single image.
The Minimum Favicon Setup
At a minimum, add these two lines to your HTML <head>:
This covers 99% of use cases. For a more comprehensive setup, see our detailed HTML guide.
Un favicon (abreviatura de "favorite icon" o "icono favorito") es el pequeño icono que aparece en la pestaña de tu navegador, junto al título de la página. Es uno de los elementos más reconocibles de cualquier sitio web, pero muchos desarrolladores lo pasan por alto.
¿Dónde aparecen los favicons?
Los favicons aparecen en más lugares de los que imaginas:
Pestañas del navegador — El lugar más común. Cada pestaña abierta muestra el favicon del sitio.
Barra de marcadores — Cuando los usuarios marcan tu sitio, el favicon les ayuda a encontrarlo más tarde.
Resultados de búsqueda de Google — Desde 2019, Google muestra favicons junto a las URLs en los resultados de búsqueda móvil, y ahora también en escritorio.
Historial — Tu historial del navegador utiliza favicons para una rápida identificación visual.
Pantalla de inicio de PWA — Si tu sitio se instala como una Progressive Web App, el favicon se convierte en el icono de la aplicación.
Por qué los favicons son importantes
1. Reconocimiento de marca
Un favicon bien diseñado refuerza tu marca. Piensa en lo instantáneamente reconocibles que son la "G" de Google, el pájaro de Twitter o el botón de reproducción de YouTube, incluso a 16×16 píxeles.
2. Experiencia de usuario
Cuando los usuarios tienen más de 20 pestañas abiertas, los favicons son la única forma de distinguir entre sitios. Sin un favicon, tu pestaña se convierte en un icono en blanco genérico, fácil de cerrar, fácil de olvidar.
3. Impacto en el SEO
Google muestra favicons en los resultados de búsqueda. Un favicon ausente o de baja calidad puede hacer que tu listado parezca poco profesional, reduciendo tu tasa de clics (CTR). Los estudios demuestran que los sitios web con favicons pueden experimentar una mejora del CTR de hasta un 20%.
4. Confianza y credibilidad
Un favicon profesional indica que alguien se preocupa por los detalles. Es algo pequeño, pero contribuye a la percepción general de calidad.
Formatos de archivo de favicon
Formato
Mejor para
Compatibilidad con navegadores
.ico
Soporte heredado, puede contener múltiples tamaños
Todos los navegadores
.png
Navegadores modernos, renderizado nítido
Todos los navegadores modernos
.svg
Escalable, compatible con modo oscuro
Chrome, Firefox, Edge (no Safari)
.gif
Favicons animados (raros)
Limitado
Tamaños comunes de favicon
16×16 — Pestaña del navegador (tamaño clásico)
32×32 — Pestaña del navegador (alta DPI / Retina)
180×180 — Apple Touch Icon (pantalla de inicio de iOS)
192×192 — Android Chrome
512×512 — Pantalla de inicio de PWA
Cómo empezar
La forma más rápida de obtener un favicon de un sitio web existente es utilizar una herramienta dedicada. Mzu favicondl te permite introducir cualquier dominio y descargar instantáneamente su favicon en múltiples tamaños, sin necesidad de registrarte.
Si necesitas crear un favicon desde cero, puedes usar el convertidor de imagen a favicon en nuestra sección de Herramientas para generar todos los tamaños que necesitas a partir de una sola imagen.
Configuración mínima de favicon
Como mínimo, añade estas dos líneas a tu <head> de HTML: