How to create a website favicon.ico file using the GIMP


Published on

This article tells you how to create a website favicon.ico file using the GIMP. Hire Neogain, a Hull web designer agency to design your website.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How to create a website favicon.ico file using the GIMP

  1. 1. <ul><li>How to create a website favicon.ico file </li></ul><ul><li>using the GIMP </li></ul>
  2. 2. <ul><li>You might be looking for an application to create a favicon.ico file? </li></ul><ul><li>One such application to consider is using the cross platform application called the GIMP, which is the Gnu Image Manipulation Package. </li></ul><ul><li>This image editing application has enough features to make creating an favicon.ico a breeze. </li></ul>
  3. 3. <ul><li>So what exactly is a favicon? It is the icon that appears in a browser tab and often next to a website address in the url bar or bookmark. </li></ul><ul><li>The only setback really is when you are wishing to resize a large complex image, into a small icon file. It is during that conversion process, that will take up time and you will have to make sure your end result, is a clear and simple favicon. </li></ul><ul><li>Hire Neogain! </li></ul>
  4. 4. <ul><li>Why not save yourself time and hire Neogain to not only create your website favicon, but to work on your website project? </li></ul><ul><li>Our Hull web designers and developers can easily create your website graphics, and develop your website. </li></ul><ul><li>Looking for a Hull website designers? </li></ul><ul><li>Hire our team! </li></ul>
  5. 5. <ul><li>Step 1 – Download and install the GIMP. </li></ul><ul><li>The GIMP is available for both Linux and Microsoft Windows. If you are a Linux user you might find it is already installed by default in your operating system, else you can download it via your OS repository. </li></ul><ul><li>Microsoft Windows users can download it from: </li></ul>
  6. 6. <ul><li>Step 2 – Create a new image. </li></ul><ul><li>From the ‘File’ menu option select ‘New’, and then create a 32×32 pixel image. </li></ul><ul><li>This will then open a new window which has a blank white area, which is the canvas for your icon. </li></ul>
  7. 7. <ul><li>Step 3 – Design or paste your image. </li></ul><ul><li>You probably will want to zoom in on the image, as it is so tiny. To do this from the ‘View’ menu option you can select ‘Zoom’ then a percentage, such as 1600%. </li></ul><ul><li>If you are looking to scale down another image, open it in a separate window and remove as much complexity as possible, then scale down and clean it further, ready to be saved. </li></ul>
  8. 8. <ul><li>Step 4 – Save your image. </li></ul><ul><li>From the ‘File’ menu select ‘Save as…’, then for the file name type favicon.ico , and from the drop-down list select ‘Microsoft Windows icon (*.ico). </li></ul><ul><li>Then another window will appear, but the default option should be fine. </li></ul>
  9. 9. <ul><li>Step 5 – Upload your image to your server. </li></ul><ul><li>How you upload your image and whether it is displayed, could vary between server and CMS installations. </li></ul><ul><li>Usually uploading your favicon.ico file to the root of your website (via FTP or a control panel file manager), will result in the favicon.ico being used. </li></ul>
  10. 10. <ul><li>However sometimes a website theme has the option to specify a path in its configuration, though this is rare. </li></ul><ul><li>So if you don’t see your image after a browser fresh, else cleaning out your cache and restarting your browser, it might be worth looking at your CMS options and its theme settings. </li></ul>
  11. 11. <ul><li>Hire Neogain! </li></ul><ul><li>For website design and development services, you should hire our Hull website team! </li></ul><ul><li>Plus don’t forget to check out our other website services, such as search engine optimisation training. </li></ul><ul><li>Hire a Hull web designer ! </li></ul>