A imagem ao lado do título da página na guia do navegador - como você pode vincular uma imagem aqui?
Respostas:
Essa imagem é chamada de ' favicon ' e é um pequeno .icoarquivo quadrado , que é o tipo de arquivo padrão para favicons. Você pode usar .pngou .giftambém, mas deve seguir o padrão para melhor compatibilidade.
Para definir um para o seu site, você deve:
Faça uma imagem quadrada do seu logotipo (de preferência 32x32 ou 16x16 pixels, pelo que eu sei não há tamanho máximo *) e transforme-a em um .icoarquivo. Você pode fazer isso no Gimp, Photoshop (com a ajuda de um plugin ) ou um site como Favicon.cc ou RealFaviconGenerator .
Então, você tem duas maneiras de configurá-lo:
A) Colocando-o na pasta / diretório raiz do seu site (ao lado de index.html) com o nome favicon.ico.
ou
B) Link para ele entre as <head></head>tags de cada .htmlarquivo em seu site, como este:
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
Se você quiser ver o faviconde qualquer site, basta escrever www.url.com/favicon.icoe você (provavelmente) o verá. O favicon do Stackoverflow tem 16x16 pixels e a Wikipedia é 32x32.
*: Há até um problema de navegador sem limite de tamanho de arquivo. Você poderia facilmente travar um navegador com um favicon extremamente grande, mais informações aqui
É chamado de ' favicon ' e você precisa adicionar o código abaixo à seção de cabeçalho do seu site.
Basta adicionar isso à <head>seção.
<link rel="icon" href="/your_path_to_image/favicon.jpg">Este é o favicon e é explicado no link.
por exemplo, de W3C
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
Além disso, é claro que o arquivo de imagem no local apropriado.
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file:
'apple-touch-icon-retina.png')}">
ou você pode usar este
<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">
Adicione um arquivo de ícone chamado "favicon.ico" à raiz do seu site.
16x16 px.