It’s a tiny, seemingly insignificant, sixteen by sixteen pixel image.
But let’s be honest: it’s the first thing site visitors will notice when your site loads, and the only thing that will differentiate you from pretty much every other Bluehost WordPress site out there. And with how so very simple it is to change, let’s get a new favicon up there, shall we?
For those of you who don’t know what I’m talking about, a “favicon” is that square image thingy you notice in the left-hand corner of your browser tab when you visit a site. Standards provide you with the ability to define an individual one for your own site – but if you don’t, a default one will be used. The following steps are for this site (which is WordPress), but it should be easy enough to replicate for all. It’s a simple as:
- Using an image editor (cheap, Windows junkie I am, I use GIMP), create an image 64px x 64px.
- Design your image, but remember it’s going to have to look great as 16px x 16px. Less it more. Mine is the letter “b”. I am also not a designer.
- Scale the image to 16px by 16px.
- Save or export your image as a “favicon.ico”. If that extension is not possible with your image editor, you can either (a) get a plugin, or (b) save it as a GIF, JPG or PNG and Google any number of favicon generators out there… those can be hit or miss though.
- Upload the “favicon.ico” image to your site. Often, this will be the root directory. But in my case, WordPress was looking for the image elsewhere based on a link tag with the attribute of “shortcut icon”. In that case, I’d rename the existing image to archive it, and upload your new image there.
- Ensure the aforementioned link tag is in fact pointing to your new image. If the tag does not exist, it’s not a terrible idea to add it to the
<link rel="shortcut icon" href="favicon.ico" />
- You may need to flush your browser’s cache in order to get it to show up properly.
And you’re done! Now was worth sixty seconds of your time, wasn’t it?