Your favicon (favorites icon) is the icon that shows up on the browser tab when a reader visits your site (such as the book favicon on the tab when you visit my blog) and on the bookmark when they favorite your site. It is a very small graphic file (16 x 16 pixels square) with the filename of favicon.ico. Your favicon could represent your blog’s content (mine is a book since I help authors write, publish, and market their books) or it can be a letter or two if you want to use your initials or an abbreviation for your blog’s name.
When you launch your self-hosted WordPress blog, your site will not have a favicon yet so a blank placeholder will appear which does not look professional.
That said, the title of this post is “How to Generate and Add a Favicon to Your Blog” so let’s get it done! I recommend printing this blog post so you can see what needs to be done without clicking back and forth between screens and can cross through the words in each step as you complete them.
__ decide whether you want to use an image that represents you blog’s content (see Option A below) or a letter or two such as your initials or an abbreviation for your blog’s name (see Option B below)
Option A: Using an Image
__ choose an image that you have the right to use that will still be recognizable when reduced to a very small size, download it, and resize if necessary:
__ go to Google Advanced Image Search, select “free to use, share, or modify, even commercially” from usage rights dropdown, enter “book” in the “all these words:” search box, and press Enter to bring up a screen full of images
__ click on the menu icon in the upper right corner of the Chrome browser and click the Zoom – button several times to reduce the size to 25% so you can see how recognizable each image is at a small size
__ choose an image, click it (to go to the web page for that image), right-click on the image, and select “Save image as…” to save it on your computer
__ launch Paint or a similar image editing program, open the image, and note the file size
__ if it is 150KB or less then it is small enough for the favicon generator site to convert so just close your image editing program without saving any changes
__ if it is larger than 150KB then click Resize and enter the percentage necessary to reduce it to the size required (70% for example), save the file in the same format but with that number added to the file name (Paint will then show the new file size so you can confirm that it is small enough; if it is still not small enough then I open the original image again to Resize it to a smaller percentage and save it again), confirm that file size is small enough, close image editing program
__ visit favicon generator site Dynamic Drive
__ click Choose File, navigate to your image file, double-click it to choose it, and click Create Icon
__ scroll down to see what it will look like and if acceptable then click Download Favicon to download
Option B: Using a Letter or Two
__ visit Faviconist
__ enter the letters you would like to use as your favicon
__ play around with styles and transparency levels (I would use a background with complete transparency so that only the letters show up without any background color); as you make adjustments you will see the changes in the examples to the right and on the favicon on the browser tab for Faviconist
__ click Save Favicon button
__ select text with link in text box below Save Favicon button
__ open new browser tab, paste text in URL bar, delete characters in URL before http and after favicon.ico, and press enter to download the file
Uploading Your Favicon (Both Options)
__ close the browser tab for your blog if it is open
__ go to the site for your blog’s hosting service and navigate to your control panel (I use Webhostingpad (affiliate link) to host my blog and to get to my control panel I log in and click Services > My Services > View Details > Login to cPanel)
__ scroll down to the Files section and click File Manager
__ navigate to your theme’s main folder (mine is in the public_html\wp-content\themes folder; to show the contents of my theme’s folder I had to navigate to a file or subfolder in that folder and then click the Up One Level button)
__ if there is a favicon.ico file listed there already then delete it
__ click Upload, click Choose File, navigate to your downloads folder, and double-click the favicon.ico file you previously downloaded to upload it into your theme’s main folder
__ click link to go back to your theme’s main folder
__ navigate to your blog’s main folder (I clicked Up One Level three times to show the contents of the public_html folder)
__ click Upload, click Choose File, navigate to your downloads folder, and double-click the favicon.ico file you previously downloaded to upload it again—this time into your blog’s main folder (doing so should display your favicon when your blog is included in a list of blogs in a reader such as Feedly)
__ click link to go back to your blog’s main folder
__ close File Manager tab and cPanel tab
__ go to your blog and you should see your favicon on the browser tab
Congratulations on generating a favicon and adding it to your blog!
Do you have any questions or concerns? Shoot me a message via the About/Contact page and I’ll do my best to help.