A browser icon or favicon is not just a cute decoration for a website. It’s a cool way to create a unique website identity and keep website visitors aware of the sites they’re on. It makes your site stand-out in a browser full of open tabs and bookmarks.
When a page or site is bookmarked or “favorited” the browser icon or favicon will be displayed in the bookmarks list as well.
Web designers and developers can create a browser icon or favicon for a site or page, by using HTML or WordPress.
To create a browser icon or favicon
One way os to make it from scratch with a program such as Canva, or drawing it with an online app like Favicon.cc. It has a preview feature which is great for seeing progress as you go.
I’ve recently learned from one of my readers that while favicon.cc does a good job, it’s limited in that it doesn’t allow for generating favicons for various screen sizes and resolutions at the same time. She found a pretty sweet, free, online favicon generator at Websiteplanet and suggested that I mention it. With this particular tool, you can create favicons from JPG, PNG, GIF (or even from a gallery) that are up to 5 MB in size, and it also has the capability to generate favicons for different resolutions and screen sizes at the same time. (Thanks, Paola!)
Another way you can convert an existing image into an icon is by using FavIcon from Pics, another free online favicon generator. It’s also one I’ve tried, and works well, even when using it on a Smartphone.
Use a simple image along with the organization’s brand colors, to give the site some brand recognition. The logo might work as an icon image if it’s not too complicated. Since these icons are tiny, logo details won’t show.
PNG favicons are supported by most browsers. For backwards compatibility, use ICO favicons.
Using HTML
To add a browser icon or favicon to a website by using HTML:
- Save the icon image as imagename.ico, or imagename.jpg
- Save imagename.ico or imagename.jpg to the root directory of the website.
- To identify the favicon to web browsers, so they can display it correctly, you’ll need to add this code to the head tag:
<head>
<link rel=”icon” href=”http://website.com/imagename.jpg” />
Using WordPress
Prepare the image
The image needs to be 500 x 500 px in width and height. As mentioned before, keep the image simple.
Open Customizer in the WordPress Admin area
Go to Appearance > Customize.
Click “Site Identity”
This is the area where you can edit the site title, description and also upload the browser icon.
Click “Select Image”
From Media Library > Upload Files, browse for the prepared image on your computer and upload it to the Media Library. WordPress allows cropping, but I think it works out best if the image is already the recommended size before uploading.
Publish
Click Save & Publish.
Enjoy and let me know how it goes!
Questions?
Other articles you might like:
-How your personal brand makes the difference
-Using images: Tips to improve your SEO rankings
-Use a customer thank-you page to avoid missed opportunities
About the author
I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.
I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.
I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.
I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.
‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.
Visit Image and Aspect to learn more about your web presence options
Diane M. Metcalf, M.S.
