Favicons, or “favourite icons” are better known as the small images which mark many webpages. Whether they display Wikipedia’s “W” or Twitter’s blue bird, these icons can be seen on a webpage’s tab, or just to the left of the address bar. Depending on your internet browser, if no favicon is specified for a given HTML page, the icon that is shown will either be this little blank page 
or your browser’s default icon, such as Internet Explorer’s “e.” In only a few small steps, you can craft and upload an icon that people will associate your site with.
favicons in Chrome’s tab and bookmark bar
Favicon Crafting
You can easily draft a favicon in MS Paint or Photoshop, but I’ve found that an immensely simple way to craft a favicon lies in the following website on which this how-to will focus: http://www.favicon.cc/. The benefit of using this site is the ability to create an animated favicon, or to use transparency in your favicon, and this is possible since the site exports your creation as a “.ico” file. However, as far as I can tell, the only size at your disposal is 16×16 so this site may not be the best option for more intricate designs.
Upon reaching the favicon site, you will be presented with an image very similar to the one above. Your tools are a 16×16 grid, a colour picker, transparency slider, and a click-and-drag move function. Above I’ve demonstrated varying transparency on the pixel grid, and the site will in turn display what the image on the grid will look like on the web:
Making a favicon is that simple, unless you plan on adding an animation into the works. In that case, you can use the site’s animation tools, which expand from the “Use Animation”summary just below the pixel grid. Bear in mind that animations and transparency don’t mix.
Adding a Favicon to Your Website
Download the .ico file once you’ve finished your favicon, and place it along with the other images on your website. The code for implementing a favicon goes into your index.html and is as follows:
<head> <link rel="shortcut icon" href="imagefoldername/faviconfilename.ico"></head>
*if your images are simply stored in your html folder, then you need only target href to your favicon’s file name.
Source : digicompdiy[dot]wordpress[dot]com
0 comments:
Post a Comment