Exibindo ícone de sua aplicação Web no navegador

Neste artigo demonstro como personalizar sua aplicação web, inserindo uma imagem, que será visível nas abas dos navagadores web.

Mostrando um ícone na sua aplicação Web

                Por vezes queremos demonstrar nossa interatividade com nossos clientes, amigos, assinantes enfim, todos aqueles que por varias vezes acessam nossos sites, blogs e outros... Para isso temos como incrementar cada vez mais nossas aplicações web.

                De um certo tempo pra cá, tornou-se comum colocar ícones nas aplicações web, coisa que já era muito comum nas aplicações Desktops.

                Veja uma imagem de uma aplicação web com um ícone respectivo.

Note no topo e na aba o ícone respectivo na minha aplicação de exemplo.

O ícone usando é um ícone comum nas máquinas com Windows XP instalado.

 

Você pode escolher qualquer ícone, mas recomendo você colocar ícones de 16X16 ou no máximo 20X20, que são medidas consideráveis, para apresentar corretamente em diversos navegadores.

A regra principal é que você insira essa imagem na “raiz”de seu projeto, ou seja, normalmente na pasta /web, ou root/ dependendo a sua aplicação.

No meu exemplo eu usei Java, usando o NetBeans.

Veja na imagem abaixo:

Ou seja minha imagem está “junta”na mesma pasta do meu índex.jsp, portanto você pode rodar na sua aplicação PHP, ou ASP, da mesma forma que usei no JSP.

Agora basta colocar no código, dentro das tags <HEAD> ... </HEAD> da forma que ilustro na figura abaixo:

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!doctype html>

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

</script>

<link rel="shortcut icon" href="icon.ico" >

</head>

<body>

<a href="http://jquery.com/">jQuery</a>

</body>

</html>

 

      Uma boa ferramenta, inclusive online, é a http://iconverticons.com/ onde é possível você converter sua imagem em ícone de maneira fácil e rápida.

                Bom por enquanto é isso pessoal, espero que tenham gostado dessa dica.

Até a próxima e um forte abraço++.

 

 

Artigos relacionados