One of the easiest ways to give your blog a more custom look is by updating your favicon. A favicon is the small icon next to your blog name on your browser. If you’re on Blogger, you probably?have the standard orange B and on WordPress, you probably have whatever comes standard in your theme. In fact, you may not have ever noticed what your blog’s favicon is. But I can guarantee after reading this post, you’ll forever notice what a blog’s favicon is and you’ll immediately know whether they’ve updated it or not.
This may seem like a complicated design change, but it’s actually really simple and I’m going to show you a few ways to make it happen!
Creating a Favicon
First, you need to create a custom favicon. Typically, this needs to be a standard size of 32×32 pixels or 16×16 pixels (yes, is tiny!). To do this you can create an image on PicMonkey or by using a graphics software like Adobe Photoshop or Adobe Illustrator. Remember that this graphic will be small so it’s best not to include words?or any complicated graphics.
For this example, I created a simple circle with a W in it. Make sure your graphic has enough contrast that it will show at a small size.
Export your graphic from your program. I recommend either a .png or .jpeg file type. The file shouldn’t be more than 100kb, but may be more like 1kb. I recommend naming the file “favicon” which will help you in later steps, especially for WordPress users.
I will admit that it’s actually surprising to me that you can change your favicon on Blogger. But, I think it’s so awesome that you can and that it’s super easy to do!
Log into your account and go to your template. Find Favicon in the top left corner and click edit. Then simply upload the favicon file you created. Save arrangement and head to your blog to reload and make sure it worked!
The best part about this is you can replace it anytime. This is a step most bloggers commonly miss, but once you’re looking for it, it really makes an impact on a blog design!
There are two main ways to change your favicon on WordPress. But first, we need to convert the original image you created. Favicons are stored as .ico files typically. Most image processors don’t have a way to export an image as a .ico, but luckily I’ve found a converter online that has worked well for me. FavICO.com converts .png or .jpeg images to .ico images and allows you to save them to your computer, which is exactly what you’ll need. The new file should be saved as favicon.ico but if it isn’t make sure to rename your file to that exact filename.
If you have access to your hosting server & file manager:
The best way to switch your favicon is through your host. I use and highly recommend?BlueHost?(affiliate link) and the screenshots you’ll see will correlate with BlueHost or JustHost accounts. Be VERY?careful not to tamper with anything else in your account while you’re logged into your file manager, especially if you aren’t comfortable editing your site.
Log into your account and head to your file manager. Once the file manager is open, you can use the search feature to find “favicon” or you can find it directly within your theme folder (which I think is easier). On the lefthand side click “public_html” to expand the folder. Then click wp-content, themes and finally click whatever theme you’re currently using. If you’re using Genesis you’ll want to select the?child theme you’re using, not Genesis itself. Within the theme open the images folder.
Once you’ve clicked on the images folder, you’ll be able to see the favicon.ico file. This is the one you’ll be replacing, but you don’t need to click on it. While you have the images folder selected, click on upload on your menu bar. A new window will open. Make sure you check the checkbox for “overwrite existing files” so that your old favicon will be replaced. Then upload your favicon.ico file. *Note: I’ve had trouble with doing this on Google Chrome the last few weeks, so if you’re having issues, try another browser like Safari!
If you don’t have access to your file manager:
There is also a plugin that can easily update your favicon for you. If you’re wondering why you wouldn’t just use the plugin automatically, having too many plugins on your site can slow it down, so when you can do things without a plugin, it’s always best!
Start by downloading the?Favicon by RealFaviconGenerator plugin. This plugin creates a favicon that is friendly on multiple devices to be able to save your blog link one someone’s phone (like an app).?If you’re able to, save a larger version of your favicon at 72×72 at least (or create at this size if you know you’ll need to use the plugin). You can follow the screenshots on the plugin homepage to be able to walk you through how to install a favicon using the plugin.
Squarespace also makes it really easy to update your Favicon. Simply log into your account and head to the design tab. Then go to Logo + Title and then to the Browser Icon section. You can upload either a .png or .ico file and it will update your favicon across browsers.
Now no matter what platform you’re on, you can have a custom favicon!