How to Put a Logo In A URL?

Asked By 10 points N/A Posted on -
qa-featured

I have a website, and I am just wondering how to put a logo on the address bar when they are on my site.

Examples are that of Odesk.com (O-blue in color) and Wikipedia.org(W).

SHARE
Answered By 15 points N/A #107537

How to Put a Logo In A URL?

qa-featured

Hi Friend,

You should add a simple code in your web pages for get shortcut icon.

Shortcut icon tag makes a site more attractive. Every visitor may surprise for a nice shortcut icon image.

Please follow my bellows instruction for add a shortcut icon in every page of your web site

  • At first open your index file (index.html, index.php etc) in notepad or Adobe Dreamweaver.
  • Now add bellows tag before the title tage( <title></title>)
  • <link rel="shortcut icon" type="image/ico" href="http://yourdomain.com/images/icon.jpg">
  • You should write your correct image path for icon.
  • After complete page editing you should upload it in your hosting. If you want to see this action in every page then you should to same process in your all pages of website.

Then its shows same result.

Thanks

Answered By 590495 points N/A #283749

How to Put a Logo In A URL?

qa-featured

If you are asking about the logo on the address bar then you are probably referring to the “favicon”. “favicon” stands for “favorite icon”. It is a small square image displayed next to the web page’s title in the browser. It is an icon associated with the website and is designed when bookmarking a web page to easily identify what website it is from.

Creating a favicon is very easy. It is an image with 16 x 16 pixels in size saved in ICO format or the Windows icon file type. If you have Adobe Photoshop, here’s how you do it. First, download the ICO plug-in for Photoshop.

Once downloaded, unpack the ZIP file and copy the “ICOFormat.8bi” file to the “File Formats” folder inside the plug-ins folder of Photoshop typically in “C:\Program Files\Adobe\Photoshop 7.0\Plug-Ins\File Formats”. Next, launch Photoshop then create a square image. If you already have an image for the logo, crop the image and make it square. Resize it to 16 x 16 pixels.

After resizing the image to this size, click “File” then “Save As” or simply press CTRL + SHIFT + S on your keyboard. In the “Save As” dialog, select “ICO (Windows Icon) (*.ICO)” in “Format” dropdown menu. Name the file as without quotes “favicon” and click “Save”.

photoshop-save-ico-file

Now you have a file called “favicon.ico”. Next step is to install it on your website. Put your “favicon.ico” file to the root of your website where your default index.html home page file is located. Edit your “index.html” file and put the following tag within your <head> tag:

<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>

Save the file then open your website on your web browser and see how it looks like in the browser. Add the tag to all the pages in your website to display the favicon in every page. Just put the correct path of the icon in your “href” to direct the tag to the correct location of the file.

Related Questions