Como mudar o favicon de um site - @Curso em Vídeo HTML5 e CSS3

Olá esse vídeo ainda faz parte do nosso Capítulo 6 hoje a gente tá falando sobre imagens em html [Música] [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do seu curso de html com CSS a gente ainda está na aula de número 6 no pdf mas a gente já aprendeu coisa para caramba são seis aulas em pdf que viraram vários vídeos por isso porque eu tô fazendo isso aos poucos gradativamente Por que você não tenha Nenhuma Dúvida você vai conseguir acompanhar o pdf e também a aula em vídeo ao mesmo tempo beleza e na aula passada a gente ia aprender o três técnicas de adicionar uma imagem imagem que está na própria pasta uma imagem que tá em outra pasta dentro da pasta atual e também uma imagem que esteja na web uma imagem que você não quer baixar não quer colocar no seu servidor mais que você quer utilizar para a gente se você não viu esses vídeos ainda caro não sei o que que você tá fazendo aqui sinceramente tá você tem que saber colocar imagens pra gente poder fazer o que a gente vai fazer agora e o assunto dessa aula é ícone de favorito e talvez você não tenha percebido que é um ícone Favorito mas eu vou mostrar para você aqui ó e eu venho falando aqui no curso de HTML e CSS várias vezes sobretudo na alta isso aqui é mais um recado da plataforma que você tá fazendo o nosso curso aqui de desenvolvimento de site e se interessou pela coisa de servidores se interessou pela parte física né você tem até os cursos básicos aqui no curso em vídeo mas para aprender isso tudo de verdade confiemos mais técnicos mais aprofundados academicamente organizados aí é só lá no estudonalta mesmo inclusive o nosso curso de redes nossos módulos de redes são criados exclusivamente pelo Alfredo que é o nosso professor aqui do curso em Harvard e do curso de redes e mostram muito mais do que nosso curso aqui bem básico bem Inicial mostrou a mesma coisa não curso de Linux ele foi totalmente criado pelo professor Ricardo ele mostra desde o básico até o mais avançado de um servidor Linux na verdade um servidor local né Da sua rede local mas já é um bom start para você conseguir aprender a criar servidores Linux mas também lançamos no estudo alta um curso de eletrônica básica o Eduardo mas não é um curso para especialistas em eletrônica não foi um curso totalmente modelado e pensado para quem é a profissional de informática de ti mas tem que começar aprender a mexer com motores tem que entender um pouquinho mais sobre elétrica eletricidade e tudo está sendo explicado de uma maneira muito simples e bem objetiva tudo isso já está disponibilizado no estudo em alta e você pode ser um assinante uma assinante acessando esse link que está aparecendo aqui na tela Então é isso vamos seguir com nosso curso mas considere também se tornar um aluno ou uma aluna do Studio Now antes de mais nada de mostrar o quê que eu fazia quando eu faziam professores rhaylan quando você abre o Google por exemplo Abrir o site do Google entrando no site do Google vai sair outro site aqui também Facebook vou entrar no site do Facebook e vou entrar no site do YouTube beleza Tô entrando aqui em três sites dá uma olhadinha eu trazer ele aqui para o meio da tela para você poder enxergar melhor dá uma olhadinha aqui ó se você der se você tem aqui ó esse ícone Zinho que fica na frente do Google isso é um e corrente Favorito esse ícone Zinho está na frente do Facebook também eu imprimi favorita esse aqui tá pertinho da minha cabeça também aí que a gente favor ISO do YouTube só que os nossos exercícios hoje eu vou até abrir a pasta aqui ó a nossa pasta lembrando tá dentro de documentos e Estudos HTML exercícios cobre últimas vezes que a gente fez de imagem é que você tem que ter feito isso na aula passada por favor não dá mole Se você olhar aqui ó a gente não tem simplesmente não tem que ele falou isso no Google Chrome aparece esse Globinho em outros navegadores sequer Aparece um ícone eu vou te ensinar como colocar esse febre com agora aproveitar que eu já tô aqui já vou criar a pasta do exercício 004 botão direito novo pasta ex 004 E aí nesse fx004 eu vou colocar uma imagem que eu já tenho aqui que eu montei previamente que basicamente mostrar aqui vou abrir com o GIF que a gente já instalou aqui gratuito para gente não gastar dinheiro com licença e Photoshop é basicamente é o ícone é a logo do curso em vídeo a seguir que você tá vendo aqui na camiseta então só peguei essa logo e coloquei ela não me mais você pode pegar qualquer imagem aí só que eu vou te dar uma dica imagens que não tenho muito detalhe tá então aqui você vê aqui ó a logo do Conselho de um coraçãozinho misturado com Play e tudo mais eu já tá gravando um vídeo sobre isso não consegui vídeo e um playzinho aqui no meio basicamente o que eu vou fazer é transformar essa imagem e um ícone ela é no formato png ela tá transparente só que para fazer o febre Khan É muito mais compatível seu usar o formato ico e no quinto até dá para gerar mas eu fiz uns testes e às vezes às vezes não abre vou te dar umas dicas aí então que você precisa é pegar dentro da tua pasta de exercício 04 botar uma imagem qualquer aí para você beleza outra coisa que você vai fazer vamos começar a produzir o nosso ícone de favorito vou te dar algumas dicas a Guanabara eu não tenho uma imagem para usar comer para mim Favorito sem problema você pode vir aqui ó você vai procurar no Google aí quem ar cai icon Archive a icon Archive você vai abrir o site do icann Arcade eacf ela procurar o que você quiser Sei lá eu vou procurar HTML ele se tem tem tem vários ícones de html certo só que quando você for escolher pois na praia eu quero por exemplo redondinho vou fazer vou pegar esse aqui ó esse aqui tá vendo você tem a opção de baixar isso é o ICMS e png não vão baixar fico de ícone cliquei e ele provavelmente já baixou eu aqui não vi deixa eu dar uma diminuída aí já baixou tá vendo aqui então ele tá aqui embaixo se você olhar ele tá lá dentro da sua pasta de download só você vê aqui na pasta de download está aqui ó aí eu vou pegar esse arquivo por acontecer você vou lá na minha pasta dos documentos de novo documentos estudo HTML exercício exercício quatro Vou colocar aqui ó colei não sei se ele arquivo. ico para você ver isso você clica aqui em cima lindas exibir extensões de nomes para arquivos tá lá é um arquivo único esse aqui é png tá né vou dar uma diminuída isso aqui tá pois para no HTML. Rico a gente poder trabalha então estou com HTML e pontue vou fazer o curso em video.

Rico para fazer o costume de possuir que eu vou te dar duas dicas a primeira você vai acessar o site favicon. cc se você com uma pessoa criativa e tiver muita paciência você consegue desenhar o ícone aqui essa consegue escolher a cor vem aqui ó aí desenhando vou desenhar aqui o ícone mais ou menos ó só que eu não sou bom isso então eu acho que não é a melhor opção consigo desenhar aqui ó e pintando eu consigo fazer aqui o ícone do curso em vídeo certo posso apagar aqui né então assim se você quiser eu não quero você pode ir desenhando aqui e no final você vai ter o único né Igualzinho Será que você pode fazer só tá ficando até bonitinho é E aí E aí aqui beleza fiz mal e porcamente você pode vir aqui embaixo e download Faster than já baixou aqui vamos exibir aqui os meus documentos e chave o mala nova contra o n ele já abriu eu contra o n e leve uma nova aba uma nova janela né tá aqui ó vai ficar um ponto isso vou vou arrastar para aqui para casa também se chama esse aqui de uma renomeada nele então vou botar o botão direito aqui renomear Cariré nome é meu nome é não é aqui por chamar de curso em vídeo 01. Pico certo só que tá feio pra né Eu quero um bonitinho como tá esse daqui e aí eu vou te dar uma outra dica Você pode baixar aqui ó baixar não né acertar fase com ponto aí ou então a gente viu encontrar Case nós vemos o Ico ou febre com.

cc e agora o serve com ponto aí eu o frete com ponto aí eu é fácil de usar cara você pode mudar um mandar um texto virar um círculo 1. png viam e 40 ou um favicon virar um ícone Sei lá o texto você pode gerar do texto aqui ó pode gerar aqui ó co se você é via férrea se você quiser você pode fazer um fundo Redondo você pode escolher uma fonte bonitinha a acertar o rio aqui tamanho da fonte se ela 8080 não deu 50 tá lá acabei de gerar um favicon aqui um texto para você ficar aqui em download ele vai abaixar e uma legal que ele baixa vários formatos em vários tamanhos você também pode fazer por imagem que é o que a gente vai fazer deixar por último que você pode fazer de um emoji você clica aqui ó gerar a partir de um emoji aí você pode escolher qual emoji você quer sei lá eu quero aquele bonequinho com cara de nerd Cadê aqui né a gente fez você clica aqui em breve festão Abril Ned fez você vai clicar em download pode baixar aqui ó fase com a eu ponto pico aqui pronto se perdão aqui você vai descompactar ele clicando duas vezes ao clicar duas vezes a verdade é melhor do que clicar duas vezes ó você clica com o botão direito e clica em extrair tudo só da enter ele vai criar uma pastinha para você abrindo essa pasta você vai ter lá um arquivo de ícone que eu vou arrastar para cá eu já tenho aqui ó eu tenho um ícone que eu desenhei o único que eu baixei e um ícone teu construir através de um emoji e por último nós vamos fazer aquele que realmente a gente quer né vamos voltar para página inicial e com pontuais e aqui ó eu tenho png para ícone aqui ó gerar tem que arrastar a imagem aqui ó arrastei pode até cancelar essa tela ele mostrou um preview aqui eu posso clicar em download ele também vai baixar sabe agora viram fase com um ponto se porque ele já tem o primeiro né vou lá na minha água de download minha pasta de download na verdade né Vamos extrair botão direito strass tudo e mandei ver aqui ó já tem um faz o com um ponto em que eu morrendo renomear para curso em vídeo 02. 15 TV que ele gera png ele já era um monte de formato alguns desses até funciona em alguns navegadores mas os meus testes aqui ele funciona muito melhor com arquivo.

ico Então eu tenho aqui vários arquivos e esse aqui eu não preciso mais se você quiser manter o original mas eu tenho aqui ó ou sem vídeo 01 ou serviço 02 HTML5 enérgico eu fiz o ícone de várias maneiras acabei de te mostrar aqui diversas formas de gerar um ícone de favoritos e eu trouxe aqui mais um recado muito rápido bem tranquilo e um pedido para você não Quem sabe mais além daqui do YouTube Eu também estou bem ativo lá nas minhas redes sociais no Instagram e no Instagram do consegui vídeo então que eu vim te pedir aqui nesse vídeo é bem simples gostou da aula tá gostando do curso segue a gente no Instagram Vamos tornar essa comunidade muito maior e ajudar a divulgar o trabalho de Quem produz conteúdo com tanto carinho e tanta dedicação e agora vem o negócio como é que eu uso né esse cone vamos lá vou fechar aqui no navegador não gosta de nada na minha área de trabalho então Limpar lixeira tem o tem uns dois dias que isso aqui abriu a sua pasta vai lá em documentos estudos HTML exercícios exercícios ero4 Clica com o botão direito o exercício 4 não abre se abrir Volta aqui e manda abrir com o Cold ele vai abrir com Cold já vai mostrar que existem nos ícones tá vendo aqui do lado Ficaram algumas estrelinhas para indicar que são ícone geralmente acredito que nós vamos dentro do exercício quatro nós vamos criar um arquivo novo tá que a gente já fez várias vezes é o melhor o ponto HTML é inter Ele criou vou criar o código base exclamação Dei a entender vou mudar aqui para português do Brasil e aqui vou botar aqui ó teste de fásico vou botar só um aqui olha o favicon aqui em cima certo beleza se por acaso eu abri ó vou abrir aqui abrir o arquivo 04 vou abrir o Windows clique em duas vezes ele vai abrir no meu navegador organizar Aqui meus códigos beleza Ele tá dizendo pode fazer com aqui em cima mas você vê aqui em cima se você olhar aqui em cima tem que fazer com em tá vazio porque eu ainda não adicionei e adicionar meu que na querida é a coisa mais fácil que tem dá uma olhadinha aqui ó você vai vir na área de configurações que era de cabeça Essa área aqui ó você vai de andar era a cabeça você pode até encolher ela tá vendo É não cheguei a mostrar isso por acaso a família Relaxa é só clicar nas setinhas elas aparecem quando você passa o mouse em cima vocês podem o ícone você pode colocar aqui ó em cima do Cairo em cima do time parece simples digita lnk lnk no link em várias vezes ele você tem uma opção só digitei lnk você vai escolher a opção link fabrico cliquei ele já preenchi a linha com o nome do arquivo Fábio com ponto rico você vai tirar o seu apagar ou faz o composto hídrico vai deixar vazio aqui vai apertar contra o espaço e ele vai e a gente vai escolher qual e quando você quer viu que sempre contra o espaço né com o cursor aqui dentro é uma cor só tem que estar entre aspas contra o espaço e escolhe sei lá vou carregar primeiro o HTML.