Cómo agregar un favicon a mi sitio - tanto en el frontend como en el panel de administración

Question

Cómo agregar un favicon a mi sitio - tanto en el frontend como en el panel de administración

16 mar 2014, 07:41:59

Vistas: 16.5K

Votos: 8

¿Cómo puedo agregar un favicon a mi sitio de WordPress tanto en el frontend como en el panel de administración? He probado varias formas pero no he tenido éxito.

Sé que para mostrar el favicon el código es:

<link rel="shortcut icon" href="images/favicon.ico" />

¿Cómo puedo implementarlo correctamente?

Mayeenul Islam

12.9K

plugins temas favicon

Todas las respuestas a la pregunta

Comentarios

Respuesta adecuada. Esto ayudará a muchos por ahí. He estado usando este código en mi propio plugin desde hace un tiempo.

Pieter Goosen

16 mar 2014 07:56:04

Esta respuesta definitivamente merece más votos a favor.

Smokey

16 oct 2014 08:05:02

Excelente respuesta, excepto que deberías usar get_stylesheet_directory_uri(), no get_template_directory_uri() para temas hijos! :)

Eric Holmes

30 oct 2015 23:00:30

@EricHolmes En realidad eso es lo que quise decir, pero ya lo entendí, puede ser confuso, así que ya está corregido. Gracias por tu comentario. :)

Mayeenul Islam

31 oct 2015 17:18:28

Llego tarde a responder en este hilo. Pero quizá pueda ayudar a alguien en el futuro.

Ve a tu panel de administración de WordPress y sigue:

Apariencia » Personalizar » Identidad del sitio

Ahora sube un icono.

Usman Siddiqui

41

4 dic 2016 09:01:33

Comentarios

sí, esa funcionalidad fue añadida en la versión 4.4 si no recuerdo mal

Mark Kaplun

4 dic 2016 09:09:24

hmm eso no lo sabía :)

Usman Siddiqui

5 dic 2016 10:42:54

Con las versiones recientes de WordPress, probablemente esta sea la mejor manera.

João Teixeira

28 mar 2022 10:04:43

Mayeenul Islam 12.9K · Accepted Answer · 2014-03-16T07:41:59Z

Actualización

La siguiente solución alternativa es necesaria para usuarios que están utilizando WordPress en una versión anterior a la 4.4. Si estás usando WordPress v4.4 o superior, no necesitas implementar una solución tan extensa. Simplemente sigue la respuesta de Usman Siddiqui, y es así de fácil.

Respuesta Actual

Puedes agregar un favicon a tu sitio WordPress de dos formas:

Mediante el Tema, o
Mediante un Plugin

Preparación

Para agregar un favicon, primero debes crearlo. Los favicons típicamente tienen dimensiones de:

16px x 16px, o
32px x 32px.

Primero, crea uno usando un software de gráficos y guarda el archivo con el nombre 'favicon' en formato .png (para transparencia) o .jpg, etc. Renombra el archivo y cambia la extensión a .ico (archivo de icono) - así que tu archivo sería favicon.ico.

Mediante el tema:

Código Directo

Para implementar el favicon usando el tema, recuerda que estás usando WordPress y debes hacerlo de la manera correcta. Para mostrar la ruta exacta del archivo, usa get_template_directory_uri() para el tema principal, o get_stylesheet_directory_uri() para temas hijos. El código para implementar el favicon sería (asumiendo que el archivo favicon.ico está guardado en una carpeta llamada "images" dentro de tu tema):

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" />

Puedes colocar este bloque de código entre las etiquetas <head> y </head> de tu tema para que el favicon funcione.

Código Dinámico

Para implementar el favicon de manera dinámica, usa el siguiente código:

function add_my_favicon() {
   $favicon_path = get_template_directory_uri() . '/images/favicon.ico';

   echo '<link rel="shortcut icon" href="' . esc_url($favicon_path) . '" />';
}

add_action( 'wp_head', 'add_my_favicon' ); //front end
add_action( 'admin_head', 'add_my_favicon' ); //admin end

Usamos el mismo código, pero ahora dentro de una función para ejecutar la acción. Luego, añadimos la acción usando dos hooks:

wp_head — mostrará el favicon en el front-end usando la función de WordPress wp_head() en la sección head de tu tema
admin_head — mostrará el favicon en el panel de administración

Mediante plugin

Puedes crear tu propio plugin para establecer el favicon en tu sitio. Es mejor porque, incluso si cambias el tema, tu favicon no se perderá. Así es como lo implementamos con nuestro plugin personalizado:

<?php
/*
Plugin Name: Mi Plugin de Favicon
Description: Activando un favicon en mi sitio.
*/

function add_my_favicon() {
    $favicon_path = plugins_url( '/favicon.ico', __FILE__ );    

    echo '<link rel="shortcut icon" href="' . esc_url($favicon_path) . '" />';
}


add_action( 'wp_head', 'add_my_favicon' ); //front end
add_action( 'admin_head', 'add_my_favicon' ); //admin end

Guarda el archivo con el nombre my-favicon.php en una carpeta y coloca tu archivo favicon.ico dentro de esa carpeta. Nombra la carpeta como my-favicon y colócala dentro de /wp-content/plugins/. Ahora, entra en tu panel de administración de WordPress y activa el plugin para ver tu favicon en acción. :)

Icono de Apple Touch

Además de estas formas, también puedes implementar un icono de Apple Touch:

Implementando un Icono de Apple Touch por helgatheviking — Desarrollo WordPress

Las dimensiones de un icono de Apple Touch son 129px x 129px. :)