Como coger el favicon de otra web

El favicon es el icono que vemos en las pestañas de nuestro navegador cuando accedemos a cualquier web. Normalmente y si se ha personalizado suele tener algún dibujito relacionado con la página, o simplemente que es “gracioso” como el que tenemos en esta web.

Si quieres obtener o extraer la imágen del favicon de otra web lo puedes hacer con la siguiente URL que nos facilita Google:

http://www.google.com/s2/favicons?domain=NOMBREDOMinio

Donde sustituiríamos el nombre del dominio por el que queremos.

Ejemplo:

http://www.google.com/s2/favicons?domain=www.blogger.com
http://www.google.com/s2/favicons?domain=wikipedia.org
http://www.google.com/s2/favicons?domain=youtube.com
http://www.google.com/s2/favicons?domain=twitter.com
http://www.google.com/s2/favicons?domain=www.facebook.com
http://www.google.com/s2/favicons?domain=flickr.com
http://www.google.com/s2/favicons?domain=www.mozilla.org

Como poner un favicon en un wordpress, oscomerce, etc

wordpress logo logotipo con mantenimiento

Si quieres poner un favicon en una página web es muy sencillo. Una vez que tienes tu archivo .ico (si no siempre puedes fabricarlo -> Crear un favicon), simplemente deberás de subir el archivo, al que llamaremos favicon.ico, a tu directorio raiz, donde tengas alojada la página.

Una vez subido tu archivo favicon.ico, deberás incluir estas dos líneas entre las etiquetas <head> </head>, es decir en la cabecera de la página. Si estás usando WordPress este archivo suele ser el header.php dentro de nuestra carpeta de temas. En OsComerce por ejemplo iría en el archivo index.php de nuestra carpeta raiz.

Estas son las líneas a incluir:

<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

Como crear un archivo .ico con Photoshop

Logotipo de PhotoShop o icono para logo

Si necesitas crear archivos .ico, por ejemplo para crear un favicon y pornerlo en WordPress, y tienes Photoshop, lo puedes hacer de manera muy fácil.

Simplemente te tienes que descargar el plugin para Photoshop (versión 64-bits o 32-bits, según tu ordenador y Photoshop y MAC o Windows) y seguir estos pasos:

  1. 64-bit Windows (Vista/Windows 7):
    • Cierra Photoshop;
    • Pon el plugin en C:\Program Files (x86)\Adobe\Photoshop CS\Plug-Ins\File Formats.
    • Si tienes un sistema Windows 64-bits y estás usuando Photoshop CS4 o superior, descarga la versión de 64-bit y ponla en C:\Program Files\Adobe\Adobe Photoshop CS4 (64 Bit)\Plug-ins\File Formats.
    • donde poner el plugin de formato ico en photoshop
  2. Vuélvelo a abrir y ya lo tendrás listo, al darle a guardar como, podrás seleccionar en la lista de desplegables el formato de icono .ico. !sólo para las imágenes de 16 pixeles X 16 pixeles!

Seleccionar formato .ico en photoshop

Con esto ya podrás guardar tus imágenes en .ico.

Como poner un favicon en WordPress o en una página web HTML

wordpress logo logotipo con mantenimiento

¿Que es un favicon? Un favicon es el icono que sale en los navegadores a la izquierda y que también estará cuando añadamos la página en nuestros favoritos.

Si lo que quieres es saber como ponerlo en WordPress o en otro tipo de páginas puedes utilizar la siguiente guia:

1.- Toma la imagen que quieres poner como favicon, y transfórmala en una imagen de 16 pixeles X 16 pixeles.

2.- Guardala en formato .ICO- Si tienes Photoshop, puedes seguir esta guia ->Guardar formato .ico en Photoshop

3.- Súbela a tu hosting a través del FTP y anota la ruta y el nombre donde tienes el archivo.

4.- Edita el archivo header.php e incluye la siguiente línea -> <link rel=”shortcut icon” href=”favicon.ico” /> donde favicon.ico es la ruta y el nombre donde tienes el archivo .ico.

5.- Guarda los cambios y ya lo tendrás puesto.