¿Como poner un favicon En mi Pagina web En HTML?

¿Qué es un Favicon?

Es el pequeño y diminuto logotipo de una página web, talvez con ese concepto no quedes claro, observa la imagen principal ¿todavía no logras entender? te dejare una imagen más clara y didáctica.

Observa lo que encierra los cuadros rojos, ¿Vistes que son logos de la página web? Excelente ahora que ya sabes ya podemos hablar claramente.

Bueno, al crear una página WEB en HTML, tenemos la libertad de ingresar el favicom o logotipo que deseemos, pero hay una serie de pasos que hay que realizar para que dicho logo quede como un favicom, Acompáñame en esta aventura y juntos aprenderemos. 

PRIMER PASO UNA IMAGEN

Primeramente, ocupamos la imagen que representará nuestra página web, el cual en mi caso será la que muestro en la imagen de apoyo.

Sugiero que la imagen sea simple, fácil de reconocer y visualizar, recomiendo crear una personal en su programa de diseño de preferencia.

SEGUNDO PASO

Luego iremos a una página web que automáticamente transforma las imágenes en logotipos o mejor FAVICOM

Las dimensiones que ocupamos son las 16*16px-PNG. Son las ideales para nuestra página.

La página de FAVICOMS QUE VAMOS A UTILIZAR ES GENERADOR DE FAVICONS, solamente toca el link azul que se llama "GENERADOR DE FAVICONS" el cual lleva directamente a la web que necesitamos.

Como puedes ver la interfaz de la web es intuitiva y simple de entender.

TERCER PASO

En este paso solo arrastraremos a la imagen a la sección que se llama "Arrastra y suelta tu imagen aquí", no te preocupes si te parece complejo acá abajo te dejo un video.

Recordando poner el video en 720p que mejora la resolución.

CUARTO PASO - SUPER IMPORTANTE

Te felicito por llegar hasta acá, bueno mi amig@ estamos en la recta final la cual es la más importante,

vamos a colocar el favicon ya creado en nuestra página web.

EL FAVICON DEBE ESTAR EN LA MISMA CARPETA DE NUESTRO INDEX O MEJOR DICHO DONDE SE GUARDA NUESTRA PAGINA WEB.

Observa guardo todo en mi carpeta llamada "Blogger"

ahí mismo esta mi favicon.

TE SUGIER HACER ZOOM EN LA IMAGEN

Bueno Iremos a nuestro HTML para agregar.

COPIAR EL CODIGO QUE NOS BRINDA LA WEB

Observa, como te mencione vamos a utilizar el favicon generado de 16*16-PNG y copiaremos el código que dice 16*16 el cual es:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Y me preguntaras para qué es esta línea de código, al copiar esto la pegaremos en nuestro HTML en HEAD

ACA TE DEJO UNA IMAGEN DE APOYO

TE SUGIERO HACER ZOOM.

Observa solamente copie y pegue el código.

ES SENCILLO, PERO LES COMPARTIRE UN VIDEO PARA MÁS APOYO MI PRIORIDAD ES QUE APRENDAS.

QUINTO PASO- EL FINAL

VERFICAR EL NOMBRE DE NUESTRA IMAGEN EN CODIGO DE HTML.

EN UN VIDEO BIEN EXPLICADO DE MI PARTE PARA MOSTRAR TODO EL PROCESO

SI HICISTE TODO AL PIE DE LA LETRA TANTO DE LA INFORMACION Y VIDEO HS LOGRADO UN FAVICON FELICIDADES. SIGUEME EN MI BLOGGER ESTO ES :

INFORMATICA EN UN CLICK