When I first switched to a self-hosted blog, my favicon was the standard BlueHost favicon but I had no idea how to get rid of it. Not cool! And then when I bought a Genesis theme, the G favicon was inexplicably replaced and I was fed up. No more of this random favicon business!
There a bunch of complicated ways explaining how to change your favicon. From uploading it to your site and then going to manually change it in your theme to changing the HTML, I opt for the lazy way of literally just replacing the .ico file from which your site currently pulls the image.
The Easy Way To Change Your Favicon
IF YOU USE WORDPRESS.COM SKIP THIS AND SCROLL TO THE BOTTOM
Step 1: Make a favicon file (.ico). I resized a square version of my logo to 16x16px, and saved it as a PNG file. Nowadays with Retina display monitors, my favourite tech guy, Cameron, recommends that you make your files 32x32px for better resolution and clearer favicons.
Important things: If you have any transparent parts to your favicon, make sure you save as a PNG file so that it doesn’t automatically go white like a JPG would.
Alternatively, if you don’t have a logo you already want to use, you can use that website to design your own pixel by pixel. And as you design it, the favicon shows up on that tab! Cute. Rename that file “favicon.ico”, you’ll be replacing your current favicon.ico with this new one.
Look a mini-me!
Step 2: Next convert it to .ico by using a favicon generator like this one:Â favicon.cc.
FOR WORDPRESS SELF-HOSTED BLOGSÂ
Step 3: If you’re self-hosted, go to your cPanel to the File manager. Click on (public_html/www).
Step 4: Delete the current favicon.ico files in your theme (and your child theme if you have a child theme as well), and upload your new favicon.ico
Refresh your page (you may need to clear your browser’s cache). It may take a couple hours before it shows up. I remember when I first did this, nothing happened, and I gave up. The next day, voilÃ ! Favicon.
FOR BLOGSPOT BLOGS
Step 3:Â Go to edit your Layout.
Step 4: Click “Edit” under Favicon, and upload your .ico file!
FOR WORDPRESS.COM BLOGS
Step 3:Â Go to Settings>General and to the right there should be a box to change your blog picture/icon. Upload your square file and voilÃ ! Your image can only be JPG or PNG, not a favicon. It might take a few hours for it to appear but it will eventually!
For more posts from my Blog Design Week, check out the posts below!
[cgview name=blog-design num=20 orderby=title order=asc size=150×150 quality=100 lightbox=0]