Convierte PNG a ICO para un favicon nítido
Un favicon es la pequeña imagen que da a un sitio web su firma visual. Lo ves en la pestaña del navegador junto al título de la página, en tu lista de marcadores, en el desplegable de la barra de direcciones de tu historial de navegación y a veces junto a los resultados de búsqueda. Es pequeño, pero hace mucho trabajo: un favicon reconocible ayuda a los usuarios a encontrar tu pestaña entre una docena de otras y transmite que un sitio está terminado y cuidado. El formato clásico para ese pequeño icono es ICO, y la forma más fácil de crear uno es partir de un PNG cuadrado y limpio y convertirlo.
Esta herramienta toma una imagen PNG y la convierte en un favicon ICO directamente dentro de tu navegador. La conversión se ejecuta localmente usando tu propio dispositivo, así que la imagen que elijas nunca se sube a un servidor. Eso importa cuando tu icono es un logotipo o un recurso de marca que prefieres no entregar a un tercero. Cuando el archivo está listo, simplemente lo descargas.
Qué es el formato ICO y por qué guarda varios tamaños
ICO es un formato contenedor de iconos que se originó en Microsoft Windows, donde almacena los iconos usados para programas, accesos directos y carpetas. Su característica distintiva, y la razón por la que se convirtió en el estándar para los favicons web, es que un solo archivo ICO puede contener la misma imagen en varias resoluciones a la vez. En lugar de un único mapa de bits fijo, el archivo empaqueta un pequeño conjunto de imágenes cuadradas y deja que el navegador o el sistema operativo elija el tamaño que encaje en el lugar donde necesite dibujar el icono.
Eso es genuinamente útil. Una pestaña de navegador necesita un icono diminuto, una barra de marcadores puede usar uno algo más grande y un acceso directo anclado en el escritorio puede pedir algo aún mayor. Con un ICO multitamaño, cada contexto toma la versión que le conviene, así que tu icono se mantiene nítido en lugar de ampliarse desde un único mapa de bits pequeño y volverse borroso. ICO también conserva la transparencia, lo que mantiene limpias las esquinas de un logotipo redondo o irregular contra cualquier color de pestaña.
Tamaños de favicon recomendados
Para un favicon de sitio web, los tres tamaños que conviene incluir son 16x16, 32x32 y 48x48 píxeles. La versión de 16 píxeles es la que la mayoría de los navegadores muestran en la pestaña y en la barra de direcciones. La versión de 32 píxeles se usa en pantallas de mayor resolución y en algunas vistas de marcadores e historial, así que mantiene las cosas nítidas en las pantallas modernas. La versión de 48 píxeles cubre contextos más grandes, como los accesos directos a sitios de Windows. Como todas viven dentro de un mismo archivo ICO, entregas un único recurso y dejas que cada superficie elija lo que necesita.
Parte de un PNG cuadrado para que nada se estire. Si tu imagen de origen es rectangular o demasiado grande, recórtala o escálala primero a un cuadrado limpio con nuestro redimensionador de imágenes, y luego ejecuta la conversión. Un diseño sencillo y de alto contraste se lee mucho mejor a 16 píxeles que una ilustración detallada, así que prioriza las formas marcadas sobre el texto fino.
Cómo añadir el favicon a tu sitio
Una vez que tengas tu archivo ICO, súbelo a tu sitio web, tradicionalmente a la raíz del sitio como favicon.ico. Muchos navegadores lo encontrarán allí automáticamente, pero la mejor práctica es declararlo explícitamente en la cabecera de tu HTML para que no haya conjeturas. Añade una etiqueta de enlace como esta:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Coloca esa línea dentro de la sección <head> de tus páginas. El atributo rel="icon" le dice al navegador que este recurso es el icono de la página, y el href apunta a donde guardaste el archivo. Si usas una ruta relativa a la raíz como la de arriba, la misma declaración funciona en todas las páginas de tu sitio. Después de desplegar, puede que necesites forzar una recarga o limpiar la caché antes de que aparezca el nuevo icono, ya que los navegadores retienen los favicons con insistencia.
Conversión privada en tu navegador
Todo ocurre en tu dispositivo. El PNG que elijas se lee, se decodifica y se vuelve a codificar como ICO localmente, y nada sale de tu máquina durante el proceso. No hay cuenta, ni cola, ni almacenamiento en el servidor, lo que lo hace cómodo incluso para logotipos sin publicar o trabajo de cliente bajo acuerdo. Para más formas de preparar y pulir gráficos, explora nuestro conjunto completo de herramientas de imagen.
Preguntas frecuentes
¿Se sube mi imagen a algún sitio?
No. El PNG se convierte a ICO por completo en tu navegador, en tu propio dispositivo. Nada se envía a un servidor y nada se almacena, así que tu imagen permanece privada.
¿Qué tamaños debe incluir mi favicon?
Los tamaños más útiles son 16x16, 32x32 y 48x48 píxeles. La imagen de 16 píxeles se muestra en las pestañas del navegador, mientras que las más grandes mantienen el icono nítido en pantallas de alta resolución y accesos directos de escritorio.
¿Por qué usar ICO en lugar de solo un PNG?
ICO es el formato de favicon de toda la vida y puede almacenar varios tamaños dentro de un mismo archivo. Los navegadores y el sistema operativo eligen la resolución que encaja en cada contexto, así que el icono se mantiene nítido en lugar de escalarse desde un único mapa de bits.
¿El ICO conserva la transparencia de mi PNG?
Sí. El formato ICO admite transparencia, así que las zonas translúcidas de tu PNG se conservan y el icono se integra limpiamente con cualquier color de pestaña o fondo.
¿Cómo añado el favicon a mi sitio web?
Sube el archivo ICO a tu sitio, normalmente como favicon.ico en la raíz, y añade una etiqueta de enlace en la cabecera de tu HTML, como link rel icon type image x-icon href barra favicon.ico. Luego limpia la caché de tu navegador para verlo.
Mi imagen de origen no es cuadrada. ¿Qué debo hacer?
Recórtala o escálala primero a un cuadrado para que no se estire. Puedes usar nuestro redimensionador de imágenes para crear un cuadrado limpio, y luego convertirlo a ICO para el favicon de mejor aspecto.