Marketing de Contido

Mellores prácticas para implementar un Favicon para o seu sitio web

Cando foron introducidos orixinalmente, o favicon designou unha imaxe para mostrar cando os usuarios gardan a URL atallo no seu escritorio. Hoxe, o favicon do teu sitio web pode mostrarse nas pestanas do navegador, clientes de correo electrónico, recursos compartidos en redes sociais e resultados de busca.

Un favicon é agora un elemento de marca necesario de cada sitio web, pero moitas veces se pasa por alto... non deberían ser. Os favicons adoitan mostrarse en varios lugares dentro dos navegadores web para axudar aos usuarios a identificar e marcar sitios web. Aquí tes algúns puntos clave sobre os favicons:

  • Pestanas do navegador: Cando os usuarios abren un sitio web nun navegador web, o favicon móstrase na pestana do navegador xunto ao título da páxina. Isto proporciona un identificador visual para a pestana aberta, o que facilita aos usuarios atopar e cambiar entre varias pestanas.
  • Marcadores e favoritos: Cando os usuarios marcan ou gardan un sitio web como favorito, o favicon adoita mostrarse xunto ao nome do sitio web no menú de favoritos ou favoritos. Axuda aos usuarios a identificar e acceder rapidamente aos seus sitios web gardados.
  • Barra de enderezos do navegador: Nalgúns navegadores, cando os usuarios visitan un sitio web, o favicon móstrase na barra de enderezos ou na caixa omnibox do navegador. Isto engade un elemento visual ao URL do sitio web.
  • Resultados da procura: Algúns motores de busca poden mostrar favicons xunto aos resultados da busca, o que axuda aos usuarios a identificar facilmente sitios web nas listas de busca.

Un favicon é unha pequena representación icónica dun sitio web que mellora a experiencia do usuario proporcionando pistas visuais para a identificación do sitio web, os marcadores e a xestión de pestanas nos navegadores web. É un elemento importante do deseño web e da marca.

Tipos de ficheiros de iconas

Orixinalmente, requirían un ICO arquivo, pero evolucionaron con moitas plataformas capaces de mostrar PNG SVG arquivos. Os ficheiros ICO pódense considerar unha compilación de varias imaxes de iconas nun único ficheiro. Cando creas un ficheiro ICO, compilas diferentes imaxes de iconas de varios tamaños e profundidades de cores nun único ficheiro cunha estrutura específica. Así é como funciona un ficheiro ICO:

  1. Varias imaxes de iconas: Un ficheiro ICO normalmente contén varias imaxes de iconas con diferentes dimensións e profundidades de cor. Estas imaxes representan a mesma icona pero están deseñadas para mostrarse en diferentes tamaños sen perder calidade.
  2. Directorio de iconas: Dentro do ficheiro ICO, hai un directorio de iconas que especifica os atributos de cada imaxe de iconas, incluíndo o seu tamaño, profundidade de cor e localización dentro do ficheiro.
  3. Información de cabeceira: O ficheiro ICO tamén inclúe información de cabeceira que proporciona detalles esenciais sobre o ficheiro, como o número de imaxes de iconas almacenadas no ficheiro.
  4. Datos da imaxe: Cada imaxe de icona do ficheiro ICO gárdase como datos de imaxe en bruto sen compresión. Isto permite que as imaxes de iconas individuais sexan accesibles e mostradas rapidamente polo software.
  5. Recuperación de iconas: Cando unha aplicación ou o sistema operativo precisa mostrar unha icona asociada a un ficheiro, cartafol, atallo ou aplicación, pode recuperar a imaxe da icona axeitada do ficheiro ICO en función do tamaño e a profundidade da cor desexados.

ICO

vantaxes:

  • Apoio xeneralizado: ICO é un formato de favicon tradicional moi soportado por varios navegadores web, incluídas as versións antigas. É unha opción segura para garantir a compatibilidade.
  • Varios tamaños e profundidades de cor: Os ficheiros ICO poden conter varias imaxes de iconas de diferentes tamaños e profundidades de cores, o que permite que o favicon se mostre ben en varios contextos.

Desvantaxes:

  • Escalabilidade limitada: as iconas ICO non escalan tan ben como os formatos vectoriais como SVG. Cando se mostran en tamaños non estándar, as iconas ICO poden aparecer pixeladas.

PNG

vantaxes:

  • Compresión sen perdas: os favicons PNG ofrecen compresión sen perdas, o que garante unha alta calidade de imaxe con ficheiros de pequeno tamaño. Isto é especialmente útil para iconas nítidas e detalladas.
  • Transparencia: PNG admite a transparencia alfa, o que permite deseños complexos e semitransparentes que se combinan perfectamente co fondo.
  • Soporte en navegadores modernos: PNG está ben soportado polos navegadores web modernos e ofrece unha boa compatibilidade.

Desvantaxes:

  • Múltiples Arquivos: Para cubrir varios tamaños e resolucións, é posible que necesites proporcionar varios ficheiros PNG en diferentes dimensións, o que pode aumentar o número de solicitudes HTTP.
  • Falta de soporte vectorial: PNG é un formato ráster, polo que non se escala tan ben como os formatos vectoriais como SVG.

SVG

vantaxes:

  • Baseado en vectores: SVG é un formato vectorial, o que significa que pode escalar sen perda de calidade. É ideal para crear iconas nítidas e de alta calidade en calquera tamaño.
  • Pequeno tamaño do ficheiro: Os ficheiros SVG adoitan ser de menor tamaño en comparación cos seus homólogos ráster, o que os fai eficientes para o seu uso na web.
  • Versatilidade: SVG permite deseños complexos e artísticos, incluíndo iconas de varias cores, degradados e formas complexas.
  • Estilo CSS: Os favicons SVG pódense crear facilmente mediante CSS, o que ofrece unha maior flexibilidade de deseño.

Desvantaxes:

  • Compatibilidade do navegador: Aínda que os navegadores modernos admiten favicons SVG, os navegadores máis antigos poden ter unha compatibilidade limitada ou ningunha. É esencial proporcionar formatos alternativos como ICO ou PNG para unha compatibilidade máis ampla.
  • Complexidade: Deseñar iconas SVG pode ser máis complexo, especialmente para aqueles que non estean familiarizados co software de gráficos vectoriais.

A elección do formato de favicon depende dos seus requisitos de deseño e do nivel de compatibilidade que quere acadar. ICO é unha opción segura para unha compatibilidade máis ampla, PNG ofrece calidade e transparencia sen perdas, e SVG é ideal para escalabilidade e deseños complexos, pero require unha coidadosa consideración da compatibilidade do navegador e das alternativas. Usar unha combinación de formatos, como se mostra nos seguintes exemplos, pode garantir a máxima compatibilidade e calidade para o favicon do teu sitio web.

Como crear un ficheiro ICO

É bastante estraño, na miña opinión, que Adobe Illustrator e Photoshop non constrúan ficheiros .ICO por defecto (os complementos están dispoñibles). Non obstante, podes xerar cada un dos diferentes tamaños de imaxes usándoos... e despois crealos mediante calquera dos seguintes métodos:

  • GIMP admite nativamente ficheiros ICO. É unha plataforma gratuíta de código aberto dispoñible para todos os sistemas operativos.
  • ImageMagick é un servizo gratuíto de código aberto que podes cargar no teu PC ou Mac, o que che permite combinar varios ficheiros nun ficheiro ICO. Comando de exemplo:
convert image1.png image2.png image3.png favicon.ico
  • Tamén hai ferramentas en liña que poden axudarche a crear un ficheiro .ICO, pero quererás escoller coidadosamente. Moitos cambian o tamaño dun único ficheiro de imaxe cargado e comprimen cada un mal. Favicon.io é un sitio en liña gratuíto que che permite cargar e construír o teu ficheiro ICO. Use sempre o maior tamaño de ficheiro e resolución cando utilice a plataforma, xa que creará automaticamente os tamaños de imaxe máis pequenos.

Quererás probar co teu ficheiro ICO. Simplemente reducir o teu logotipo a unha icona de 16 píxeles cadrados pode facelo indistinguible. Incluso verás que o noso non é todo o noso logotipo, só o M do noso logotipo.

Consulta o Favicon do teu sitio web

Mellores prácticas HTML de Favicon

Os navegadores priorizan a selección de favicons en función de varios factores, incluíndo o formato, o tamaño e a presenza de declaracións específicas. Así é como os navegadores adoitan priorizar e seleccionar favicons:

  1. Prioridade do formato de ficheiro: Os navegadores adoitan dar prioridade aos ficheiros .ico cando están presentes, xa que este é o formato de favicon tradicional. Se proporcionas un favicon .ico usando <link rel="icon" type="image/x-icon" href="favicon.ico">, a miúdo terá prioridade sobre outros formatos.
  2. Prioridade de tamaño: Os navegadores tamén consideran o atributo size para seleccionar o favicon máis axeitado para o contexto. Se especificas diferentes tamaños para os favicons .png ou .svg, o navegador escollerá o que mellor se adapte aos requisitos de visualización do dispositivo.
  3. Tamaño SVG "calquera".: Cando usa o valor "calquera" para o sizes atributo nunha declaración de favicon SVG (sizes="any"), indica que o SVG pode adaptarse a calquera tamaño. Os navegadores poden dar prioridade a un SVG con "calquera" tamaño para garantir que se escala ben para adaptarse a varias resolucións de pantalla.
  4. A última declaración ten prioridade: Se proporciona varias declaracións de favicon co mesmo formato e tamaño, o navegador normalmente escolle a última declaración que atopa no HTML. Polo tanto, a orde do seu <link> elementos importan. Priorizarase o último atopado.
  5. Volver á icona predeterminada: Se ningún dos favicons especificados coincide cos criterios do navegador ou non hai declaracións de favicons, o navegador pode usar unha icona predeterminada (por exemplo, a icona do navegador) ou ningunha icona.
  6. Preferencias do usuario: Algúns navegadores permiten aos usuarios establecer as súas preferencias para os favicons. A elección do usuario pode anular o favicon especificado do sitio web nestes casos.

Se enumeras primeiro unha declaración de favicon ICO pero queres que o SVG se use como favicon preferido, é posible que non funcione sempre como se pretende porque algúns navegadores priorizan a primeira declaración de favicon válida que atopen. Non obstante, aínda podes asegurarte de que o SVG sexa o favicon preferido especificándoo o último e usando o calquera atributo de tamaño.

Aquí podes facelo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website Title</title>

    <!-- Favicon Declarations -->

    <!-- .ico Format (for maximum compatibility) -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- .png Format (for modern browsers) -->
    <link rel="icon" type="image/png" href="favicon.png" sizes="32x32">

    <!-- .svg Format (preferred) -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">

    <!-- Alternative Text for Accessibility -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" alt="Your Website Favicon">

    <!-- Additional Sizes (optional) -->
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="favicon-48x48.png" sizes="48x48">

    <!-- End of Favicon Declarations -->

    <!-- Your other meta tags, styles, and scripts go here -->

</head>
<body>
    <!-- Your website content goes here -->
</body>
</html>

Neste exemplo, o formato .ico aínda se inclúe para a máxima compatibilidade, pero o formato SVG especifícase en último lugar co calquera atributo de tamaño. Esta configuración dá unha maior preferencia ao formato SVG ao tempo que ofrece o formato .ico como alternativa para os navegadores que o priorizan. Especificando o último SVG co calquera tamaño, aumenta a probabilidade de que os navegadores modernos elixan o SVG como formato de favicon preferido, xa que se pode adaptar a varios tamaños.

Douglas Karr

Douglas Karr é CMO de OpenINSIGHTS e o fundador da Martech Zone. Douglas axudou a decenas de startups exitosas de MarTech, axudou na debida dilixencia de máis de 5 millóns de dólares en adquisicións e investimentos en Martech e segue axudando ás empresas a implementar e automatizar as súas estratexias de vendas e mercadotecnia. Douglas é un experto e relator de MarTech en transformación dixital recoñecido internacionalmente. Douglas tamén é autor publicado dunha guía de Dummie e dun libro de liderado empresarial.

artigos relacionados

Botón de volta ao principio
preto

Adblock detectado

Martech Zone pode fornecerche este contido sen ningún custo porque monetizamos o noso sitio mediante ingresos publicitarios, ligazóns de afiliados e patrocinios. Agradeceríamos que elimines o teu bloqueador de anuncios mentres visitas o noso sitio.