Every good website has a favicon, that tiny icon sitting in your browser tab, and if you're on Blogger and you've never touched yours, you're still running the default orange square with a white B in the middle. Not exactly a personal touch, and worth sorting out early if you're just getting your blog started, though it works just as well if you've been going for years.
Your blog is better than that orange square, so here's how to make your own favicon and get it installed. It's genuinely easy, I think you'll wonder why you put it off this long.
choose an image
A favicon sits at around 16x16 pixels, which is tiny, so whatever you pick needs to read clearly at that size. That gorgeous close up photo of your dog is not going to survive the shrink, a simple clipart version of a dog might. Have a look at other people's blogs for inspiration if you're stuck, and expect a bit of trial and error before you land on something that actually holds its shape that small.
A busy, detailed image turns to mush, a simple bold shape with clean edges stays readable. If your icon sits on transparent space rather than a solid white block, it also tends to read better in the tab, since it isn't fighting a square of white around it.
welcome to photoshop
I'll be honest, not everyone has Photoshop sitting around, but if you're serious about blogging it's worth having. I made my basic favicon using an icon from The Noun Project, which has a huge library of free icons, you just need to credit the source somewhere on your blog. Or pay a couple of dollars for the icon and skip the credit entirely.
Head to The Noun Project and search for something in your niche, the search is genuinely good and there's a lot to dig through. For this example I pretended I was a beauty blogger and went with a pair of lips.
Every icon on there comes in plain black, so the next step is colouring it in.
Select the icon with the magic wand tool, click on every black section while holding command plus shift (control plus shift on a PC) so it all gets selected at once. Then grab the paint brush tool, pick a colour from the palette in the corner, and paint over your selection.
I went with a soft pastel pink for my lips, painted in halfway just to test it out. If your icon has more detail you can select and paint different sections in different colours, which opens up a lot more options than it sounds like it would.
back to it
Once your icon is coloured, shrink it down to use as your favicon. Before that, decide whether you want a plain white square around it or a small white circle, cutting the square back tends to look cleaner, though the full square works fine too if you'd rather leave it.
Those checkered grey squares you'll see in Photoshop are just transparency, they won't show up once the file is out of Photoshop and sitting in your browser tab.
resize time
In your top toolbar, click Image, then Image Size, and resize to 16 pixels by 16 pixels. This only works cleanly if your image starts as a perfect square, so sort that out first if it isn't. Then shrink it down.
Quick note, if you already have an icon and can't shrink it yourself, Blogger will resize it for you automatically, so skip straight to the installation steps below.
Once it's down to 16x16, save it in a file type that keeps whatever transparency you've got. Empty or transparent space needs a PNG, a full block of colour or white can be saved as a JPEG.
I tested my pastel pink lips a few different ways, and the version with the white circle stood out far better than the version with no white at all, which just blended into the grey background. A darker pink held up fine without any white around it too. There's more than one way to get this right, it's worth testing a few before you settle on one.
installation
Okay, that was a lot of steps, hopefully none of it was too confusing. Here's the easy part.
In Blogger, head to your template settings, it's near the bottom of that list of links under the big orange NEW POST button, you'll have been in there before to move things around on your blog.
There's a small white rectangle in the top left corner of the templates box that you've probably scrolled straight past before, it says Favicon. Good sign.
Click Edit, a box will pop up, press Choose File, find your saved icon, click it, then save. Done.
It can take a few days to actually show up for you and everyone else, so if it's sitting there in your template settings but not visible yet, it's just loading in.
(Here's a Wordpress install guide if that's your platform instead.)
Easy, and honestly not stressful at all, once you've actually done it once.
Use whatever image you want, just make sure it starts as a perfect square, and try to pick something that actually matches your blog's colours and theme rather than something random you found lying around.
If any of that was confusing, drop a comment and I'll help as much as I can.
More from Blogging 101:
- The Sidebar
- Template Design Basics
- Creating a Photo Header
- Setting out a Blog Post
- Add Your Blog Link to Comments
- How to Remove the Frame on Bloglovin'
> # end of file
> find me on instagram if that's your thing.
> # signing off