Como añadir un favicon a tu pagina web en WordPress

Hoy te voy a enseñar de una forma rapida y sencilla con esta guia para añadir un favicon a tu pagina web usando WordPress.

En primer lugar, ¿qué narices es un favicón? Pues muy sencillo, mira esta pagina web y veras que al lado de la dirección web aparece una caricatura con el careto de alguien muy feo, si ese soy yo. ¿Queda chulo verdad? Actualmente cualquier pagina web que se precie debe tener el suyo. Por ejemplo,

Ejemplo con los favicon mas famosos

Te suenan, ¿verdad?. Pues eso, un favicon, viene del ingles, favorite icon, también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular. Los navegadores gráficos lo muestran en la barra de direcciones y en el encabezado de la pestaña correspondiente. Son utilizados para identificar mas fácilmente las paginas. Un favicon debe tener unas dimensiones de 16×16 o 32×32 y contener un formato .ico, aunque poco a poco ciertos navegadores soportan imágenes GIF o PNG.

¿Como hacerlo ? Muy fácil, hay varias técnicas.  Ciertas paginas en internet te ofrecen el servicio de reducirte cualquier imagen que subas a su pagina al tamaño necesario, y luego darles el formato .ico Hay algunas que hasta te cobran!, que lógicamente ni mencionaré. Hay otras paginas o esta donde puedes dibujar online el favicon. Tiene su gracia, pero apenas puedes hacer cosas, pero para algo sencillo vale!

Mi consejo es otro.  Lo mejor que puedes hacer es buscarte la imagen que vayas a querer para favicon. Recuerda que vas a tener en total, como máximo 32×32 pixeles, así que no creas que puedes poner a la mona lisa con total resolución, para nada. Una imagen sencilla, después se retocará. Una vez hecho esto, utilizando por el ejemplo el photoshop, simplemente reduces el tamaño de la imagen. Pensarás, esto es igual que simplemente subirla a la pagina web y que te lo hagan ellos, pero no! Si lo haces por ti mismo, lo primero es que aprenderás algo, y lo segundo es que te quedará mejor, podrás retocar. El favicon se tarda en hacerlo bien. Puedes hacer cualquier cutrez, pero no quedará bien, creeme. Por tanto, hazlo tu mismo. Una vez tengas esa imagen, simplemente súbela a cualquier convertidor a .ico y el hará el trabajo, por ejemplo este conversor a .ico.

Muy bien, la primera parte está hecha, ahora solo tenemos que mostrar el favicon en nuestra pagina web. Esta guía esta orientada a WordPress, pero habrá gente que saque la esencia y sepa adaptarlo a su propio html.

Pues muy bien, en primer lugar, tenemos que subir mediante ftp (PONER ENLACE A GUIA) (o cualquier otro metodo) nuestra imagen al directorio raiz de nuestro tema de wordpress, esto es, una dirrecion algo asi:

wordpress/wp-content/themes/¨Nombredetutema¨/

Una vez puesta ahi, vamos dentro de nuestro wordpress a Apariencia -> Editor -> Header.php (Cabecera). Dentro de ella solo tenemos que copiar este código:

>link rel=”shortcut icon” href=”>?php echo get_stylesheet_directory_uri(); ?</favicon.ico” /<

y salvar los cambios. Inmediatamente después ya podréis estar disfrutando de vuestro favicon molón y chulo. (No te olvides de cambiar el sentido de los signos!)
Como veis, es algo muy sencillo.

Problemas

Hay alguna gente que no le gusta este método por una razón. Básicamente, en el momento que se actualice (o actualicen) tu tema, esta información se perderá, y no están faltos de razón! Otra opción es usar un plugin, que puede hacer mas pesada tu pagina web. Si conocéis de un plugin que SOLO haga esto, decidmelo y yo lo pongo aquí como recomendación para los demás! Aquí tomais vosotros la decisión, depende de vosotros. Mi consejo? Ponedlo como yo os digo, y cuando actualicéis el tema, volvéis aquí y con el código lo fijáis en un boleo.

No te olvides de ver la guia para crear paginas web que estoy completando poco a poco!

Fuentes utilizadas:

http://codex.wordpress.org/Creating_a_Favicon

David Sánchez Plaza

by

16 pensamientos sobre “Como añadir un favicon a tu pagina web en WordPress

  1. Pingback: Guia para crear pagina web | David Sánchez Plaza | David Sanchez Plaza

  2. Hola David! he seguido los pasos que dices pero sigue sin aparecerme el favicon, sabes porqué puede ser? he subido la imagen a la librería multimedia en vez de a la ftp, pero yo no tengo acceso a ella. Gracias!

      • Hola a los dos!
        No es que se pueda acceder a “la fpt” esa… FTP file transfer protocol es una forma de subir archivos a tu servidor. Cuando comprasteis la pagina, o donde quiera que esté alocada, tendriais que tener acceso por eso de haber instalado y cargado wordpress.
        A eso me refiero con ftp. Es basicamente para subir tu archivo.

  3. Seguramente lo que pregunte es de cajón. Pero estoy montando mi página web en wordpress y no sé en que parte de aquí debo pegar las líneas indicadas.

    ¿podrías resolverme la duda?

    gracias

    /*========================*/
    /*=== 5. Header ===*/
    /*========================*/

    header { z-index: 999; position: relative; background: #fff; }

    header .logo { float:left; padding:20px 0; }
    header .logo img { height: auto; }
    header .logo img.retina-logo { display: none; }
    header .inner { position: relative; }

    #header-wrap {
    background: rgba(255,255,255,0.98);
    }

    /*Sticky Header */

    .vntd-sticky-now {
    position: fixed;
    top: auto;
    width: auto;
    top: 0;
    }

    .vntd-wide .vntd-sticky-now {
    width: 100%;
    }

    .admin-bar .vntd-sticky-now {
    top: 32px;
    }

    /*Header Styles */

    .header-style-centered .logo,
    .header-style-bottom .logo,
    .header-style-centered .nav,
    .header-style-bottom .nav,
    .header-style-centered .nav ul li {
    float: none;
    }

    .header-style-centered .logo {
    padding-bottom: 0;
    }
    .header-style-centered .logo img {
    margin: 0 auto;
    }

    .header-style-centered .nav ul li {
    display: inline-block;
    }

    .header-style-centered .nav {
    text-align: center;
    padding: 11px 0 15px 0;
    margin: 0;
    }

    .header-style-centered .nav > div {
    display: inline-block;
    float: none !important;
    }

    .header-style-bottom .nav > div > ul li ul,
    .header-style-centered .nav > div > ul li ul {
    top: 45px;
    text-align: left;
    }

    .header-style-centered .nav-cart-products {
    top: 14px;
    }

    /*Style Bottom*/

    .nav-bottom {
    background: #fff;
    border-bottom: 1px dotted #ddd;
    }

    .header-style-bottom .logo {
    display: block;
    }

    .header-style-bottom .nav-bottom {
    border-top: 1px dotted #ddd;
    }

    .header-style-bottom .nav-cart-products {
    top: 0px;
    padding-top: 35px;
    }

    .header-style-centered #header-wrap,
    .header-style-bottom #header-wrap {
    border: 0;
    }

    .header-style-bottom .nav {
    margin: 5px 0 8px 0 !important;
    }

    /*Revslider*/

    .revslider-wrap {
    margin-bottom: 30px;
    }

  4. David, tu intención es buena pero la explicación es un poco confusa.

    A ver, hay que crear la imágen y llamarla “favicon.ico”, se sube por algún programa de FTP (El que no sepa que es FTP que directamente ni lo intente porque lo que no puedo entener es como cojones ha tenido huevos a configurar un WordPress). Luego hace como bien dice David, te vas al “Escritorio”, a “Apariencia” y haces click en “Editar”, Editas el fichero que se llama “cabecera” o “header.php” y verás un montón de código, bueno, pues hay que pegar el código que hace el llamado a la ubicación del favicon, insertándolo justo encima de donde veais que pone “”.
    El código a pegar es este: <link rel="shortcut icon" href="/favicon.ico” />

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>