¿Qué es un favicon? ¿como se hace?

¿Qué es un favicon? ¿como se hace?

Es un icono, es decir, una pequeña imagen, que aparece enalgunos navegadores junto a la dirección de una página web. En Explorer 5 osuperior tendrás que añadir primero la página a favoritos) en firefox actualmente tiene menos dificultades.

El funcionamiento de los "faviconos" no resulta siempre deltodo predecible, ya que se comportan de manera diferente con cada navegador, pero esto se está solucionando con el tiempo y las nuevas generaciones de utilidades, intentare hacerlo de la manera los más simple posible por que en lo simple hay menos posibilidad de error.

¿Que necesito?

  1. Un editor de imágenes que guarde en formato .ico. un .ico no es una imagen
    cualquiera con la extensión cambiada
    . Tienes que guardar la imagen
    con formato .ico. Hay muchos programas que lo hacen, y hay utilidades online como chuano.net ó genfavicon.com .

  2. Un editor de páginas web, es decir, un editor de texto
    normal y corriente. Hay decenas de ellos que son gratuitos

  3. Un cliente ftp para subir el icono a tu espacio web. El icono lo subes a la
    web exactamente igual que el resto de los archivos que forman tu web.

4. Por supuesto, un navegador que soporte faviconos (IE5 o superior, Mozilla
0.96 o superior, Netscape 6.2 o superior, para ver el resultado de tu trabajo.

¿Como se hace?


1) Crear el icono

El icono debe tener las
siguientes características:

  • Dimensiones 16 píxeles x 16 píxeles;

  • 16 colores (4 bits);

  • Formato ICO,
    ningún otro. Aquí tienes utilidades online
    para generarlo.


    chuano.net
    ó genfavicon.com

2) Subir el .ico al servidor.

Por supuesto debe ser un archivo .ico y con dicha
extensión.

Debes ser conciente de la url donde lo colocas por que la
tendrás que insertar en el siguiente código.

3) Insertar el código

El código debe estar entre <HEAD>
y </HEAD>
del HTML de las páginas en donde quieres que se vea el icono.


<link rel="shortcut icon" href="http://www.tudominio.com/tufavicon.ico">

O si el icono esta alojado en la raiz

de la página donde quieres mostrarlo puedes usar simplemente


<link
rel="shortcut icon" href="tufavicon.ico">

Nota. Primero sube la imagen después prueba el funcionamiento insertando el código en una página y si funciona correctamente, adelante a ponerlos hasta en la sopa.

YoHagoWeb, el kiosco de las chapuzas para webmasters principiantes


Imprimir

4 comentarios:

mistertrufa dijo...

Muy bien pero en el caso de un foro phpBB o de un blog de wordpress donde hay que ponerlo en que documento. En el css el index??? Para una web html esta claro pero se me complica con las aplicaciones en php...
Me podrias responder esto?

Admin-Santiago dijo...

mistertrufa dijo...
Muy bien pero en el caso de un foro phpBB o de un blog de wordpress donde hay que ponerlo en que documento. En el css el index??? Para una web html esta claro pero se me complica con las aplicaciones en php...
Me podrias responder esto?


En phpbb tienes que poner el código en el oberal_header de cada plantilla
En wordpress si la plantilla tiene favicon solo tienes que sobreescribir la imagen, de lo contrario pones el código en header.php

mistertrufa dijo...

Ey primo cuentame como haces para poner HTML en las entradas....

Juan Santiago Ruetter dijo...



mistertrufa
dijo...

Ey primo cuentame como haces para poner HTML en las
entradas....



Pulsando aquí tienes la respuesta.

Twitter de Wordpress España