- Install Gimp
- Launch Gimp
- Ctrl-N to create a new file
- For Image Size choose 64 x 64 px
- Under Advanced Options -> Precision select ’32-bit integer’
- Under Fill with select ‘transparency’
- Close the dialog
- 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.
- Use the brush or other tools to create your image.
- Choose Export as and save the image as a .png
- Install Imagemagick
- Use Imagemagick’s
converttool to convert the png to ico:convert image.png -define icon:auto-resize=64,48,32,16 image.ico - Copy image.ico to the webroot directory of your site and rename it to favicon.ico
- 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.
Leave a Reply