Cómo agregar y cambiar un Favicon de WordPress | Mejoras de WP

La gente usa WordPress para crear sitios web para particulares y empresas. Una forma de ayudar a los visitantes habituales a saber que el sitio es tuyo es tener un favicon de WordPress personalizado.

¿Qué es un Favicon?

Un favicon es un ícono que aparece en la pestaña o ventana del navegador y en la lista de marcadores o favoritos asociados específicamente con un sitio en particular. Si un navegador no encuentra un favicon personalizado, muestra un favicon predeterminado en su lugar.

Un favicon de WordPress es a menudo una versión pequeña del logotipo del sitio. Es posible que pueda reducir el logotipo al tamaño de favicon, pero generalmente es necesario crear uno relacionado con el logotipo original.

¿Por qué debo usar un Favicon?

Las empresas deben tener un favicon para mejorar la familiaridad y fomentar la confianza de los clientes potenciales. La marca permite a los visitantes reconocer un sitio al instante. Añade continuidad y legitimidad.

Las personas también pueden usar un favicon por razones similares, aunque en la mayoría de las situaciones el objetivo es que los visitantes repitan en lugar de realizar compras.

Especificaciones de icono de favoritos

El tamaño del favicon en WordPress es de 16×16 píxeles. Sin embargo, algunos otros navegadores y aplicaciones usan un tamaño más grande, que va de 16 a 195 píxeles cuadrados.

Si te quedas con el tamaño 16×16, las aplicaciones que usan tamaños más grandes generalmente lo agrandarán, lo que a menudo causará pixelado. Debido a esto, la identidad del sitio de WordPress requiere 512 × 512 en su lugar.

Algunos tamaños alternativos comunes son:

• 24 píxeles: el icono de un sitio anclado en Internet Explorer 9
• 72 píxeles: el icono en la pantalla de inicio de un iPad
• 128 píxeles: el icono utilizado en Chrome Web Store
• 195 píxeles: el icono que se muestra en Opera Speed ​​Dial

Formatos de iconos de favoritos

Un favicon no se mostrará correctamente si se guarda en un formato incorrecto. El formato más común es Windows ICO, que era el requisito original. Puede contener una variedad de tamaños y resoluciones para su uso en múltiples plataformas. Es el único formato utilizado por Internet Explorer.

PNG es la opción más fácil de usar, ya que casi cualquier programa de gráficos se guardará en este formato, proporciona un tamaño de archivo pequeño y permite que el favicon sea transparente si se desea.

Opera admite el uso de SVG para favicons, aunque es el único navegador que lo hace.

GIF, JPG y APNG son opciones, pero son menos útiles porque su resolución es peor y pueden distraer. La distracción es especialmente probable con archivos GIF animados y archivos APNG, que también están animados.

Crear un icono favorito

Diseñar un favicon de WordPress para agregar reconocimiento a su sitio es una gran idea. Puede diseñar uno en un programa de gráficos en su computadora o usar un sitio web gratuito en línea, como favicon-generator.org o favicon.cc.

Considere los siguientes factores para mejorar el valor de su favicon.

Identidad

La razón más importante para tener un favicon es ser reconocido. Cree un diseño que represente el producto o servicio que ofrece o un diseño que coincida con el logotipo de su marca. Una imagen que se relacione directamente con su marca, como una versión más pequeña del logotipo o la letra o letras principales del nombre de la empresa, es ideal.

Sencillez

Debido a su pequeño tamaño, lo simple es lo mejor. Las formas o letras básicas son una buena opción para la visibilidad. Cuando los visitantes lo reconocen de un vistazo, es más efectivo. Cuantos más detalles intente incluir, más difícil será para el visitante reconocer qué es el icono. La precisión, la audacia y la claridad son esenciales.

Colores

Un alto contraste mejorará la legibilidad y aumentará el reconocimiento. Considere los favicons de sitios como NBC y Netflix. Sus sitios son instantáneamente obvios. Los sitios que tienen una identidad de color clara deben incluir ese color en su favicon de WordPress. Una vez más, manténgalo simple. Demasiados colores pueden causar una imagen poco clara.

Cómo agregar un Favicon a WordPress

Agrega un favicon de WordPress usando uno de los siguientes métodos:

1) Use la opción de ícono de sitio incorporado en WordPress.

Pasa el cursor sobre Apariencia y elige Personalizar, luego elige la pestaña Identidad del sitio. El ícono del sitio se encuentra en la parte inferior del panel izquierdo y le permite elegir cualquier imagen cuadrada de 512 píxeles o más grande, que luego cambia de tamaño según sea necesario.

Si el archivo que elige no es un cuadrado, WordPress proporciona una interfaz para recortar la imagen en un cuadrado.

2) Edite el encabezado.php

Edite el archivo header.php en su tema actual y agregue este código:

 <link rel=”icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” > <link rel=”shortcut icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” />

Reemplace "sudominio" con el nombre de dominio de su sitio y asegúrese de cargar el favicon en el espacio web.

Si desea evitar que WordPress deshaga el cambio en una actualización, cree un tema secundario antes de editar y edite el archivo del tema secundario en lugar del archivo del tema principal.

3) Use un complemento de WordPress.

Use uno de los complementos que enumeramos a continuación.

Cómo cambiar un Favicon en WordPress

Cambiar el favicon de WordPress es similar a agregar uno. Los mismos métodos funcionan para cargar un nuevo favicon. También es posible cargar uno nuevo y sobrescribir el anterior, lo que lo cambiará cuando los visitantes borren su caché o realicen una actualización completa.

Deje que WP Buffs maneje sus actualizaciones y cambios si encuentra que el proceso es confuso. El equipo está disponible 24/7 para brindar servicio y asistencia.

Simplifique con un complemento de Favicon de WordPress

Facilite el proceso de agregar o cambiar el favicon de WordPress instalando un complemento.

• Puede usar el complemento Insertar encabezados y pies de página para agregar el código anterior fácilmente. Pegue el código en la sección de encabezado y guárdelo.
• El complemento All in One Favicon agrega la funcionalidad para facilitar el proceso de agregar un favicon.
• RealFaviconGenerator es un complemento que genera iconos según los requisitos del navegador.
• Otro complemento popular es Heroic Favicon Generator, que genera un favicon a partir de una imagen cargada o una que ya está en su biblioteca de medios. Utiliza arrastrar y soltar para cargar archivos de imagen.

¿Por qué no aparece mi Favicon de WordPress?

Hay varias razones posibles para los errores de favicon, desde errores del usuario hasta idiosincrasias del navegador.

Cache

Cuando su sitio web está en caché, los cambios en elementos como el favicon tardan en aparecer. Puede acelerar el proceso haciendo una actualización completa (Ctrl + F5) o borrando el caché del navegador. Si eso no soluciona el problema, verifique el tipo de archivo de favicon. Si no es un archivo .ico, es posible que no sea compatible con el navegador.

errores tipográficos

Si tiene un error tipográfico en el código, es probable que el favicon se muestre como un error en lugar de mostrarlo. Los errores simples, como una cita faltante, una barra inclinada o un corchete, provocan errores que estropean la imagen y posiblemente toda la página web. Revisa el código cuidadosamente.

Ubicación del icono de favoritos de WordPress

La referencia del archivo también es muy específica. Si el enlace (la parte dentro de las comillas href) apunta a una imagen que no existe, el favicon no se mostrará. Tenga cuidado de cargar el archivo de favicon y copiar el enlace exacto. La mejor manera de hacer esto es usar la Biblioteca multimedia dentro de WordPress.

Vista local

Si está revisando la pantalla en una computadora local en lugar de cargar la página de Internet, el favicon de WordPress no se mostrará porque la mayoría de los navegadores no buscan localmente el favicon. Compruebe la página en Internet para asegurarse de que se muestra a los visitantes.

Tipo de imagen incorrecto

El tipo de archivo predeterminado para la imagen de favicon es .ico ("imagen/ico"). Cuando se usa otro tipo de archivo, como PNG o SVG, debe ajustarse en el código cuando se usa el método de edición de tema. El tipo de archivo debe coincidir con el tipo de archivo de la imagen. Por ejemplo, un archivo PNG debe decir "imagen/png" en lugar de "imagen/ico".

Para obtener más información sobre todo tipo de temas relacionados con WordPress, suscríbase al boletín de WPBuffs.

La gente también pregunta