¿Cuál es la forma correcta de añadir un favicon en WordPress sin un plugin?

29 feb 2012, 17:14:41

Vistas: 26.4K

Votos: 14

¿Cuál es la forma correcta de añadir un favicon en WordPress sin un plugin?

¿Simplemente coloco un archivo llamado favicon.ico con mi icono en la raíz de mi sitio?

¿También necesito este código?

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" />

Algunos dicen que es este código:

<link rel="icon" type="image/png" href="http://yourblog.com/favicon.png" />

¿Y esto es para iPhones?

<link rel="apple-touch-icon" href="/customIcon.png" />

¿Alguna sugerencia sobre software para crearlo o para convertirlo desde una miniatura? ¿Y qué tipos de archivos son compatibles - solo .ico?

Vi otro hilo con tantos métodos y no me quedó claro cuál es la mejor práctica para esta tarea simple: ¿Cómo cambiar el favicon de WordPress?

DreamGrowers

171

favicon

Comentarios

¿Por qué la restricción de sin un Plugin?

Chip Bennett

Chip Bennett

29 feb 2012 17:36:58

La pregunta contiene, en mi opinión, demasiados elementos fuera de tema. Voto por cerrarla.

kaiser

kaiser

29 feb 2012 20:54:28

Todas las respuestas a la pregunta

Suelo colocar los iconos en una carpeta de imágenes dentro de mi tema, así que usaría:

function kia_add_favicon(){ ?>
    <!-- Favicons personalizados -->
    <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri();?>/images/favicon.ico"/>
    <link rel="apple-touch-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/apple-touch-icon.png">
    <?php }
add_action('wp_head','kia_add_favicon');

Editado: para agregar el icono apple touch según el comentario, y aclarar que si estás usando un tema hijo pero el favicon está en la carpeta de imágenes del tema padre, deberías usar:

get_template_directory_url();

Si no estás usando un tema hijo, cualquiera de los dos funcionará.

Normalmente creo mis favicons aquí: http://tools.dynamicdrive.com/favicon/

helgatheviking

14.5K

29 feb 2012 17:28:14

Comentarios

En el caso de un tema hijo, ¿no sería mejor usar get_template_directory_uri? En respuesta a la pregunta original, he añadido un icono Apple de 114x114px así: <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png">. También hay mucha más documentación sobre cómo añadir favicons e iconos Apple aquí: https://github.com/h5bp/html5-boilerplate

User

User

29 feb 2012 20:37:40

Creo que html5bp ha dejado de añadirlos en el encabezado. Si colocas los iconos con los nombres correctos en la raíz del sitio, la mayoría de los navegadores los encontrarán automáticamente. Pero para responder a tu pregunta, tema hijo versus padre... en realidad depende de dónde guardes la imagen del favicon. get_template_directory_uri() obtiene la URL del tema padre, mientras que stylesheet_directory_uri() obtiene la URL del hijo SI es un tema hijo O la URL del padre si es el tema activado.

helgatheviking

helgatheviking

29 feb 2012 20:41:47

Tienes razón. Los he confundido... html5bp efectivamente los ha eliminado del encabezado, pero todavía hay buena documentación en el código fuente (principalmente sobre los iconos Apple) mathiasbynens.be/notes/touch-icons

User

User

29 feb 2012 21:01:18

En realidad, el método correcto para añadir un favicon es mediante un Plugin, para que el favicon añadido no dependa del Tema. Básicamente, usa el método de @helgatheviking, pero colócalo en un Plugin personalizado, en lugar de en el archivo functions.php de tu Tema.

Nota: si estás usando un dominio de primer nivel, es decir, example.com, simplemente coloca favicon.ico en la raíz del documento y listo. Para cualquier otro caso, crea un Plugin personalizado.

Nota 2: Consulta el Tiquete Trac #16434. Una opción para el favicon del sitio se está añadiendo al núcleo, con suerte la primera versión llegará en la próxima versión 3.4.

Chip Bennett

55.1K

29 feb 2012 17:42:04

Comentarios

uno de estos días necesito usar el fragmento de código de otto. afortunadamente la gente no cambia su tema a diario, pero estoy completamente de acuerdo en que los favicons (y los tipos de publicaciones, etc.) no deberían depender del tema. estoy deseando que esto llegue al núcleo.

helgatheviking

helgatheviking

29 feb 2012 20:51:15

Realmente ni siquiera es tanto un "fragmento de código". Piensa en ello como el archivo functions.php de un tema, con un encabezado phpDoc particular, que vive en wp-content\plugins\some-plugin\nombre en lugar de en wp-content\themes\nombre-del-tema.

Chip Bennett

Chip Bennett

29 feb 2012 21:34:33

Mucho dependerá del tema que estés utilizando. Si el tema está definiendo tu favicon (con una etiqueta <link> en el encabezado), entonces necesitarás reemplazar favicon.ico en tu tema para cambiarlo.

Pero si tu tema no está definiendo nada, colocar un favicon.ico en la raíz de tu sitio debería ser suficiente.

EAMann

32.2K

29 feb 2012 17:31:30

Comentarios

Sin duda la mejor respuesta con un <link rel="icon" type="image/x-icon" href="favicon.ico"> dentro de la etiqueta <head> de tu archivo header.php en tu tema hijo.

Isak La Fleur

Isak La Fleur

25 nov 2021 12:36:05

Sé paciente, el núcleo está ahí para ayudar

Esta es una característica planificada, con dos desarrolladores principales asignados, que llegará con la versión 3.4.

kaiser

50.8K

29 feb 2012 20:53:54

Comentarios

Estamos un poco retrasados - puede que no esté listo en la versión 3.4. Sabremos más después de la reunión de hoy.

Tom Auger

Tom Auger

7 mar 2012 17:40:14

@TomAuger Gracias por mantener esto actualizado. Siéntete libre de editar la respuesta cuando tengas un estado completo.

kaiser

kaiser

7 mar 2012 21:17:08