Web: Como criar um favicon para seu site

COMPARTILHE:

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

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 64x64 pixels (mais adiante iremos diminuir seu tamanho para 16x16 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 16x16 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.

COMENTÁRIOS

BLOGGER: 30
  1. 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 :/

    ResponderExcluir
  2. 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!!

    ResponderExcluir
  3. 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.

    ResponderExcluir
  4. 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="http://www.terra.com.br/exemplo/favicon.ico"]

    Obrigado pela visita!!

    ResponderExcluir
  5. 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

    ResponderExcluir
  6. Oi Alexandre, tenta colocar a página no favoritos do IE, depois disso costuma aparecer, espero que ajude!! obrigado pela visita!!

    ResponderExcluir
  7. 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

    ResponderExcluir
  8. 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!!

    ResponderExcluir
  9. 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="http://www.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.

    ResponderExcluir
  10. Legal Cannibal, depois vou dar uma passada no seu blog para ver como ficou, obrigado pela visita!!

    ResponderExcluir
  11. 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 é www.adjabaquara.com.br , caso queira dar uma olhada.

    ResponderExcluir
  12. Oi Marcos, aqui apareceu, qual browser você está usando?, obrigado pela visita!@!

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

    ResponderExcluir
  14. 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
    http://tutoriaisphotoshop.blogspot.com/2007/07/scanlines.html

    ResponderExcluir
  15. 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?

    ResponderExcluir
  16. Obrigado agora coloquei no Blog Favicon fuiiii
    Obrigado consegui fazer alguns tutorias e mandei para o orkut

    ResponderExcluir
  17. 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!!

    ResponderExcluir
  18. 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

    ResponderExcluir
  19. 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 ?

    ResponderExcluir
  20. hiper fácil a sua explicação. Não sabia que podia salvar .ico no próprio photoshop. Valeu!

    ResponderExcluir
  21. "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.

    ResponderExcluir
  22. Obrigado mano !! mais olha so eu so tirei o .ico
    link rel= "shortcut icon" href="href="http://www.terra.com.br/exemplo/favicon"

    e funfo !! vlw mesmo assim !! flw abraçõw !!

    ResponderExcluir
  23. Muito Bom Mesmo, tava precisando relembrar como se fazia e vim direto aqui. valeu!

    ResponderExcluir
  24. Onde seria o diretório raiz? :) não sei muito de blogs

    ResponderExcluir
  25. Ficou um show! Ainda mais que usei o favicon.cc! Perfect! Valeu pelas dicas!

    ResponderExcluir
  26. Parabens!! gostei muito da dica.xd

    ResponderExcluir
  27. eu fiz deu certo mas nao aparece quando carrego a pagina do meu blog :(

    ResponderExcluir
  28. Bom artigo. O logotipo é importante para qualquer marca,aqui está o exemplo: https://www.logaster.com.br/gallery/team-logo/

    ResponderExcluir

Nome

.ai,71,.asl,1,.eps,24,.indd,1,.jpg,20,.png,40,.psd,594,.sketch,2,.svg,7,2006,90,2007,352,2008,942,2009,1780,2010,1822,2011,1825,2012,1764,2013,240,2014,559,2015,1195,2016,518,2017,748,2018,700,2019,415,2am,1,2axion,1,360,4,abril,378,abstrato,223,acer,1,actions,151,adobe,32,adobe experience house,1,adobe max,1,agosto,532,ajax,1,allan portilho,1,animação,39,aritana,1,arte,27,artistas do photoshop,1079,axis,5,backgrounds,1,basekit,1,básico,68,benq,9,bethesda,4,bgs,123,bmx,1,booombox,2,brasilmegaarena,2,brushes,107,bug,1,bunker,1,campus party,1,capcom,1,cartazes de cinema,117,cartazes de rock,203,cinemark,1,codemasters,1,com2us,3,concurso cultural,1,css3,1,curta,6,de(ath)sign,236,designbunkertp,1,dezembro,642,dica ninja,99,dificuldade 1,38,dificuldade 2,389,dificuldade 3,948,dificuldade 4,332,dificuldade 5,56,distortions,4,divulgação,1,diy,32,dji,1,dlink,1,documentário,105,dollarphotoclub,37,download,1780,edição de vídeo,3,efeito,1076,esportes,11,fastcom,3,ferramentas online,1,fevereiro,492,filme,3,flipbook,1,flow motion,1,fontes,569,fotolia,13,fotoshistoricas,39,fotosqueabalaramomundo,75,gamebau,1,games,214,gamevil,1,gastore,1,gifart,27,gomidia,1,goPro,1,gradientes,7,greenk,1,guest post,5,historia da foto,22,hitbox,1,hopi-hari,1,hoplon,19,html5,3,hype,2,hyperlapse,5,hyperx,33,ícones,96,idc,2,imagem,1,infográfico,1,inspiração,34,janeiro,480,julho,494,junho,393,kingston,16,kinship,2,layer style,43,lbee,1,leitores,1,levelup,15,lightpainting,1,lista,2,live-stream,2,magic the gathering,1,maio,336,março,466,matéria,591,maurício de souza produções,1,melhordasemana,17,mestres da pintura,35,meutimao,1,mob2b,1,mockup,39,música,48,natal,1,novembro,698,off,1,off-topic,520,outubro,748,palestra,7,parkour,1,patern,46,pdf,2,pérolas do instagram,1,photoshop básico,1,Photoshop CC,2,photoshop express,1,photoshop week,1,pixel show,1,plugin,4,png,1,positivo,16,post pago,2,prezi,1,printi,2,project ten,2,psd,2,psdownloads,1,pshelp,1,pszuero,2,purgatorium 90,1,rawar,2,razer,36,relink,206,responsivo,2,retoque de imagem,111,rixty,3,saga,12,selecaoTP,44,setembro,520,shapes,2,showreel,7,skate,59,skillab,1,smyowl,6,sony,1,speedart,3,speedpaint,8,splashscreen,1,stop-motion,9,tectoy,4,template,4,teste,1,texto,272,textura,137,tilt-shift,3,timelapse,21,tipografia,3,tp,2,tunning virtual,14,tutorial,2210,tutorial builder,2,tutorial player,2,ubisoft,71,udemy,1,ui,16,unboxing,1,vaio,1,vice,64,vídeo,706,vídeo aula,484,video mapping,3,wallpaper,1,warspear,1,wbgames,1,web,25,webfont,1,wix,3,xma,5,
ltr
item
::Tutoriais Photoshop::: Web: Como criar um favicon para seu site
Web: Como criar um favicon para seu site
Como criar um pequeno logo para seu site que aparece na barra de endereços de seu navegados, mais conhecido como favicon.
https://www.andresugai.org/Materias/favicon/imagem5.jpg
::Tutoriais Photoshop::
https://www.tutoriaisphotoshop.net/2007/07/web-como-criar-um-favicon-para-seu-site.html
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/2007/07/web-como-criar-um-favicon-para-seu-site.html
true
34833248
UTF-8
Ver todos os Posts Não encontramos nenhum post VEJA TODOS Leia Mais Responder Cancelar Resposta Deletar Por Home PÁGINAS POSTS Veja Todos RECOMENDAMOS TAMBÉM LABEL ARQUIVO SEARCH TODOS OS POSTS Não encontramos nenhum post relacionado com sua busca Voltar para a Home Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copie todo código Selecione todo código Todos os códigos copiados para o clipboard Não foi possível copiar todo código / textos, pro favor pressione [CTRL]+[C] (ou CMD+C no Mac) para copiar