How to add a browser icon to your author website
Here’s a neat little tip that will make your author website look truly pro. I quite often see author websites with missing browser icons (also known as favicons), and it immediately marks them out as ‘home made’. Not that this is necessarily a bad thing - in fact, I’m all for authors building their own sites as it can actually be quite a fun creative project (yes really) and it’s very empowering! But even so, adding a browser icon is easy peasy, and adds a bit of polish to your site, so it’s worth taking five minutes to get it done!
What is a browser icon?
A browser icon is the teeny little logo that you can see on the tab of your browser when you’re on a website. It’s basically a visual way to let the website visitor know exactly what website they’re on – and it’s usually a truncated version of the website’s logo. So for Twitter it’s their little blue bird, for Facebook it’s their logo – the F in a blue box, for Google it’s the G from their logo etc etc…
A browser icon makes your site instantly recognisable in a browser full of tabs.
If you build a Squarespace website but you don’t add a browser icon, you’ll have a little black box as your browser icon – all Squarespace websites without browser icons have the same.
The good news is, it’s easy to create your own browser icon and upload it to your site. There are a few different options. Now as authors don’t usually have logos (unless they are non-fiction authors), it’s not always as obvious what to pick for your browser icon.
So here’s what I suggest to my website clients.
I recommend using your own initials, a graphic element from your book’s cover, or crop of your book’s cover.
I’ll talk you through the three options below.
Using your initials
This is a smart simple and easy way to create your browser icon. Trust me, it will take you about five minutes max.
To do this you’ll need to use a favicon generator. There are loads online, but here’s one I use: https://favicon.io/favicon-generator/.
It’s quite straightforward – follow the steps on the site and experiment with different fonts in different sizes, until you find one that sits well with the overall design of the site.
You can change the colour of the font and the background of the favicon using the hexcode fields. These are the six-digit codes you’ll see in the colour fields. For example: #FFFFFF which is white.
Try to use the same colours you have on your own website for your browser icon, by copying and pasting the hexcodes from your site.
Not sure what the hexcodes for the colours on your website are?
You can install a colour picker extension to your browser, (this one is good), then go to your website, hover over the colour you want to copy, click on it and it will give you the hex code of the colour.
Copy and paste this code into the colour fields on the favicon generator, check you’re happy with how everything looks and then download it.
You’ll get a zip file with a few different versions of your browser icon. I always choose the version saved as android-chrome-512x512 as this is the biggest file and the best quality. You then need to upload this to your website (more on that below).
Using a graphic element
An alternative to using your initials for your browser icon is to use a graphic element from your novel. This works really well for books that have covers with artwork on rather than photographs.
If you visit Beth O’Leary’s website, you’ll see for her browser icon I used the plant pot from the cover of her second novel The Switch.
Ask your publisher if the art team have any suitable elements from your covers that they could send you for your browser icon. They often create extra graphics for banners etc, and so it should be quite quick for them to send you something suitable. You just need to specify they need to be square and saved in a PNG format.
If you are using a graphic element, I always suggest using a transparent background for your browser icon, as this looks much more professional.
Using a crop of your book’s cover
You can also use part of your book’s cover as your browser icon. Just remember that for it to work as a browser icon, you will have to format it in a particular way – see below for more on how to do this.
The most important thing is that your browser icon is square. I have seen people use the Audible version of their cover, as this is a square version of your cover, so this can be a really quick solution.
Some notes on bowser icon formatting
Browser icons have to be square. If you upload them a different shape, they won’t look right.
They also have to be in the .png or .ico format, and, as I said above, look best if they are on a transparent background, rather than being in a white square.
As they are so tiny (they actually display at 16x16px), they don’t need to be big files – in fact, Squarespace sets a maximum file size of 100KB for browser icons. I always resize mine to 100 x 100 pixels and this works well.
Uploading your browser icon to Squarespace
How to add your browser icon to your Squarespace site depends on which version of Squarespace you are using.
(Not sure which version you’re on? You can find out by logging into your site and clicking Help on the left-hand menu. At the bottom of the window that opens you’ll see the info about what template your site is built on and which version of Squarespace it’s using).
Here’s how to upload your browser icon to your Squarespace site:
In the Home Menu, click Settings > Website > Favicon.
Drag your image into the image uploader, or click the uploader to select a file from your computer.
After your image uploads, click Save.
See a video walkthrough on the Squarespace website →
Don’t have a Squarespace website?
There’s plenty of online guides about browser icons for all different website platforms. Here are some links that may be useful…
Follow the instructions to adding a browser icon to your:
Hope this was helpful – as ever if you have any questions, just give me a shout!
Looking for help with your author website? Discover my three design packages here>
