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

screen capture of Dynamic Drive favicon generator

__ 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.