Create a favicon for your website with Gimp

  1. Install Gimp
  2. Launch Gimp
  3. Ctrl-N to create a new file
  4. For Image Size choose 64 x 64 px
  5. Under Advanced Options -> Precision select ’32-bit integer’
  6. Under Fill with select ‘transparency’
  7. Close the dialog
  8. In the editor window you can zoom in to the image so that it fills the editor window. The keyboard shortcut is ‘+’ however I like to change it to ‘=’ so that it doesn’t require using the <shift> key.
  9. Use the brush or other tools to create your image.
  10. Choose Export as and save the image as a .png
  11. Install Imagemagick
  12. Use Imagemagick’s convert tool to convert the png to ico:
    convert image.png -define icon:auto-resize=64,48,32,16 image.ico
  13. Copy image.ico to the webroot directory of your site and rename it to favicon.ico
  14. Make sure the permissions are correct for favicon.ico. For example:
    chmod 440 favicon.ico; chown www-data favicon.ico

Check the favicon

Navigate your browser to https://example.org/favicon.ico The favicon should load the in the browser window and in the browser tab. To load the favicon into the tabs of other open windows on the site simply refresh the tabs.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *