-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfavicon_que_es_y_formas_de_uso.html
154 lines (151 loc) · 11.2 KB
/
favicon_que_es_y_formas_de_uso.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&display=swap" rel="stylesheet">
<link href="../estilos/style.css" rel="stylesheet">
<link href="./estilos/articulo.css" rel="stylesheet">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WFELBG80ZH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WFELBG80ZH');
</script>
<link rel="apple-touch-icon" sizes="180x180" href="./favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon_io/code-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon_io/code-32x32.png">
<title>Rodrigo Juarez 🧑🏻💻</title>
</head>
<body>
<header class="header">
<nav class="header-nav bd-grid">
<div class="header-nav__logo">
<a href="index.html" class="logo">Rodrigo Juarez</a>
</div>
<div class="header-nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="index.html#home" class="nav__link">Home</a>
</li>
<li class="nav__item">
<a href="index.html#about" class="nav__link">Sobre mi</a>
</li>
<li class="nav__item">
<a href="index.html#skills" class="nav__link">Skills</a>
</li>
<li class="nav__item">
<a href="index.html#portfolio" class="nav__link">Portfolio</a>
</li>
<li class="nav__item">
<a href="index.html#contact" class="nav__link">Contacto</a>
</li>
<!-- <li class="nav__item">
<a href="index.html#blog" class="nav__link">Blog</a>
</li> -->
<li class="nav__item">
<a href="index.html#blog" class="nav__link active">Articulos</a>
</li>
</ul>
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-menu'></i>
</div>
</nav>
</header>
<div id="progress-bar"></div>
<main class="l-main">
<section class="article-section">
<!-- Etiquetas para la seccion de articulos -->
<!-- <h2 class="article-title"></h2> -->
<!-- <p class="paragraph"></p> -->
<!-- <figure class="container-image">
<img src="" alt="" class="image" loading="lazy">
</figure> -->
<!-- <h3 class="section-title"></h3> -->
<h2 class="article-title">Favicon, que es y formas de uso</h2>
<p class="paragraph">Cuando accedemos a una página web , algo que seguramente hayas notado es que con el título de nuestra página, viene también acompañado un pequeño icono. Ese icono se lo conoce como “favicon”, y puede que no tenga mucha importancia a simple vista, e incluso que pase un poco desapercibido. Pero en este artículo veremos su importancia</p>
<p class="paragraph">Para comenzar, podemos decir que un favicon son pequeñas imágenes reducidas, generalmente de un tamaño de 16x16 píxeles que aparece en la esquina de la pestaña de una página web y suele ser la marca o logo identificatorio de una empresa o marca.</p>
<h3 class="section-title"></h3>
<figure class="container-image">
<img src="./imagenes/Articulos/Favicon/Favicon_rodrigojuarez.dev.png" alt="Ejemplos de favicon en el website rodrigojuarez.dev" class="image" loading="lazy">
</figure>
<p class="paragraph">La palabra “favicon” tiene como origen dos términos en inglés que son “favorite icon”, que podríamos traducirlo como “icono de favoritos ” y tiene como principal objetivo poder identificar fácilmente al intentar acceder a nuestros sitios webs. Dependerá mucho de los dispositivos a los que accedemos, pero generalmente aparece en las pestañas de los navegadores, en la barra de navegación, en el historial o en los apartados de navegadores y favoritos.</p>
<h3 class="section-title">¿Por qué incluir un favicon en una página web?</h3>
<p class="paragraph">Bueno, lo cierto es que tenemos muchas razones para poder hacerlo. Al ser un símbolo o una identificación de imagen o marca, nos ofrece varias ventajas:</p>
<ul style="list-style:none; margin: 0px 0px 20px 30px; ">
<li>
<p class="paragraph">
<span class="bold">Profesionalidad:</span>
Nos permite reforzar la confianza de los visitantes de nuestra marca y dar valor incluso en los detalles más pequeños. Muy probablemente las personas no conozcan lo que es un favicon, pero se darán cuenta rápidamente en aquellos sitios que no cuenten con ellos.
</p>
</li>
<li>
<p class="paragraph">
<span class="bold">Rapidez de identificación:</span>
Nuestros usuarios o nuestros clientes podrán encontrar nuestra página web, especialmente al acceder a las mismas si uno está trabajando con varias pestañas en simultáneo en el navegador.
</p>
<li>
<p class="paragraph">
<span class="bold">Reforzar la marca:</span>
El buen uso de los favicon genera otro aspecto positivo, y es que pueden desempeñar un papel importante en la toma de decisiones. Tan importante como la creación del logo, resulta la de un favicon apropiado.
</p>
</li>
</ul>
<h3 class="section-title">Formatos y tamaños para nuestros iconos</h3>
<p class="paragraph">Generalmente, al utilizar iconos, podemos utilizar el formato .ico, que es compatible con la mayoría de los navegadores en la actualidad. Sin embargo también es posible usar otros formatos como .jpg, .png, .gif o .svg, con la aclaración de que puede que no sea compatible con algunos navegadores.</p>
<p class="paragraph">Si nos referimos a los tamaños de un favicon, podemos decir que normalmente las medidas son de 16x16 píxeles, aunque también es habitual encontrar otras medidas como 32x32 píxeles, o 48x48 pixeles.</p>
<p class="paragraph">Actualmente tenemos disponibles muchos generadores de favicon, en el cual, a partir de una imagen podemos generar nuestro favicon, y nos generar las etiquetas HTML correspondientes para incluirlo en nuestro código. Por mencionar algunos, contamos con <a style="text-decoration: none; color: #000;" href="https://www.favicon-generator.org/" target="_blank">Favicon-generator</a>, <a style="text-decoration: none; color: #000;" href="https://favicon.io/" target="_blank">favicon.io</a> o <a style="text-decoration: none; color: #000;" href="https://genfavicon.com/es/" target="_blank">Genfavicon</a>.</p>
<h3 class="section-title">Inserción del favicon en la web</h3>
<p class="paragraph">Una vez que tengamos generado nuestro favicon, debemos tener presente que debemos editar el header o la cabecera en nuestro código HTML especificando el tipo de icono y su ruta. Identifica la etiqueta <head> en el código de tu página web e incluir una etiqueta <link> similar a esta:</p>
<figure>
<img src="./imagenes/Articulos/Favicon/Primer_link.png" alt="Agregar en el archivo HTML, los enlaces correspondientes." class="image" loading="lazy">
</figure>
<p class="paragraph">Sumado a este punto, debemos de tener presente que uno de las propiedades que le podemos agregar a la etiqueta link es la de <sizes></sizes></p>
<figure>
<img src="./imagenes/Articulos/Favicon/Segundo_link.png" alt="Agregar en el archivo HTML, los enlaces correspondientes." class="image" loading="lazy">
</figure>
<p class="paragraph">
De esta forma el navegador elegirá la que mejor se ajuste en cada caso. <br>
Espero que este artículo te haya brindado más info sobre los favicons y que también haya sido claro al respecto. <br>
Muchas gracias por leerme.
</p>
</section>
</main>
<footer class="footer section">
<div class="footer__container bd-grid">
<div class="footer__data">
<h2 class="footer__title">RODRIGO JUAREZ</h2>
<p class="footer__text">Espero que hayas disfrutado mi website. Si deseas compartir tu feedback, no dudes en contactarme.</p>
<h2 class="footer__title">
<a href='https://cafecito.app/rodrijuarez' rel='noopener' target='_blank'><img srcset='https://cdn.cafecito.app/imgs/buttons/button_5.png 1x, https://cdn.cafecito.app/imgs/buttons/button_5_2x.png 2x, https://cdn.cafecito.app/imgs/buttons/button_5_3.75x.png 3.75x' src='https://cdn.cafecito.app/imgs/buttons/button_5.png' alt='Invitame un café en cafecito.app' /></a>
</h2>
</div>
<div class="footer__data">
<h2 class="footer__title">EXPLORE</h2>
<ul>
<li><a href="index.html#home" class="footer__link">Home</a></li>
<li><a href="index.html#about" class="footer__link">Sobre mi</a></li>
<li><a href="index.html#skills" class="footer__link">Skills</a></li>
<li><a href="index.html#portfolio" class="footer__link">Portfolio</a></li>
<li><a href="index.html#contact" class="footer__link">Contacto</a></li>
<li><a href="index.html#articles" class="footer__link">Articulos</a></li>
</ul>
</div>
<div class="footer__data">
<h2 class="footer__title">FOLLOW</h2>
<a href="https://www.linkedin.com/in/rodrijuarez/" class="about__social-icon"><i class='bx bxl-linkedin' ></i></a>
<a href="https://github.com/RodriJOk" class="about__social-icon"><i class='bx bxl-github' ></i></a>
<a href="https://www.instagram.com/preguntastech" class="about__social-icon"><i class='bx bxl-instagram' ></i></a>
</div>
</div>
</footer>
<script src="../javascript.js"></script>
</body>
</html>