Como colocar uma imagem no título de uma página da web com o Dreamweaver

Passo 1

Selecione uma imagem apropriada Os favicons são muito pequenos, eles medem apenas 16 pixels quadrados, então a imagem selecionada deve ser simples o suficiente para ser legível em tamanho miniatura. Logotipos complexos parecem apertados ou podem ter bordas irregulares ao redimensionar para 16 pixels. Se isso acontecer com você, considere o uso de uma imagem alternativa que não inclua seu logotipo, mas reflita o tipo de conteúdo em seu site ou no intervalo de cores do site. Em qualquer caso, verifique se sua imagem é um quadrado perfeito para garantir uma redução.

Passo 2

Altere o tamanho da imagem. Depois de escolher uma imagem para reduzir, abra o arquivo no Photoshop. No menu na parte superior da tela, selecione "Imagem" e clique em "Tamanho da imagem". Na caixa de diálogo exibida, altere a largura e a altura da imagem para 16 pixels e, finalmente, clique em "OK".

Passo 3

Salve sua imagem como um arquivo GIF ou PNG. Esses tipos de arquivos quase não têm problemas quando precisam ser convertidos para o formato ICO na próxima etapa. Para salvar sua imagem em um desses formatos, selecione "Arquivo" no menu superior do Photoshop e, em seguida, "Salvar como". Dê um nome ao arquivo favicon e clique no menu suspenso abaixo do campo do nome do arquivo e selecione a opção "GIF" ou "PNG".

Passo 4

Converta a imagem para o formato ICO. O Photoshop não pode salvar esse tipo de arquivo por conta própria. Em vez disso, você deve fazer o download de um conector ou usar um utilitário da web. Por exemplo, use o gerador de favicon gratuito no site "favicon.cc" (consulte Referências). Na página principal deste site, clique no botão "Importar imagem". Localize o arquivo GIF ou PNG criado na etapa 3 e clique em "Upload". Em poucos segundos, o utilitário transformará seu arquivo em uma imagem de 16 pixels quadrados. Para salvá-lo em seu computador com o formato ICO, procure o título com o rótulo "Preview" na parte inferior da página e clique em "Download favicon". Salve este arquivo na pasta com o resto dos arquivos de suas páginas da web.

Passo 5

Adicione o favicon ao seu site. Você vinculará páginas da Web individuais da mesma maneira que arquivos externos, como JavaScript e CSS. Abra sua página da Web com o Dreamweaver e altere o código selecionando a opção "Visualizar" no menu na parte superior da tela e clique na opção "Código". Em seguida, inclui as seguintes tags de código: Este código pressupõe que o favicon existe na pasta de imagens. Se você colocar o favicon em outro lugar, atualize a localização do conteúdo. Por que você precisa incluir dois links? Para compatibilidade entre navegadores. O Internet Explorer 7 manipula os favicons de uma maneira diferente dos outros navegadores e requer uma única regra para garantir uma apresentação correta.

Passo 6

Salve sua página da Web e abra-a no navegador. Agora você verá seu favicon. Se o seu navegador já estava aberto, você pode ter que fechá-lo completamente e reiniciá-lo antes que o favicon apareça. Lembre-se também de que alguns navegadores exibem favicon para os títulos das páginas localizadas na pasta Favoritos, e não no próprio título na barra do navegador.