¿Qué tamaños debe incluir un favicon?

16, 32 y 48 píxeles para el ICO, más 192 y 512 para pantallas de inicio de Android e iconos de aplicación.

¿Cómo hago un favicon desde un logo?

Abre el generador de favicon, sube tu logo y descarga el conjunto completo de iconos.

¿ICO aún es necesario?

Sí para favicons clásicos, aunque los navegadores modernos también aceptan favicons PNG.

¿Qué hace un buen diseño de favicon?

Una marca simple y de alto contraste con formas audaces. El detalle que se ve bien a tamaño completo desaparece a 16 píxeles.

Cómo hacer un favicon

La respuesta corta

Convierte una imagen cuadrada en un conjunto de favicon: un ICO de varios tamaños para favicons clásicos más iconos PNG para pantallas modernas. El generador de aquí lo hace en tu navegador, y tú añades el enlace al encabezado de tu página.

Qué incluye un conjunto de favicon

Un conjunto completo tiene tamaños ICO de 16, 32 y 48 píxeles más PNG de 192 y 512 píxeles para pantallas de inicio de Android e iconos de aplicación. Eso cubre cada lugar donde aparece tu icono, desde una pestaña del navegador hasta la pantalla de inicio de un teléfono.

Empieza con un cuadrado limpio

Los favicons son diminutos, así que empieza con una imagen cuadrada simple y de alto contraste. El detalle complejo desaparece a 16 píxeles, así que una marca audaz funciona mejor, y una fuente de 256 por 256 o más grande escala limpiamente.

Por qué ICO y PNG

Los navegadores aún aceptan ICO para favicons clásicos, y los navegadores modernos usan favicons PNG con tamaños para pantallas táctiles. Proporcionar ambos asegura que el icono correcto se muestre en todas partes, por eso el generador produce ambos.

Enlázalo en el encabezado de tu página

Añade una etiqueta de enlace que apunte al archivo de favicon en el encabezado HTML, como una referencia ICO o SVG. Los navegadores entonces lo cargan para la pestaña, los marcadores y las pantallas de inicio automáticamente.

Mantenlo privado

El generador se ejecuta por completo en tu navegador, así que tu logo nunca se sube mientras haces tu favicon. Eso mantiene tu activo de marca seguro.