Dos prácticos generadores de favicones

10, Agosto, 2007

Para la realización de favicones, en XIBERNETICOS nos proporcina dos interesantes recursos: Faviconsfor.us y Flavicon.com son generadores de favicones online para nuestro sitio web. Como todo servicio de este tipo, son muy sencillos de utilizar, solo debemos subir desde nuestro ordenador una imagen previamente diseñada en 16×16 o 32×32.

Los dos enlaces ha sido sacados de cssjuice, que han realizado una lista de 20 generadores online, algunos de ellos son muy conocidos, pero aquí tienes el enlace, por si los desconoces.

• Para más información sobre el tema: Utilidades para crear un favicon


Utilidades para crear un favicon

10, Julio, 2007

En la UNION DE BLOGGERS HISPANOS hacen un repaso sobre la creación y diseño de un favicon, es esa imagen chiquita que se ve al lado de la url de una web en la caja de direcciones de tu navegador. Es un signo distintivo de la web que estás visitando, puede ser un logo diminuto o una letra, o incluso un dibujo original.

En internet tenemos un montón de herramientas en línea que te pueden ayudar a hacerte uno, o a inspirarte en algún modelo de tantos que hay, a continuación os exponemos unas cuantas:

Manuales

  • ¿Cómo hacer un favicon con photoshop?: En este sencillo manual su autora nos explica cómo hacer un favicon con el photoshop e incluso el plugin que necesitas para convertir los archivos en .ico (Está en inglés)

Ejemplos para que te inspires

  • Smashing Magazine: Pone a tu disposición una serie de favicones de varias webs para que te sirvan de inspiración a la hora de realizar el tuyo.

Generadores en línea de favicon

  • Favicon from pics: Este te genera el archivo .ico que necesitas subir para que aparezca tu imagen de favicon, súbelo desde tu propio pc.
  • DinamicDrive: Entre sus muchas herramientas encontramos un generador en línea de favicon con todos los pasos que hay que seguir y el código que tienes que poner entre las etiquetas <head></head> de tu blog para que se visualice.
  • DeGraeve.com: Pone a tu disposición tanto un editor para que fabriques tu propio favicon o la posibilidad de subir cualquier imagen y convertirla en .ico para que puedas subirla a tu servidor.
  • Favicongenerator: Otro generador de archivos .ico que convierten cualquier imagen de 100×100 en un favicon.

Edición de favicon en línea

  • DeGraeve.com: Aparte de ser un generador de archivos .ico también sirve para crear en línea tus propios favicones.
  • Javascript Favicon generator: Diseña tu favicon y finalmente obtiene la url directa a la imagen, ideal para los bloggers que publican en Blogger u otros scripts de hosting remoto.

Alojamiento para favicones:

  • MyFavatar: Aloja gratuítamente tus favicones o favatars

Plugins y Software

  • Telegraphics.com: Selección de plugins y programas gratuítos para pc relacionados con los favicon.

Tutorial para hacer un favicon:

  1. El primer paso es tener una imagen, para ello podemos hacer lo siguiente, o bien realizar la imagen en nuestro editor, o bien utilizar directamente uno de los editores para favicon en línea que os expusimos antes. La imagen basta con que tenga un tamaño de 16×16 px, hay algunos generadores que las aceptan más grandes pero ese es un tamaño óptimo.
  2. Si no habéis utilizado un editor en línea para vuestro favicon, ahora deberéis convertir esa imagen en un archivo .ico (los editores en línea que expusimos ya los realizan automáticamente) que es el formato de imagen que se puede poner de favicon. Para generar un archivo .ico podéis utilizar los diferentes generadores que también expusimos o el software del que dispongáis para hacerlo.
  3. Una vez generado y descargado vuestro favicon, ahora tendréis que subirlo al directorio de vuestra web en el servidor. Si no disponéis de él también hay varias alternativas como MyFavatar o Javascript Favicon Generator (las letras asiáticas son el enlace a la imagen).
  4. Cuando tu favicon se encuentre en el servidor, simplemente tienes que escribir el código que lo llama entre las etiquetas <head></head> del código de tu blog.

<link rel="shortcut icon" href="/favicon.ico" />

Siendo /favicon.ico la ruta a tu favicon, si por ejemplo tu favicon está en otro alojamiento distinto, pon la ruta completa a la imagen.

<link rel=”shortcut icon” href=”http://www.alojamientodetufavicon.com/favicon.ico” />

256pixels, para crear tus favicones

8, Julio, 2007

logoEn XYBERNETICOS, nos habla sobre 256pixels, otro sitio donde podemos crear nuestros favicones. Como todas las herramientas online creadas para este fin, es fácil de utilizar, solo es necesario darle un poquito de creatividad a nuestro pequeño proyecto de la creación de nuestro favicon. Si lo que más te cuesta es buscar inspiración, puedes dar un vistazo a algunos bellos favicones recopilados en ZonaMasters.


Favicon.cc, crea y organiza tus iconos web

3, Julio, 2007

Jordi de BITELIA comenta sobre Favicon.cc que nos ofrece un sencillo interfaz desde el que crear desde el mismo navegador nuestros favicons, esos iconos que aparecen al lado del título de las páginas en las pestañas y barra de direcciones de la mayoría de los navegadores y que sirven como distintivo característico de un sitio.

Puedes utilizar fondo transparente y la elección de colores, si nos registramos en el sitio podremos guardar los iconos que creemos y compartirlos con otros usuarios mediante una licencia Creative Commons. Se puede navegar por todos iconos guardados mediante una nube de etiquetas.

El resultado de nuestras creaciones serán archivos ICO listos para usar en nuestros proyectos con un tamaño de 16×16 pixels y una profundidad de color de 32bits.


Favicons gratis

13, Junio, 2007

Tamara en KABYTES, nos muestra dos recursos para los favicons:

  • MpP Favicon Gallery se trata de no solo una simple galería de los favicons más reconocidos, sino que también (y como habran visto en la barra de direcciones) permite hacer sus propios Favs de una manera muy sencilla. La galería tiene un pequeño resumen de cada Fav en particular:
  • Y en el Favicon Generator simplemente tenemos que subir la imagen que queremos que aparezca como Fav y listo, nos aparece un archivo para descargar y la demo del resultado. También se pueden hacer animados como un extra.

Favicon online

12, Junio, 2007

En un post de neburX en PIXELOVERS, comentan que en internet disponemos de una enorme cantidad de herramientas online que a los desarrolladores nos ahorran una importante cantidad de tiempo.Para diseñar un favicon que se muestre en la barra de direcciones del navegador, en las pestañas o en los lectores de feeds entre otros, tenemos la opción de utilizar algún software o extensión para Photoshop o recurrir a alguna herramienta online.

Una de las que recomienda es la de DinamycDrive.com. Su funcionamiento es sencillo, diseñamos nuestro icono en Photoshop u otro programa de edición gráfica, lo guardamos como gif , jpg, png o bmp y desde esta web realizamos la conversión de manera inmediata, entregándonos el archivo para su descarga. Listo.

Recuerda que para añadir un favicon a tu web simplemente tienes que añadir la siguiente línea de código entre las etiquetas <head></head> y apuntar a la ruta donde has guardado el archivo favicon.ico

<link rel="shortcut icon" href="/favicon.ico" />


Galería del favicon

9, Junio, 2007

En BLOG VECINDAD… nos da un enlace a una galería de los famosos “iconitos” que vemos en las direcciones del navegador. los tenemos en MpP Favicon gallery que puede ir creciendo dependiendo de los favicons que se manden.


Inspirarse en los favicons más creativo

29, Marzo, 2007

Los de SMASHINGMAGAZINE, han preparado una selección de 50 favicons notable que puedes inspirarse. La muestra te puede darte más ideas para el diseño e inspirarte en la creación del favicon.

Favicons, es un mini gráfico para una Web en particular, se puede exhibir en la barra de la dirección, al lado del nombre del sitio en listas de bookmarks, y al lado del título de la página en un interfaz del documento. Eso propicia ser reconocido inmediatamente.

favocon en el navegador

Por cierto si no tienes ni idea de como realizarlos, prueba con este enlace, para crea tu favicon desde internet aquí


Herramientas para realizar favicons

6, Febrero, 2007

Favicon2dots, favicons en 3D

6, Febrero, 2007

logoFavicon2dots es un servicio que permite ver a los favicons de forma 3D. Cada imagen generada permite visualizar cada pixel que forma al icono y su pertinente color. Como por ejemplo:

http://h1.ripway.com/Ghostlove/duckicon.ico

207289a1507f1f2cf6b95f34ecd3e6c5da0

Visto en: Planet Webdev


Favicon

22, Enero, 2007

¿Qué es un favicono? Término reducido de la palabra inglesa Favorites icon, también conocido como icono de página, es un icono asociado a una página web concreta. Un diseñador web puede crear este icono y muchos navegadores gráficos pueden usarlos. Los navegadores que permiten esta función suelen mostrar el icono junto a la barra de direcciones, al lado del nombre de la página web en la lista de favoritos y en los títulos de las páginas.

muestra de favicon

Crear la imagen. Para crear la imagen del favicono y que ésta aparezca correctamente en tu blog, debe cumplir las siguientes características:

Dimensiones: 16×16 px
Color: 4 bits
Formato: .ico

Implementarla en nuestro blog. Después de haber subido la imagen a un servidor de imágenes gratuito debemos añadir entre las etiquetas “head” y “/head” de nuestro documento Html o plantilla el siguiente código:

<br /><link rel=”shortcut icon” href=”dirección del icono”><br />

Visto en: Blog Hispano

Más información: Favicon.net


“Favicon”, el dibujo en las direcciones url

12, Enero, 2007

“Favicon”, es el nombre que reciben los iconos gráficos que aparecen junto a la dirección url en el navegador; algunos son simplemente corporativos, pero otros derrochan creatividad e imaginación

favicon.PNG

Muchas páginas web muestran, a la izquierda de su nombre, un pequeño icono en la barra de direcciones del navegador, en la pestaña y en la lista de favoritos. Ese logo, que representa la página de una manera visual, se llama ‘favicon’, contracción de ‘favorites icon’.

favicon

El primer navegador en utilizar el icono de favoritos fue Internet Explorer. Para desplegar la imagen, el diseñador podía subir un archivo llamado ‘favicon.ico’ al directorio ‘root’ del servidor donde estaba alojada la página web y el icono aparecería automáticamente cuando el usuario lo añadiera a su página de favoritos. Indirectamente, este sistema indicaba al webmaster cuántas personas habían añadido su página como favorito, contando las veces que el icono había sido descargado.

Pero el invento fue criticado por algunos como un atentado contra la privacidad de los usuarios. Finalmente, el conflicto se disolvió cuando el propio Explorer, junto con otros navegadores, decidieron integrar el incono de favoritos en la barra de direcciones del navegador.

Hoy día, se emplea el lenguaje HTML para colocar un ‘favicon’, añadiendo el enlace correspondiente en la cabecera de cada página, y se pueden usar otros tipos de imagen (.GIF, .PNG), incluso pequeñas animaciones.

Crear un ‘favicon’.favicon

Hay dos maneras de crear un ‘favicon’ para una página web. El camino largo es crear una imagen de 16×16 pixels y 256 colores o menos. Aunque casi todos los navegadores modernos saben renderizar (traducir en imágenes) un ‘favicon’, no todos los monitores tienen una resolución superior a 256 colores. Si se baja la resolución al estándar de la web se tiene la seguridad de que todos los lectores ven lo que el webmaster quiere que vean. Una vez se ha obtenido la imagen deseada, ésta se guarda con una extensión válida (.BMP, .JPG, .PNG o .GIF) y se convierte a .ico con la ayuda de un software de edición especializado. La Red ofrece múltiples opciones, algunas de ellas gratuitas como las que hay en esta lista.

Una vez se tiene el icono en la extensión y el nombre apropiados (’favicon.ico’), se sube al servidor con la ayuda de un sistema de carga de archivos, como los que se utilizan en las plataformas de weblogs para subir imágenes, o un programa FTP. La idea es subirlo al mismo directorio donde se tiene la pagina web.

El camino corto es usar uno de los muchos servicios de creación de iconos online, como dynamic drive. Basta con escoger una imagen guardada en el disco duro del ordenador (del tamaño que sea) y dejar que el programa haga lo demás. El mismo devolverá la imagen reducida y convertida al formato apropiado, lista para subirla al servidor.

Creo que también se pueden crear favicons con Photoshop: Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop