How to make a Favicon
Let’s turn this:
See that little icon in the tab? That’s called a favicon (or “shortcut icon”, “tab icon”, “bookmark icon”). Does your website look like the first image, or the second one?
This small design touch is something I notice is missing from a lot of websites and blogs. Though a favicon may be small, it’s a big part of your website because it helps your visitors identify it.
Favicons are important!
On average, how many tabs do you normally have open in your web browser? Your email, Facebook, Pinterest, a blog you plan to read when you have a free moment, your bank, Amazon, the weather…just some examples of what you might have open at this very moment. This can be overwhelming! And one reason why favicons are so important. They identify your website amongst all that chaos.
Another visual for you…
Out of the 8 tabs seen above, 3 do not have favicons. These 3 are not immediately identifiable – and if I’m busy enough, I likely won’t even remember what they are. The others show company logos or variations of their logos. This makes it very convenient to click on the tab you want to see without having to read the title (which I’ve blurred out here for website owners’ privacy).
Your website wants to be seen and remembered! Naked favicons can make your website forgettable. They also make it look unfinished and not as professional as it could be.
Quick note: Current versions of Google Chrome and Firefox display favicons in the tab only. Internet Explorer and Safari display them in the tab and address bar (as seen in the first big image at the beginning of this post).
Making a favicon is one of the quickest and most satisfying tasks I do when I’m working on a new website – and I’m going to show you just how easy it is.
Let’s dress up that favicon:
1. Using Photoshop or any image-editing program, open your logo file. Make sure it’s a PNG with a transparent background.
If you don’t have a PNG with transparent background, ask your graphic designer!
3. Create a new canvas, about 300×300 pixels (settings: RGB color, 72 dpi / resolution). Drag your logo onto the new canvas. Nudge it until it’s centered.
If using a free online image editor that doesn’t let you start a new canvas, go to Step 4
Want to learn more about Photoshop or another image editing program? Want to learn what a PNG is & why it’s a good file type for your logo? Ask me to blog about it!
4. Resize the image to 50×50 pixels. How does it look? Are there fonts that are too small to read? If so, consider removing the text and just using the symbol.
Variation 2: You could create a simple image with your business’ initials and color scheme, like this:
5. Save your image as a .PNG
7. Where it says “Image to create icon from” click upload and choose your image. Click “Create Icon”. It will give you a preview of what the logo will look like:
8. If it looks good, click “Download” and save to your desktop. The file will be called “favicon.ico”
9. Add your favicon to your website:
For advanced users: If you have ftp access to your website’s root directory, just upload the favicon.ico file there.
For Beginners: Send your favicon.ico file to your web designer.
10. Your favicon will now appear on your website’s browser tab!
If it’s not showing up, try opening a new browser window or clearing your browser history. Also, if you’re using an older browser it may not appear until you add a line of code to your HTML. Your web designer can take care of this.
Now your website has a nicely dressed favicon… a name tag to identify it in a sea of browser tabs.
If you see your favorite blog or small business website is missing a favicon, give them a gentle, friendly nudge and share this tutorial with them!