Tutorial: Como instalar un favicon [Web/Blog] pasos

  • Autor Autor pairox
  • Fecha de inicio Fecha de inicio
pairox

pairox

Gamma
Este tutorial fue inspirado por un amigo que recien inicia en esto del blogging, el me preguntaba sobre como instalar un favicon en su blog, le dije que no era tan dificil que solo habia que seguir un conjunto de pasos, los realizo y pudo tener su favicon finalmente. este tutorial no solo se aplica para blogs wordpress, también es aplicable a blogger o cualquier otro tipo sitio web.

Pero eso no era todo luego de eso me puse a pensar en cuantas personas buscan a diario información sobre como crear e instalar un favicon, sin más que decir he aquí la solución:

Paso 1​

1 - Ir a favicon.cc


Importar la imagen a crear el favicon, puede ser en formato .jpg, bimp, png o .gif (Animada)

Enlace eliminado​



Paso 2​

Enlace eliminado



Paso 3​
Buscar la imagen para crear el favicon en tu pc​
Enlace eliminado


Paso 4
Click en upload para subir la imagen o favicon
Enlace eliminado


Paso 5
Click en Download Favicon (Esto solo aplica para host de pago)
Enlace eliminado



Paso 6
Copiar el archivo descargado "favicon.ico" dentro de la carpeta en el hosting llamada: public_html y listo ya esta instalado!! (esto solo es para blog o web alojadas en hosting propio),
para blogs u otros sitios web no alojado tienen que seguir estos los siguientes pasos...
Enlace eliminado

Paso 7
Para este paso se necesitara registrarte en la pagina, en el paso anterior en vez de a darle click en "Download Favicon" ahora tendras que darle en "Publish under an open license" te pedira registro Join now!, registrate y sigue el siguiente paso..
Enlace eliminado



Paso 8
Luego de registrado te pedira los siguientes datos:
Enlace eliminado


Paso 9
Enlace eliminado
​

Paso 10
Para insertar en su blog o web no alojado tiene que usar este codigo, el cual debera ir entre las etiquetas <body> y </body> de la plantilla:

PHP: 
<link rel="shortcut icon" href="http://dirección copiada" type="image/x-icon">
<link rel="icon" href="http://dirección copiada" type="image/x-icon">

Enlace eliminado


Luego de copiada la ruta de la imagen como se muestra en la imagen de arriba, deberas pegarla para reemplazarla por el ejemplo de la dirección que se ve arriba. quedará asi:

PHP: 
<link rel="shortcut icon" href="http://www.favicon.cc/?action=download_copy&file_id=229196" type="image/x-icon">
<link rel="icon" href="http://www.favicon.cc/?action=download_copy&file_id=229196" type="image/x-icon">


Paso 11
En esta imagen se puede apreciar la instalación del favicon finalizada
Enlace eliminado​



Info:
Tutorial realizado para forobeta por pairox
Licencia: Creative commons (puede ser distribuido sin ningún problema)
Nivel: principiante
 
Excelente, lo estaba buscando 😉
 
Muy buen tutorial, para los que tiene Blogger les recomiendo alojar el favicon en Google Code, lo suben y copian la ruta 🙂
 
buenísimo te pasaste 🙂
 
muy buen tutorial compañero, como alternativa si tienes wordpress o manera de poner la imagen en el directorio de la pagina, solo poner tu favicon.ico, y solo lo reconoce.

Salu2
 
Muy buen tutorial amigo ! Te pasaste
 
muy bueno, gracias!
 
Mucho me sirvió esta lección :alberteinstein: Saludos
 
yo seguí todos los pasos pero no me funciono, y lo tengo en host propio :/

solo hay que seguir esos pasos ?

yo antes de subir el archivo favicon.ico no tenia ninguno con ese nombre para sobreescribir...

tengo que modificar algo mas ?

gracaias
 
Última edición:
Utilidades-Gratis dijo:
yo seguí todos los pasos pero no me funciono, y lo tengo en host propio :/

solo hay que seguir esos pasos ?

yo antes de subir el archivo favicon.ico no tenia ninguno con ese nombre para sobreescribir...

tengo que modificar algo mas ?

gracaias
Hacer clic para expandir...

Hola Utilidades-Gratis no es necesario sobrescribir nada ni modificar solo se sube el archivo favicon.ico en la carpeta public_html, si no sale el favicon puedes probar a borrar las cache de tu navegador e intentar de nuevo.

PD. No existe un archivo llamado favicon.ico en tu hosting ya que no viene por defecto, este archivo se copia y se activa automático.

Saludos,
 
Muy buen aporte! muchas gracias !
 
Ya la conocía, pero bien para quien no lo conocía.
 
Agredeciento siempre el post a nuestro amigo pairox.

Alternativas:

Tambíen puedes cambiar de extensión a una imagen .jpg a una extensión .ico ejemplo:

mifavicon.jpg = mifavicon.ico
16px x 16px

La edición de imagen los puedes hacer con cualquier progra como fireworks, photoshop, hasta el mismo paint.

También puedes poner una imagen como favicon.

Ejemplo:

<link href="http://www.puedeserotroservidor.net/estoesunfavicon.jpg" rel="shortcut icon" type="image/x-icon" />
 
Última edición:
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba