Como coloco o logotipo do meu site para ser a imagem do ícone nas guias do navegador?

100

A imagem ao lado do título da página na guia do navegador - como você pode vincular uma imagem aqui?

html favicon gaio
fonte
2
As palavras-chave são favicon.ico
user956584
en.wikipedia.org/wiki/Favicon
Ry-

Respostas:

176

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:

  1. 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 .

  2. 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

LasagnaAndroid
fonte
18

É 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">
Dulith De Costa
fonte
8

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.

Vincent Ramdhanie
fonte
2 
<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">
user3680001
fonte
apple-touch-icon é para iOS webApps
LasagnaAndroid
1

Adicione um arquivo de ícone chamado "favicon.ico" à raiz do seu site.

Mike Fulton
fonte
Lembre-se de que deve ser exatamente 16x16 px.
uınbɐɥs
3
Não, não precisa, ele precisa ter um formato quadrado e qualquer tamanho, só vai demorar mais para carregar
LasagnaAndroid