Blog @pedropablo » Diseño http://blog.pdropablo.net bla, bla, blaaaah... Thu, 31 Mar 2011 20:58:42 +0000 en hourly 1 http://wordpress.org/?v=3.3 Crear y utilizar Favicon para tu web http://blog.pdropablo.net/2010/05/crear-y-utilizar-favicon-para-tu-web.html http://blog.pdropablo.net/2010/05/crear-y-utilizar-favicon-para-tu-web.html#comments Mon, 24 May 2010 20:04:42 +0000 pedropablo http://blog.pdropablo.net/?p=225 Favicon, del inglés favorites icon (icono de favoritos), también conocido como icono de página, es aquella pequeña imagen que aparece en algunos navegadores junto a la dirección de una página web. Los navegadores gráficos suelen mostrar el favicon de la página visitada, si ésta lo posee, en la barra de direcciones y en el encabezado de la pestaña correspondiente.

Ejemplo:


Vista del favicon de mi blog en la barra de dirección, en favoritos, y en la pestaña.



Características

  • Dimensiones 16×16px
  • 16 colores (4 bits)
  • Formato .ico

En algunos navegadores puedes usar iconos de mayor tamaño y más colores, también otros formatos como .gif o .png, pero si quieres que tu icono funcione correctamente en cualquier navegador, utiliza el tamaño de 16×16px con 16 colores y en formato .ico.


Como hacer uno para tu web
Hay varias páginas web que te generan ya el favicon en formato .ico, y una de ellas, que fue la que yo utilizé es: http://www.favicon.cc/

Puedes hacerlo de dos formas:

  1. Tú mismo puedes dibujarte el favicon a tu gusto y te va mostrando como quedaría en la barra de direcciones y pestaña.


    Vista de como va quedando el favicon dibujado.

  2. La otra opción es subir una imagen y te generará el favicon, puedes dejar que ajuste automáticamente el favicon o que sea la misma imagen reducida a 16×16px de tamaño.


    Formulario de la imagen que subirás para generar el favicon.

Generadores de Favicon online:


Integrar en nuestra web
Subimos el favicon al servidor y copiamos la ruta, por ejemplo: http://blog.pdropablo.net/favicon.ico

Modificar el HTML y ponemos el siguiente código dentro de la etiquetas <head> y </head>:

<link rel="shortcut icon" href="http://blog.pdropablo.net/favicon.ico" />

Recordad cambiar mi ruta de ejemplo por la vuestra, y recomiendo que siempre salga la ruta de la web: http://www.tuweb.com/favicon.ico, así no tendrás problema de que te desaparezca el favicon en alguna página de tu web.


Y listo, ya tendríamos nuestro favicon instalado en nuestra página web :D

]]> http://blog.pdropablo.net/2010/05/crear-y-utilizar-favicon-para-tu-web.html/feed 2 Design 2010 http://blog.pdropablo.net/2010/01/design-2010.html http://blog.pdropablo.net/2010/01/design-2010.html#comments Mon, 25 Jan 2010 14:47:01 +0000 pedropablo http://blog.pdropablo.net/?p=132 Estrenando diseño nuevo para este año 2010 !!!

Me encanta Design Disease, sus diseños me atraen muchísimo, sino basta ver este último diseño, es el que yo utilizo actualmente pero como siempre dándole todo sus créditos y haciendo mis pequeñas modificaciones a mi gusto, todo gracias a que da licencia para moder hacerlo.

En realidad el theme no viene así, pues como dije me gusta modificarlo a mí gusto, aquí el original.

Cambios..

  • Menu, en la cabecera de la web, grande que se vea bien, con las mismas secciones.
  • Sidebar, una pequeña introducción de que va el blog, redes sociales dónde encontrarme, últimos comentarios, tags, y las páginas web que suelo mirar.
  • Footer, pues esto es lo más que me gusta, ahí he puesto los últimos tweets, los enlaces que guardo en mi del.icio.us, y las últimas imágenes que pongo en mi flickr, pero me gusta todo el diseño en general!!! jeje
  • Post, cuando se lee un post en los comentarios he puesto de orden de primero a último, ordenado con número y la opción de responder a un comentario, esta última función no hace que al contestar se ponga debajo del comentario que respondes, solo marca el nombre del usuario, así no has de escribirlo.

Y poca cosa más.. espero que sea de vuestro agrado :D

]]> http://blog.pdropablo.net/2010/01/design-2010.html/feed 3