Favicon para tu web o blog en Photoshop (plugin gratuito) y como insertarlo

webmaster.gifComo sabéis, un favicon es la imagen pequeña (16×16 pix) que acompaña al nombre de una web en la barra de direcciones.

A veces hay algo de lío a la hora de hacerlos de una forma rápida y que no falle (no se puede a una imagen por ejemplo jpg, darle la extensión “.ico” y que funcione).

Hay varias maneras de hacerlo, mediante el uso de programas específicos, un editor de texto o HTML, etc etc.

Pero esta entrada va de como hacerlo con (pull)un plugin gratuito(/pull) en Photoshop (válido para Windows y Mac).

Muy fácil,

1 º Descargáis el plugin en esta página (ojo a la versión de photoshop y sistema operativo)

2 º Una vez descomprimido el zip, váis a la carpeta de PS “plugins” – “Adobe Photoshop Only” – “formatos de archivo”, (en Mac, supongo que en Windows es igual) y arrastráis allí el plugin (solo el plugin, no la carpeta entera) y cerráis Photoshop para volver a abrirlo de nuevo.


3 º Generáis una imagen en Photoshop de 16 x 16 píxeles que puede ser la de vuestro logo en pequeño, importante para que funcione el “guardar como “.ico”, váis a “Menú Imagen – Modo” y pinchar en “color RGB” y “8 bits”.

4 º Le dáis a “Guardar como” y elegís la extensión “ICO (Windows icon)”, y despúes de darle a “guardar” elegís la opción “Standard ICO (use for Favicon.ico). Siempre llamarlo favicon.

(Leed ante la duda el archivo “readme.html” del plugin si algo va mal)
Bien , ya tenéis vuestro flamante favicon.ico, ¿y ahora?. Vale, vamos a ponerlo en la web.

Colocar el favicon en vuestra web / blog.

Subís el archivo creado que será “favicon.ico” a vuestro sitio, por ejemplo a la carpeta ráiz.

Abrís con un editor de texto o html o desde el editor de la plantilla de vuestro blog el archivo de la página de inicio (index.php, html, htm etc).

Insertáis entre las etiquetas y la siguiente línea ; Guardáis los cambios y listo !Vaciáis la caché del navegador y recargáis la página para ver los cambios.

Espero que este espontáneo “pseudo tutorial” os resulte útil ;D.

Otro tutorial en Daboweb.
Lectura recomendada; Favicon.net.

dabo

Work: @apache_ctl | Edu: Hacker (and free) Culture & @debianhackers, @daboweb | Life: @verticalplaneta | ¿Hacktivista? (legítima defensa) GPG Key 0xBC695F37

dabo escribió 1250 entradas

Navegación de la entrada


Comentarios

  • Trebol

    Una preguntita aunque no sea el foro daboweb ;)

    Los pasos que comentas con el fothosoft sirve para el GIMP, porque tengo interés en hacerme uno para el blog y no encuentro camino…. :)

    Buen auto-tuto XD XD

    Saludos.

  • Gepetto

    Y los que tengan la web o el blog en un alojamiento gratuito que no permita la subida de archivos .ico, también pueden utilizar un gif normal y corriente (no se vería e IE5/6, pero si en Firefox, Opera, etc…).

  • dabo

    Trebol, dale un vistazo a esto, también hace un tiempo hice uno desde Gimp en Debian mirando este tutorial.

    Pero lo que comenta Gepetto es acertado cien por cien,solo que yo,por una vez -;) no quería dejar fuera a los de Explorer XD.

  • Liamngls

    No me he enterado de nada[1], prefiero este otro manual.

    A lo que comentais de usar un favicon si el alojamiento no te lo permite … hay otra opción, de hecho es la que uso yo en mi blog de blogger, si puedes editar la plantilla puedes incluir una url externa que apunte al favicon ;)

    [1] Es coña .. ;)

  • dabo

    Añadido el link del tuto en Daboweb al post -;) Como se entere quien yo me sé…juas !!

  • Trebol

    Muchas gracias por los tutos, los he estado mirando, me pondré manos a ello a ver que sale. XD ;)

    Saludos.

Comentarios cerrados.