Una guía para principiantes de WordPress Favicons

Su marca sin duda sufrirá si no establece una identidad visual clara en su sitio. Las personas no quieren visitar sitios que ofrezcan una experiencia de usuario débil y un diseño incoherente. Asegurar que su sitio se destaca en las pestañas y la lista de listados de un navegador web lo ayuda a fortalecer su marca, y Favicon es una forma simple de hacerlo. Los favicones permiten a los propietarios de sitios web establecer una fuerte identidad visual, al tiempo que mejora la experiencia del usuario. En este artículo, cubriremos todo lo que necesita saber sobre favoritos, qué son, dónde los usan y cómo lo ayudan a usted y discutir las mejores prácticas de Favicon y los formatos de imagen recomendados. Concluiremos con una mini turna sobre las tres formas de implementar Favicon en WordPress.
¡Vamos a agrietar! Una introducción a Favicons Favicon son esas pequeñas imágenes que se muestran en la pestaña del navegador del nombre de su sitio:

Los primeros favicones se implementaron en los primeros días de Internet y se lanzaron por primera vez en Microsoft Internet Explorer 5 en 1999. Unos meses después, el Consorcio World Wide Web (WC3) ha estado en práctica y ha estado en práctica desde entonces. Además de las interfaces con pestañas de navegadores modernos, Favicon también encontró un lugar en la historia y las marcas en todos los dispositivos. Desde el punto de vista de la identidad visual, Favicon es increíblemente importante para cualquier negocio en línea. Los usuarios de Internet a menudo tienen varias pestañas abiertas en su ventana simultánea del navegador. Los favicones facilitan su navegación de regreso a su sitio. También construyen una fuerte identidad de marca en las mentes de los espectadores. Usando favicones, los visitantes frecuentes de su sitio podrán reconocer su sitio y, por lo tanto, su marca, con relativa facilidad cuando lo ven la próxima vez. Los facros pueden tener un fuerte efecto, incluso si ocupa solo una pequeña cantidad de espacio en el espacio en el pantalla. Y, como cualquier otro elemento de marca, tienen su propio conjunto de reglas y buenas prácticas que permiten a los propietarios de sitios web capitalizar su máximo potencial. Las mejores prácticas para crear e implementar el enfoque de Favicon “tradicional” es crear archivos ICO para favicons. Dicho esto, la mayoría de los principales navegadores utilizados hoy ofrecen soporte para favicones guardados en formatos de imagen PNG y SVG, y PNG es, sin duda, el modo “moderno”.
Debido a que el soporte para el formato de archivo SVG sigue siendo bastante irregular, a continuación cubriremos los dos archivos de imagen más utilizados para crear e implementar Favicon. Formato de archivo ICO Quizás el formato de imagen más popular para Favicons es el formato de archivo ICO. Es aceptado por todos los principales navegadores y funciona perfectamente en dispositivos móviles. El formato de archivo ICO es bastante cuidado, ya que puede almacenar varias versiones de la misma imagen en un solo archivo y permitir que el navegador muestre la imagen con una resolución óptima para el dispositivo que accede a su sitio, acepta la transparencia del canal Alpha 8 bits, lo que le permite crear un atractivo favicon visualmente. El formato de archivo ICO no debe confundirse con los archivos PNG que se renombran los archivos ICO. Algunos navegadores tendrán la amabilidad de perdonar este error inocente, pero no lo ayudará mucho más allá de eso, porque los archivos ICO reales aceptan más versiones de una imagen (mientras que los PNG no lo hacen). Las mejores prácticas para la implementación de Favicon dictan que, incluso si prefiere usar otro formato de archivo, aún debe tener una versión ICO. La razón detrás de esto es simple: algunos navegadores todavía están buscando el archivo favicon.ico predeterminado. Si no puedo encontrarlo, su sitio probablemente mostrará un Favicon genérico y predeterminado, ambos no harán ningún bien para la marca.
Formato de archivo PNG A pesar de lo que sugieren las mejores prácticas, algunos de nosotros nacemos rebeldes y elegimos el formato de archivo PNG para nuestros favicones. Los archivos PNG son indudablemente más fáciles de crear en comparación con los archivos ICO: puede hacerlo en casi cualquier software de edición de imágenes, con un mínimo de habilidades de diseño. Al igual que los archivos ICO, los PNG también proporcionan transparencia de canal alfa de 8 bits; La única desventaja es la falta de varias dimensiones de la imagen. Opciones de tamaño de Favicon Como mencionamos brevemente anteriormente, el formato de archivo ICO almacena varias versiones de una imagen en diferentes tamaños y resoluciones. Esto permite a los propietarios de los sitios web crear el favicón de su sitio en dimensiones adecuadas para su uso en dispositivos móviles, además de las computadoras de escritorio. El mal de chaleco es que ofrecer favicones óptimos para dispositivos móviles requiere que tenga en cuenta varios elementos, tales como Como el tamaño de la pantalla del dispositivo, la resolución y el sistema operativo que ejecutan. La mejor manera de hacerlo es proporcionar soporte completo: Favicons ICO, PNG Favicons, Apple Touch Icons y Windows 8 Tile Graphics. Al hacerlo, le aseguramos que los visitantes de su sitio ven la versión más óptima de su Favicon para su dispositivo. En aras de la simplicidad, en la siguiente sección, le mostraremos cómo puede crear un favicon estándar.
¿Qué formato de archivo debe usar? Lo mejor que puede hacer es usar ICO y PNG. Por un lado, PNG es fácil de crear en casi cualquier software de edición de imágenes y representa el “futuro” de Favicon. Y, por otro lado, ICO permite varias dimensiones de archivos y transparencia, aunque puede no ser tan fácil de crear. Si está familiarizado con las herramientas profesionales de edición de imágenes, entonces es mejor crear una versión ICO y una versión PNG de su Favicon. Haga que ICO Favicon se almacene en el directorio raíz de su sitio en el archivo Favicon.iCo. (Tenemos pasos sobre cómo implementar Favicon en su sitio web de WordPress más tarde). Cómo crear un Favicon para su sitio web
Hay muchas opciones para crear favicones. Quizás los más rápidos y fáciles son los editores de Favicon en línea, como Favicon Generator (que recomendamos con todo corazón). Más allá de eso, tienes un viejo Adobe Photoshop, sin mencionar el popular (¡y gratis!) GIMP, que es nuestro instrumento elegido. Los próximos pasos cubren cómo puede crear un Favicon para su sitio web utilizando GIMP. Comience por iniciar el GIMP y creando un nuevo archivo navegando en el archivo> Nuevo:
Establezca el lienzo en 512 PX a 512 PX con una resolución de 72 px/pulgada. Asegúrese de que el espacio de color esté configurado en el color RGB y que el lienzo esté lleno de transparencia.
Diseñe su favicón en el lienzo, asegurándose de que ocupe todo el lienzo (es decir, no deje mucho espacio en blanco).
Cuando su diseño esté listo, explore el archivo> Exportar y seleccione la extensión .ICO. Haga clic en el botón Exportar para continuar. Guardar el Favicon como un archivo ICO tiene la ventaja adicional de que contiene varias dimensiones de imagen y el navegador servirá automáticamente al tamaño más adecuado según el dispositivo o el sistema operativo. ¡Eso es todo! Ahora que ha creado el Favicon y listo para operar, todo lo que queda por hacer es subirlo a su sitio de WordPress.3 formas de agregar un favicon a WordPress Cargar un favicon a su sitio es la parte fácil. Debe seguir uno de los tres métodos enumerados a continuación, dependiendo de su configuración. Opción 1: Cargar Favicon por WordPress Customizer (nota: No todos los temas tienen la opción de cargar un Favicon. Si no lo hace, puede seguir a uno de los otros Métodos.) Inicie sesión en el panel de administración de WordPress y acceda a la apariencia> Personalización. Luego elija la identidad del sitio> el icono del sitio y haga clic en el botón Seleccionar imagen. Una vez que haya seleccionado el archivo Favicon, haga clic en el botón Seleccionar. Su favicon aparecerá en el sitio de icono de título en la sección Identidad del sitio:


Haga clic en el botón Guardar y publicar. Opción 2: Cargue Favicon a través de la página de opciones de tarea (nota: No todos los temas tienen un panel de opción de tema construido. Si no lo tiene, puede seguir uno de los otros métodos). Muchos temas permiten que los propietarios del sitio web Cargar favoritos a través de la página de opciones de tema. Div, por ejemplo, tiene una opción para cargar favoritas a través de las opciones del panel:

Consulte su documentación de base (o busque un poco a través del panel de opciones, si corresponde) para averiguar si esta funcionalidad está disponible para usted. Opción 3: use un complemento si su tema no le permite cargar un Favicon a través de la personalización predeterminada de WordPress o tener un panel de opción de tema integrado, puede usar un complemento. Hay algunos complementos disponibles, como todos en un rotador de Favicon y Favicon. Sin embargo, nos centraremos en nuestro Favicon de elección por Realfavicongnerator-Below. Facavic de Realfavicongnerator es un complemento gratuito de WordPress que permite a los propietarios de sitios web crear y cargar sus favicones. El complemento le asegura que su favicon será óptimamente visible tanto en las computadoras de PC como en las computadoras Mac, además de iOS, Android y Windows 8. Para iniciar, acceder a complementos> Agregar nuevo desde el panel. Administración de su sitio e instale el Favicon por Realfavicongnerator complemento. Después de haber activado el complemento, explore el aspecto> favicon para cargar el archivo de imagen de Favicon:

Haga clic en el botón Género Favicon para continuar. Será redirigido a una pantalla que le permita establecer las opciones de configuración de su dispositivo:

Una vez que haya configurado la configuración, desplácese hacia abajo y haga clic en el botón Generar Favicon y HTML:
¡Eso es todo! Puede obtener una vista previa del favicon en diferentes dispositivos en la siguiente pantalla. La conclusión de Favicon puede no ser el elemento de marca más importante de su sitio, pero son rápidos y fáciles de implementar y proporcionar beneficios. Le darán el sitio el poder adicional que necesita para que aparezca en una ventana de navegador llena de gente. Después de leer este tutorial, ahora está en una mejor posición para llevar las cosas más allá. Recapitulemos rápidamente los puntos principales que hemos abordado en esta publicación: comience por decidir por qué las dimensiones de archivos y archivos necesitarán.

Cree su favicon usando un generador de favicon o una herramienta de edición de imágenes profesional.

Cargue su favicon en WordPress utilizando uno de los tres métodos que cubrimos.

¿Se las arreglaste para crear y cargar tu Favicon? ¡Póngase en contacto con la sección de comentarios a continuación y háganoslo saber! Crédito de la imagen: Geralt.