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 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.
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.
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.
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.
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.
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.
Nenhum comentário:
Postar um comentário