ARTEgami » favicon http://artegami.com Diseño Grafico, Diseño Web, Multimedia, SEO, Freelance, Blog Sat, 11 Feb 2012 19:11:12 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Cómo insertar un favicon en tu web http://artegami.com/como-insertar-un-favicon-en-tu-web/ http://artegami.com/como-insertar-un-favicon-en-tu-web/#comments Tue, 30 Nov 2010 03:04:10 +0000 ArteGami http://artegami.com/?p=6587 Área de trabajo: Diseño Web.
Nivel de conocimiento: Principiante a Intermedio.
Software a utilizar: Filezilla o cualquier otro cliente para FTP. (Opcional)

Un Favicon es el ícono que sale en la barra de direcciones del navegador y que identifica a cada web. Los más grandes sitios tiene un ícono que los identifican y que dan un impacto visual tan grande que donde sea que lo veamos sabremos de qué es.

Tú también puedes poner uno en tu web y es muy simple de hacer, pero bastante útil para lograr más identidad. Esto lo puedes usar en una web o blog.

1. Entra en http://favigen.com/ y crea un Favicon subiendo una imagen de logo de tu web (que debe ser muy simple porque el Favicon es pequeño) y escogiendo el tamaño que tendrá. Te recomiendo 32×32 pixeles. Haz click derecho sobre el ícono, y luego en “Guardar como” y deja en tu PC.

1 Cómo insertar un favicon en tu web

2. Sube el Favicon en el directorio root de tu web. Dependiendo del servidor que tengas se puede llamar “Public_HTML” o “root”. En mi caso es el primero. Sube ahí el favicon.ico, que debe llamar así siempre. Si no tiene ese nombre, ponselo. Así se verá en el directorio:

2 Cómo insertar un favicon en tu web

3. Abre tu archivo donde comienza el código HTML y busca donde comienza y termina los tags y . Si estás trabajando en WordPress, en la plantilla busca “hearder.php” y ahí lo conseguirás. En una web normal en HTML, estará al inicio. Pon el siguiente código dentro de esos tags, al principio o al final, como quieras, siempre que esté dentro de <head> y </head>.

<link rel=”shortcut icon” href=”favicon.ico”>

Si estás usando un ícono animado, que sea .gif, entonces el código que debes usar es:

<link rel=”shortcut icon” href=”favicon.ico”>

<link rel=”icon” href=”NOMBRE-DEL-ICONO-ANIMADO.gif” type=”image/gif”>

Recuerda sustituir el nombre del ícono animado donde están las mayúsculas.

Quedará así:

3 Cómo insertar un favicon en tu web

4. Guarda y cierra el archivo. Sube al servidor nuevamente. Y mira los cambios. Así ha quedado el mío y mira como se ve junto al de Gmail y el de Google:

4 Cómo insertar un favicon en tu web

Listo. Más fácil imposible.

Más tutoriales en ARTEgami Premium

]]> http://artegami.com/como-insertar-un-favicon-en-tu-web/feed/ 3 Crea tu favicon utilizando MS Saint http://artegami.com/crea-tu-favicon-utilizando-ms-saint/ http://artegami.com/crea-tu-favicon-utilizando-ms-saint/#comments Mon, 10 Dec 2007 06:02:00 +0000 ArteGami http://artegami.com/2007/12/10/crea-tu-favicon-utilizando-ms-saint/ fc Crea tu favicon utilizando MS Saint

El favicon es un de los elementos principales que caracterizan un sitio web, este iconito puede hacer que fácilmente nos reconozcan dentro de los favoritos de un navegador. Gracias a un comentario de Terrence, me he enterado de un tutorial que enseña como hacer tu propio favicon utilizando MS Saint, una herramienta gratuita que viene instalada en cualquier computador con Windows. El tutorial es bastante sencillo de seguir y espero que a muchos les sirva.

]]> http://artegami.com/crea-tu-favicon-utilizando-ms-saint/feed/ 0