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

Introdução ao Capítulo 6 - Imagens em HTML

Visão geral da seção: Nesta seção, o instrutor introduz o tópico de imagens em HTML e CSS. Ele menciona que já foram abordadas várias técnicas para adicionar imagens, incluindo imagens na mesma pasta, em pastas diferentes e na web.

Ícone de Favorito

• O instrutor mostra que muitos sites têm um ícone de favorito próximo ao título da página.

• Ele explica que esse ícone é chamado de favicon e está presente nos sites do Google, Facebook e YouTube.

• O instrutor destaca a importância de saber como adicionar um favicon ao seu próprio site.

Criando um Favicon

• O instrutor demonstra como criar um favicon personalizado.

• Ele recomenda usar uma imagem simples e com poucos detalhes para garantir a compatibilidade.

• É mencionado que o formato ICO é mais adequado para favicons, embora seja possível converter imagens PNG para ICO.

Recursos adicionais no Estudo Alta

• O instrutor menciona outros cursos disponíveis no Estudo Alta relacionados a servidores, redes e eletrônica básica.

• Ele incentiva os alunos a explorarem esses recursos adicionais para expandir seus conhecimentos.

Adicionando Ícones de Favorito aos Sites

Visão geral da seção: Nesta seção, o instrutor ensina como adicionar ícones de favorito aos sites usando HTML.

Passo a passo para adicionar um favicon

• O instrutor mostra como abrir os sites do Google, Facebook e YouTube no navegador.

• Ele destaca a presença do ícone de favorito em cada um desses sites.

• O instrutor explica que o favicon é definido usando uma tag HTML específica.

Criando a pasta de exercícios

• O instrutor demonstra como criar uma nova pasta para os exercícios relacionados ao favicon.

• Ele sugere nomear a pasta como "ex004" e colocar uma imagem dentro dela.

Escolhendo uma imagem para o favicon

• O instrutor recomenda escolher uma imagem simples e com poucos detalhes para ser usada como favicon.

• Ele menciona que é possível pesquisar no Google por ícones prontos ou usar qualquer outra imagem desejada.

Convertendo Imagem para Formato ICO

Visão geral da seção: Nesta seção, o instrutor explica como converter uma imagem para o formato ICO, necessário para favicons.

Preparando a imagem

• O instrutor orienta copiar uma imagem qualquer na pasta de exercícios criada anteriormente.

• Ele reforça a importância de escolher imagens com menos detalhes para garantir melhor compatibilidade.

Conversão da imagem para formato ICO

• O instrutor menciona que é possível encontrar ferramentas online gratuitas para converter imagens PNG em formato ICO.

• Ele ressalta que nem todas as conversões podem funcionar corretamente e dá algumas dicas sobre isso.

Essas são as principais informações abordadas neste trecho do vídeo. Certifique-se de assistir ao vídeo completo para obter todos os detalhes e exemplos fornecidos pelo instrutor.

Baixando o ícone do ICMS e PNG

Visão geral da seção: Nesta parte, o palestrante mostra como baixar um ícone no formato ICMS e PNG.

Baixando o ícone do ICMS

• O palestrante clica em um ícone e provavelmente já baixa automaticamente.

• O arquivo fica na pasta de downloads.

Acessando a pasta de documentos

• O palestrante vai para a pasta de documentos.

• Ele encontra a pasta "Estudo HTML" e abre o exercício quatro.

Colocando o ícone na pasta

• O palestrante cola o arquivo.ico na pasta do exercício.

• Ele renomeia o arquivo para "Curso em Vídeo 01.ico".

Gerando um favicon personalizado

Visão geral da seção: Nesta parte, o palestrante dá dicas sobre como gerar um favicon personalizado.

Usando o site favicon.cc

• O palestrante sugere acessar o site favicon.cc.

• É possível desenhar manualmente ou escolher entre várias opções de cores e formas.

Gerando um favicon com texto

• É possível gerar um favicon com texto personalizado.

• É possível escolher fonte, tamanho e cor do texto.

Gerando um favicon com emoji

• Também é possível gerar um favicon a partir de emojis.

• Basta selecionar o emoji desejado e fazer o download.

Renomeando os arquivos dos favicons

Visão geral da seção: Nesta parte, o palestrante ensina como renomear os arquivos dos favicons baixados.

Renomeando o arquivo

• O palestrante renomeia o arquivo para "Curso em Vídeo 01.png".

• Ele sugere usar a extensão .ico para melhor compatibilidade.

Baixando outros formatos de favicon

• O palestrante mostra que é possível baixar favicons em vários formatos e tamanhos.

• Ele recomenda testar diferentes formatos para verificar a compatibilidade com navegadores.

Gerando um favicon com imagem

Visão geral da seção: Nesta parte, o palestrante explica como gerar um favicon a partir de uma imagem.

Usando o site favicon.io

• O palestrante sugere acessar o site favicon.io.

• É possível fazer upload de uma imagem e gerar um favicon personalizado.

Personalizando o favicon

• No site, é possível ajustar as configurações da imagem, como formato, tamanho e estilo.

• Após personalizar, é possível fazer o download do favicon gerado.

Utilizando os favicons

Visão geral da seção: Nesta parte, o palestrante mostra como utilizar os favicons baixados.

Movendo os arquivos para a área de trabalho

• O palestrante move os favicons baixados para a área de trabalho.

• Ele renomeia os arquivos conforme necessário.

Utilizando os favicons no navegador

• O palestrante demonstra como adicionar um favicon personalizado ao navegador.

• Ele mostra que é possível visualizar e selecionar os favicons na página inicial do navegador.

Criando um arquivo HTML básico com ícone de favorito

Visão geral da seção: Nesta seção, o instrutor demonstra como criar um arquivo HTML básico com um ícone de favorito.

Criando o arquivo HTML

• Abra o exercício 4 e crie um novo arquivo HTML.

• Adicione a estrutura básica do código HTML.

• Inclua o favicon no cabeçalho do documento.

Personalizando o ícone de favorito

• Verifique que a tag <link> para o favicon está vazia.

• Escolha um ícone para usar como favicon.

• Utilize uma ferramenta online para converter a imagem em formato .ico.

• Atualize a tag <link> com o nome do arquivo .ico gerado.

Visualizando o resultado

• Atualize a página no navegador para ver o ícone de favorito na guia.

• Experimente diferentes ícones e cores para personalizar ainda mais.

Conclusão

O instrutor encerra esta seção, ressaltando a importância das imagens em um site e incentivando os alunos a praticarem as técnicas aprendidas. Ele também menciona que voltarão ao tema das imagens posteriormente.