em , , , ,

Web: Como criar um favicon para seu site

Preview Descrição: Como criar um pequeno logo para seu site que aparece na barra de endereços de seu navegados, mais conhecido como favicon.

  • [message]
    • ##check##AVISO: Como criar um favicon para seu site.

      • Caso você esteja usando o Photoshop em Português coloque o mouse sobre o nome do recurso que está sendo utilizado e veja a tradução em Português. Os recursos que possuem tradução estão marcados em vermelho no texto.
        Se você tiver dúvidas sobre o uso de alguma ferramenta visite o PS Help! para saber como utilizar a ferramenta desejada.
        Alguns tutoriais não possuem a opção de download das imagens, caso queira utilizar uma imagem em alta resolução para acompanhar o tutorial visite o PS Downloads e escolha um dos sites indicados para download de imagens em alta resolução.
        Em caso de dúvidas e sugestões utilize a área de comentários logo abaixo. Obrigado 🙂

tutoriais photoshop

Favicons são pequenos ícones que ficam na barra de endereço do browser quando um determinado site é visitado, hoje em dia praticamente todos os sites possuem favicons, abaixo podemos ver alguns favicons bem conhecidos.

Web: Como criar um favicon para seu site

Vamos ver como criar um destes para seu site, caso você não tenha site ou não mexa com web este tutorial não terá muita utilidade, principalmente porque iremos citar alguns trechos de código html mais a frente.

01. Pressione Ctrl+N para criar um novo arquivo, defina um tamanho de 64×64 pixels (mais adiante iremos diminuir seu tamanho para 16×16 pixels) e 72 dpi´s e pressione Ok, abra uma foto qualquer (no caso o logo que você queira como favicon) pressione Ctrl+A, e depois Ctrl+C, volte ao documento do favicon e pressione Ctrl+V, depois pressione Ctrl+T para abrir a caixa de Free Transform e redimensione a figura para o tamanho do documento, clique em uma das pontas e arraste segurando o Shift para manter a proporção.

Web: Como criar um favicon para seu site

02. Agora pressione Ctrl+Alt+I ou vá em Image> Image Size e diminua o tamanho para 16×16 pixels, para salvar seu favicon pressione Ctrl+Shift+S ou vá em File> Save As.. e salve no formato .JPG porém na caixa de saída dê o nome de favicon.ico , pois a extensão .ico é lida pelo browser e só assim o favicon irá aparecer.

Web: Como criar um favicon para seu site

Agora faça o upload do favicon para o diretório raiz de seu site (deixe o favicon no mesmo diretoria de sua página index) e na sua página index inclua este trecho de código entre as tags [head] e [/head] (trocando [] por ).

[link rel=”Shortcut Icon” href=”/favicon.ico”] trocando [] por

Depois que isso for feito faça o teste entrando em seu site, caso seu favicon não apareça experimente dar um refresh na página ou colocar um ‘?’ no final da url isto faz com que o browser pense que a página carregada é uma página nova forçando ele a baixar todo o conteúdo da página novamente.

Alguns problemas comuns.

No Internet Explorer IE 6 o favicon não aparece enquando a página não for incluída no favoritos e no Safari para Mac ele não aparece até que se limpe o cache do browser.

Web: Como criar um favicon para seu site

Web: Como criar um favicon para seu site

Inspiração.

Se precisar de alguma inspiração para criar seu favicon entre no site da Smashing Magazine, eles listaram os 50 favicons mais marcantes da web, vale a pena a visita! 🙂

Para não perder tempo.

Caso não queira fazer no Photoshop, você pode importar uma foto diretamente do seu computador para o html-kit.com e ele cria para você o favicon, estático ou animado.

Escrito por André Sugai

Publicitário, Photoshopista, criador do Tutoriais Photoshop, venceu o prêmio iBest na categoria tecnologia em 2008 e dois prêmios de criatividade da Adobe. Ex-colaborador do Tech Tudo (http://Globo.com), iMasters (UOL) e Revista Photoshop Creative.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

30 Comments

  1. olá gostaria de sabe se esta certo assim
    [ [head]
    [link rel=”Shortcut Icon” href=”rose-index.ico”][/head] ]
    eu tenho um blog na uol eu nao concigo por este icon..
    no meu index..
    algum de vc’s poderia me ajuda.. fico grato..
    OBS: no site tem um index em XML e um em thml
    em qual eu posso por ?

  2. Oi Anônimo, como dito no tutorial no INternet Explorer ele só irá aparecer depois que você colocar o site no Favoritos, obrigado pela visita!!

    Oi Jefferson, fico feliz que tenha conseguido, deixa o endereço do seu blog aí para visitarmos :D, obrigado pela visita!!

  3. Oi Anônimo, não consegui ver os links do orkut mas se forem sobre scanlines aqui no blog existe este tutorial, acho que vai ajudar, obrigado pela visita!! 🙂

    Scanlines
    tutoriaisphotoshop.blogspot.com/2007/07/scanlines.html

  4. oi gostei muito dos ses tutoriais
    mais como eu faço pra fazer tipo essas montagens?
    img50046.pictiger.com/images/13360929/z/
    orkut.com/AlbumZoom.aspx?uid=17609084293383475756&pid=3
    orkut.com/AlbumZoom.aspx?uid=17609084293383475756&pid=10
    brigado

  5. eu fiz o favicon pelo Smashing Magazinee postei da maneira que voce escreveu mas não mostra. ficou assim:
    HEAD
    link rel=”Shortcut Icon” href=”favicon.ico”

    o site que estou tentando colocar é adjabaquara.com.br , caso queira dar uma olhada.

  6. Olá, André e Segredo de Davi,
    consegui colocar no novo tipo de blog, é só colocar uma besteirinha no final:

    [link rel= “shortcut icon”
    href=”href=” terra.com.br/exemplo/favicon.ico” /] (muda o [] por )

    o /

    Muito obrigado pelo tutorial, já mudei o ícone no meu blog (e por sinal, é um ícone com fundo transparente :D).

    Site nota 10.

    Abraços.

  7. Oi Segredo de Davi, você está usando o novo modelo do blogger né? eu não mudei para o modelo novo por este motivo, ele usa XHTML que é bem diferente do HTML, acho que esse código que passei aqui não funciona em XHTML, tente dar uma pesquisada sobre favicons e XHTML, obrigado pela visita!!

  8. Olá gostei muito deste artigo dos favicon só que não consigo colocar no blog dar como

    “Não foi possível salvar o modelo
    Corrija o erro abaixo e envie o seu modelo novamente.
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type “link” must be terminated by the matching end-tag “”.

    Espero que possa me ajudar

  9. Oi iscodino, dá para colocar sim, como coloquei aqui no blog, para isso você terá que colocar seu favicon eu algum site que disponibilize espaço para criação de sites, caso você já não tenha, depois é só colocar o enderço no campo href= por exemplo.

    [link rel=”Shortcut Icon” href=” terra.com.br/exemplo/favicon.ico“]

    Obrigado pela visita!!

  10. Olá Muito bom esse Blog estou encontrando muita ajuda só gostaria de saber se é possivel colocar o favicon.ico no meu blog e como que se faz isso? continue sempre com esse blog pois garanto que tem ajudado muito a outras pessoas como tem ajudado a mim.

  11. Oi Bruno, obrigado pelos elogios ao blog!! pode deixar que postarei algo a respeito sim, só peço um pouco de paciência pois ultimamente estão pedindo muitos tutoriais 😀 e estou tentando correr atrás de todos :), obrigado pela visita!!

  12. bem interessante esse lance dos favicons ^^

    parabéns kra, seu trabalho é 10
    desde que comecei com photoshop, venho sempre aqui.
    só acho que você poderia criar mais tutoriais de fundos abstratos, ou então um tutorial para aquelas sign’s de fórum, tava querendo criar uma, mas sempre sai bem simples :/

Tutorial: Energy Beam (explosão com laser)

Scanlines.