Cómo usar All in One Favicon para agregar más a WordPress










  • Antes de saltar a este tutorial del complemento All in One Favicon, retrocedamos en el tiempo por un momento.

    Allá por el siglo pasado, casi todos los navegadores web ofrecían una lista de favoritos o marcadores. A medida que la web creció en tamaño, la lista de favoritos pasó de ser una característica interesante a ser una adición necesaria. Pero si tu lista de favoritos era larga, a veces era difícil encontrar el sitio web que estabas buscando.

    Entonces, un desarrollador inteligente de Microsoft creó el favicon. Es una imagen de 16 x 16 píxeles que apareció junto al título del sitio web, lo que facilita la identificación del sitio. Siempre que su sitio tuviera el archivo de imagen .ico en su directorio raíz, se mostraba en la lista de favoritos.

    Pronto, todos los demás navegadores adoptaron el favicon y, en Internet Explorer, comenzó a aparecer junto a la barra de direcciones. Ahora, por supuesto, el gráfico aparece en la pestaña del navegador. Y si lo piensa, las pestañas no serían tan convenientes sin el humilde favicon.

    Crear una imagen de Favicon no siempre es fácil

    El formato de archivo .ico es un formato de Windows, por lo que no siempre ha sido fácil crear su propia imagen de favicon. La mayoría de los programas gráficos no pudieron crear el archivo. Incluso Photoshop solía requerir un complemento para guardar un archivo .ico.

    Ahora, por supuesto, hay sitios web que convertirán su archivo de imagen de 16 x 16 píxeles a .ico desde casi cualquier formato.

    Pero, ¿por qué usar un sitio web aleatorio para crear un archivo .ico si no es necesario?

    Le mostraré cómo crear un favicon para su sitio de WordPress usando un complemento, All In One Favicon .

    El complemento All In One Favicon WordPress incluso le permite agregar diferentes gráficos a su sitio público y páginas de administración. Puede descargar un favicon o cargar una imagen para crear uno. El complemento creará la imagen a partir de un archivo .ico, .png, .gif o Apple Touch Icon.

    Este es un complemento simple de una sola función, pero veamos los pasos para configurar su favicon.

    Instalación del complemento All In One Favicon

    Inicie sesión en su panel de administración de WordPress.

    En la navegación de la columna izquierda, pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo".

    pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo"

    En el cuadro "Buscar complementos...", ingrese "All In One Favicon".

    busque el complemento WordPress All In One Favicon

    Una vez que haya localizado el complemento, haga clic en el botón "Instalar ahora".

    haga clic para instalar el complemento WordPress All In One Favicon

    Finalmente, haga clic en el botón "Activar".

    haga clic para activar el complemento WordPress All In One Favicon

    Crear un icono favorito

    Por defecto, WordPress usa un favicon perfectamente aceptable.

    favicon predeterminado de WordPress

    Pero la idea aquí es deshacerse de él. Porque no es fácil encontrar su sitio en la lista de favoritos de alguien si tiene el mismo gráfico que otros veinte sitios.

    Entonces, repasemos los pasos para crear uno nuevo y distinguir su sitio web de todos los demás.

    En la columna de navegación de la izquierda, pase el mouse sobre el enlace "Todo en uno Favicon" y haga clic en el enlace "Todo en uno Favicon".

    haga clic en el enlace "Todo en uno Favicon"

    La página del complemento tiene las secciones "Configuración de frontend" y "Configuración de backend". Esos son los controles separados para el favicon de cara al público (Configuración de interfaz) y el gráfico del área de administración (Configuración de back-end).

    Solo vamos a crear un favicon de interfaz para las áreas públicas del sitio. Pero todo lo que hacemos aquí también se aplica a la configuración del backend.

    Sin embargo, vale la pena señalar que si no especifica un favicon para su área de administración, no se mostrará ninguno. La imagen que especifique para la interfaz no aparecerá en sus páginas de administración.

    Como puede ver, hay cuatro opciones para su archivo: .ico, .png, .gif o Apple Touch Icon.

    opciones para el archivo favicon

    Dado que tengo un archivo PNG a mano aquí, haré clic en el botón "Cargar" en la línea "Interfaz PNG". Eso abre un cuadro de diálogo estándar de selección de archivos.

    Después de seleccionar el archivo de su computadora, parece que no pasó nada. El complemento no le da ninguna indicación de que su archivo se cargó correctamente.

    Pero si hace clic en el botón "Guardar cambios":

    haga clic en el botón "Guardar cambios"

    Verá que aparece una ruta a su archivo cargado en el campo:

    ruta a su archivo cargado

    Y lo creas o no, eso es todo.

    La imagen recién cargada ahora aparecerá como su favicon.

    nuevo favicon

    Favicons y caché del navegador

    Desafortunadamente, no podemos actualizar los favicons refrescando una página: cada navegador almacena los favicons de una manera diferente. Y borrar la memoria caché de su navegador solo para ver una nueva imagen suele ser una exageración.

    Por esa razón, sugiero abrir un navegador diferente y visitar su sitio para ver el nuevo favicon. Eventualmente, aparecerá en su navegador principal. Pero puede que no suceda hasta que cierre y vuelva a abrir el software.

    AlgunosExtrañoComportamiento interesante

    Como puede ver en nuestro sitio de prueba, es posible cargar varios archivos de favicon:

    múltiples archivos de favicon

    No pude encontrar ninguna información sobre la jerarquía, pero transmitiré lo que encontré a través de prueba y error.

    La lista de formatos, como se muestra, con .ico primero, luego .gif, .png y Apple, es el orden jerárquico. Entonces, si carga un archivo .png, luego un .gif, el .gif será el favicon. Si carga un archivo .ico, ocupará la posición principal. Los archivos .gif y .png que cargó anteriormente todavía están ahí; simplemente no se utilizan. El complemento tiene como valor predeterminado el archivo más alto en ese orden.

    No estoy seguro de qué ventaja hay (si la hay) en tener varios tipos de archivos cargados, pero ahí lo tienes.

    Qué sucede si desinstala el complemento All In One Favicon

    Si desinstala el complemento, su favicon dejará de funcionar.

    Esto se debe a que el complemento no crea un archivo de 16 x 16 píxeles y lo coloca en su directorio raíz. Utiliza el método alternativo de agregar:

    [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]<link rel=”icon” href=”[ URL a la imagen ]” type=”image/[ tipo de archivo ]”/>[/ht_message]

    dentro de la etiqueta <head> de su sitio. Cuando desinstalas el complemento, esa línea ya no se inserta en el encabezado, por lo que tu favicon desaparecerá.

    Puede copiar el enlace del icono antes de desinstalar el complemento y luego agregarlo al encabezado de su tema manualmente. Pero, por supuesto, si haces eso, te recomiendo usar un tema hijo. Y esa es una capa adicional de complejidad que quizás no desee asumir.

    Es fácil pasar por alto las cosas simples

    Cuando está creando un nuevo sitio web y comprando alojamiento , un favicon es probablemente lo último que tiene en mente. Si olvidaste un favicon y ahora necesitas una manera fácil de crear uno, aquí lo tienes.

    O tal vez ha pospuesto el cambio o la actualización de su favicon porque es demasiado complicado. Sea cual sea el barco en el que te encuentres, espero que este tutorial del plugin favicon de WordPress te ayude.

    No es frecuente que una tecnología web temprana permanezca tanto tiempo como esta. ¿Recuerdas los marcos? ¿Qué tal <parpadeo>? Siento recordarte lo de <blink>. Olvidame. ¿Y cuándo fue la última vez que escuchó a alguien referirse a él como "webmaster"? Apuesto a que ha pasado un tiempo.

    (Y no, tu abuela tratando de describir cuál es tu trabajo durante la cena de Acción de Gracias no cuenta. Puede decir "webmaster").

    El hecho de que todavía usemos favicon hoy en día es una señal de su utilidad duradera. Todavía es esencial establecer esta imagen para que tus visitantes puedan encontrarte cuando quieran volver.

    ¿Alguna vez has implementado un favicon a la antigua? ¿Cuánto tiempo ha pasado desde que actualizaste tu favicon? Házmelo saber en los comentarios.










  • Subir