Como criar um favicon animado
O favicon é o ícone que aparece à esquerda do título das páginas em nossos navegadores de Internet, a maioria das imagens são estáticas, mas algumas são animadas, no tutorial passo a passo, vamos aprender como é feito um favicon animado de forma simples e gratuita.
Normalmente, um favicon de tamanho ideal é criado com as dimensões de 16 x 16 pixels, grande parte dos browsers também utilizam uma versão de 32 pixels. Estas duas versões possuem um padrão de tamanho ideal para a imagem.
Por isso, ao fazer um favicon animado, poderá utilizar um destes tamanhos, que podem conservar a transparência da imagem, e ainda sim ser compatível com qualquer browser atualizado.
Leia também: como fazer um favicon online.
Instruções
Para criar essa animação você pode usar muitos diferentes programas disponíveis como o Photoshop ou Gimp, existem ainda ferramentas online para fazer essas animações facilmente e de forma totalmente intuitiva:
FavIcon from Pics
FavIcon from Pics permite criar um favicon animado, você tem a opção de adicionar animação de texto de uma forma muito simples. Além disso, o serviço permite adicionar várias imagens ou logotipos de maneira intuitiva.
Já dentro do serviço, selecione a opção “Selecionar Arquivo” e faça o upload da primeira logomarca ou imagem que esteja em seu computador e, em seguida, escolha a alternativa “Generate Favicon.ico”.
Abre-se então uma nova janela onde será possível visualizar a imagem criada em versão estática. Para fazer um favicon com várias imagens em movimento, utilize a alternativa “Selecionar Arquivo” e, em seguida, utilize a opção “Add another image”. Faça isso até que todas as imagens sejam carregadas.
Agora, utilize a alternativa “Edit” localizada abaixo da imagem em movimento. Ao utilizar a ferramenta será possível personalizar o Favicon.
Utilizando a barra de ferramentas, você poderá alterar as posições dos ícones, adicionar um texto, colocar fundo transparente, alterar o tamanho e fazer outras diferentes modificações.
Quando terminar, poderá salvar o favicon animado e estático para o PC. Para fazer isso, selecione a alternativa “Download Favicon Package” e, em seguida, baixe o arquivo em formato .zip compactado.
Agora, se você tem acesso via FTP ao seu servidor, envie as imagens dos favicons para a pasta raiz do seu site ou blog, utilizando um programa FTP de sua preferência.
E para finalizar, selecione o código HTML disponível em FavIcon from Pics, menu lateral esquerdo, e adicione no seu template, entre as tags <head></head>.
Favicon.cc
Ao utilizar o serviço www.favicon.cc podemos gerar um favicon animado facilmente ao desenhá-lo na própria ferramenta. Tudo pode ser feito de forma simples e sem a necessidade de qualquer registro.
Já dentro do serviço, selecione a alternativa “Create New Favicon” para começar o desenvolvimento da figura. Utilize a área central para desenhar o ícone e, a barra de ferramentas lateral direita para fazer as personalizações.
Ao selecionar a alternativa “Use Animation” podemos criar novos quadros para aplicar o efeito de movimento.
Agora, faça isso facilmente ao utilizar o recurso “Append New Frame” onde poderá desenhar novas figuras, textos ou iniciais.
Além disso, também podemos excluir um quadro de movimento criado ao utilizar a ferramenta “Delete”. Quando terminar, pode salvar a imagem ao utilizar a alternativa “Download Favicon”. Pronto! Agora é só colocar a figura e o código HTML em sua página de Internet.