“A favicon (short for “favorites icon”) is an icon associated with a website or webpage intended to be used when you bookmark the web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually. A favicon is typically a graphic 16 x 16 pixels square and is saved as favicon.ico in the root directory of your server. You can use a favicon with any WordPress blog on a web server that allows access to the root directories.”
This is what WordPress has to say about favicons: today we’ll learn how to create them not just for our browser pleasure, but also to be used as an icon when someone saves your website on the Home of his iOS or Android device. Let’s start!
First thing first, you need a picture: the logo of your website that you’d like to transform into a favicon must be in GIF, JPEG or PNG format, and the proportions should be as square as possible. Once you have your picture ready to go, open the favicon-generator.org website.
From the website:
- Click on Select file and pick the picture that you want to convert
- If you want that your favicon appears as an icon on the Home of your iOS or Android readers’ device, select Generate icons for Web, Android, Microsoft and iOS, otherwise Generate only 16×16 favicon.ico will create the favicon only for the browsers
- In case you want to share your creation with the community of favicon generator.org, check the box Include your favicon.ico in the public gallery, otherwise be sure to uncheck it
- You can now click on Create Favicon
- After a bit, a wild link will appear: click on Download the generated favicon and save the zip file
- In the same page, you’ll find a box with some HTML code: save it somewhere or don’t close the page, you’ll need it in a bit
- Open your favorite FTP program, extract the zip file that you just downloaded and upload its content in the root of your website
- Now go to your WordPress control panel: select Appearance and then Theme Editor
- From the right, select Header (header.php)
- Look for the <head> tag in the code box
- Right below it, paste the code that you obtained from favicon-generator.org
- Save the changes
If you go on your website now, in your browser you’ll see your favicon right next to the address bar or beside the title if you opened it in a tab.
Problems? Questions? Leave a comment! 🙂