>> Tecnologia Eletrônica >  >> Casa Inteligente >> Vida Inteligente

Como Criar um Favicon (Logotipo de URL)

Um favicon é uma forma criativa e prática de adicionar identidade visual sutil à presença do seu site. Favicons são pequenas imagens que navegadores usam em abas de páginas e barras de endereço. Exibem um logotipo ou imagem associada ao site que atua como identificador visual da marca ao lado do título ou URL. Favicons são particularmente úteis como identificadores em navegação por abas porque o espaço de texto para títulos diminui quase a nada conforme o usuário abre mais abas.

Passo 1

Projete o ícone desejado em programa de edição de foto ou gráficos. Pode pegar logotipo ou imagem existente associada ao seu site ou marca e ajustá-la aos padrões de favicon. Favicons sempre usam dimensões quadradas e têm tamanho máximo suportado de 256x256 pixels. Recorte e redimensione a imagem para caber em quadrado de 256x256 pixels se for usar empacotador de ícones para suportar múltiplos tamanhos. Se for fazer apenas uma versão, use tamanho 16x16 pixels.

Passo 2

Exporte o gráfico do ícone como arquivo de imagem PNG do programa de design. PNG é o formato padrão W3C para favicons. Alguns navegadores podem exibir arquivos JPG como favicons, mas o padrão não é oficialmente suportado. Além disso, programas empacotadores de ícones podem não funcionar com imagens em outros formatos. Favicons também suportam arquivos GIF e ICO.

Passo 3

Empacote seu arquivo PNG exportado em arquivo ICO com programa conversor de ICO. Um conversor processa um favicon PNG, formata-o para vários tamanhos de favicon amplamente suportados e os incorpora em um único arquivo. Arquivos ICO fornecem favicons de resolução mais alta que 16x16 pixels para dispositivos que os suportam.

Passo 4

Faça login no seu serviço de hospedagem de site e faça upload do arquivo PNG ou ICO para o servidor de mídia do site. Copie a URL do arquivo enviado; você precisará dela para anexar o favicon ao site.

Passo 5

Abra seu programa de edição de site e adicione o seguinte código, modificado com a URL do arquivo favicon conforme indicado, à seção do seu site.

Para arquivos PNG: <link rel="icon" type="image/png" href="URL_DO_SEU_FAVICON.png">

Para arquivos ICO: <link rel="icon" type="image/x-icon" href="URL_DO_SEU_FAVICON.ico">

Salvo se estiver usando site controlado por CMS ou incluir seção baseada em arquivo, terá que adicionar o código a cada página onde deseja o ícone. O favicon aparece após salvar e atualizar as páginas.

Dica

Programas de edição de foto como Photoshop e Corel Draw funcionam bem para projetar e formatar o ícone. Alternativamente, use programas gratuitos como Paint.net e Pixlr.

Aviso

Alguns navegadores associam automaticamente arquivo de imagem no diretório /favicon como favicon; no entanto, a organização W3C desencoraja essa prática porque não é padrão universalmente suportado e contraria princípios de arquitetura Web. Além disso, muitos serviços de hospedagem e sistemas CMS não permitem colocar conteúdo de mídia fora de diretórios de arquivos de mídia, tornando essa prática impossível.