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 :)
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.
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.
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.
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.
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.
Bom artigo. O logotipo é importante para qualquer marca,aqui está o exemplo: logaster.com.br/gallery/team-logo/
eu fiz deu certo mas nao aparece quando carrego a pagina do meu blog :(
Parabens!! gostei muito da dica.xd
Ficou um show! Ainda mais que usei o favicon.cc! Perfect! Valeu pelas dicas!
Onde seria o diretório raiz? :) não sei muito de blogs
Muito Bom Mesmo, tava precisando relembrar como se fazia e vim direto aqui. valeu!
não consegui :(
Fiz como vc falou e nâo funcionou.
Obrigado mano !! mais olha so eu so tirei o .ico
link rel= “shortcut icon” href=”href=” terra.com.br/exemplo/favicon”
e funfo !! vlw mesmo assim !! flw abraçõw !!
“Anjo gotico” pelo que entendi o href tem que ser eaxtamente como está no tutorial, ou seja, href=”/favicon.ico” Acho que se vc mudar o nome da figura não deve funcionar msm.
hiper fácil a sua explicação. Não sabia que podia salvar .ico no próprio photoshop. Valeu!
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 ?
Coloquei o favicon bem certinho no meu site do Freewebs, mas não apareceu :( Uso o Firefox
Se quiser eu te mando uma screenshot do código. :D
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!!
Obrigado agora coloquei no Blog Favicon fuiiii
Obrigado consegui fazer alguns tutorias e mandei para o orkut
Coloquei um favicon no meu site, mas só aparece quando uso o FireFox. O IE 6 e o IE7 nem sinal. Você sabe o que posso fazer para corrigir isso?
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
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
Oi Marcos, aqui apareceu, qual browser você está usando?, obrigado pela visita!@!
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.
Legal Cannibal, depois vou dar uma passada no seu blog para ver como ficou, obrigado pela visita!!
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.
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!!
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
Oi Alexandre, tenta colocar a página no favoritos do IE, depois disso costuma aparecer, espero que ajude!! obrigado pela visita!!
gostei muito do tutorial parabéns !
Segui o tutorial e funcionou perfeito no firefox mas não no IE 6.0 ? tem mais alguma dica para funcionar tb no IE ?
abs
Alexandre@novastudio.com.br
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!!
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.
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 :D e estou tentando correr atrás de todos :), obrigado pela visita!!
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 :/