- Internet & the Web
How to Add a Favicon to a Website
What is a Favicon
A favicon, also known as a favorite icon or shortcut icon, is simply a small image associated with a website or blog that often appears on browser tabs or even next to a website's URL in the address bar.
Although a favicon may be very small in size, typically measuring in at a mere 16x16 pixels, it is a huge branding opportunity and should not be overlooked by website owners and bloggers.
Many developers and bloggers, however, do in fact miss this chance to brand their site online. Read on to not only learn how to add a favicon to a website in a few simple steps, but also why it's beneficial to have a favicon in the first place.
Why Have a Favicon
Many times, the image used for the favicon is the same as the logo for a business, website or blog. Quite often, however, the icon is an adapted version of a logo designed to look good in just a few square pixels of space.
Favicon designs limited to one or two colors and simple shapes or letters often are much clearer to see and may have the greatest impact. Additionally, many bloggers prefer to use their photo avatar as their favicon.
By using a logo or other recognizable image, viewers can quickly recognize a favorite website or blog, making it more likely for them to click-through.
Advantages of Having a Favicon:
- Increases brand recognition
- Increases brand/follower loyalty
- Improves site visibility and perhaps click-through
- Gives a website or blog a professional touch
The advantages of utilizing a favorite icon are readily apparent when you see the numerous locations they are currently visible on the Internet.
Favicon Shown Next to Bookmarked Websites
Places a Webpage Favicon Appears
When webpage favicons first started appearing on the Internet they mostly were only visible next to the URL in the address bar. Today, webpage and blog favicons appear in a variety of locations on both browsers and social media such as Google+, making the task of adding a favicon to a website even more paramount.
Places a blog or webpage favicon is seen in browsers:
- Browser tabs
- Recent browser history
- Next to the URL in a browser's address bar
Just look at any open browser tabs, or do a quick scan of your recent browsing history and favorite/bookmarked sites, and it's readily apparent that these little icons provide instant brand recognition, thus making it a snap to return to a site.
Favicons Displayed in Recent Browser History
Favicons on Social Media
Places a webpage or blog favicon is seen on social media:
- Social media feeds
- Social media profiles
Many social media sites are great places to share links. While most social media feeds still do not show a webpage's favorite icon next to its link, some do, and quite possibly more will in the future. For now, Google+ is one of the bigger social media networks that displays favicons.
Google+ displays favicons:
- next to shared links on a user's feed, and
- next to other profiles or contributor-to sites entered on a profile page.
Favicons on the Google+ Feed
How to Add a Favicon to a Website or Blog
In general, adding a favorite icon to a website is a simple three step process:
- Make a favicon image
- Upload favicon to web server
- Add favicon HTML to website
For bloggers who may not have direct access to the HTML code, please refer to alternate instructions below.
1. Make a favicon image:
Image Size: A shortcut icon is most commonly displayed as 16x16 pixels so create an image this size.
File Name and Type: After making an icon it can be saved as .png, .gif, or .jpg. Using a free icon converter, the 16x16 image should be converted to .ico, and named favicon.ico. For more information about file format and browser compatibility, read "Favicon" on Wikipedia.
2. Upload favicon to web server:
Most major browsers automatically search a website's root directory for favicon.ico, so upload or FTP favicon.ico to the root directory. Without doing anything further, your shortcut icon will now be visible on most browsers. To ensure that it displays in every possible location, continue to the next step.
3. Add favicon HTML website:
Add the following code to the <head> section of a website, making sure to edit the example code's path/file name to your site and image file.
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
Easy to Add a Favicon to Blogger
How to Replace the Blogger Icon or Blogspot Icon with a Custom Favicon
Many of us are familiar with the orange Blogger or Blogspot icon. This icon can easily be replaced with a custom favicon, giving your blog its own brand identity and a certain level of professionalism.
- Create a 16x16 pixel shortcut icon and save it as favicon.ico (see steps 1 and 2 above).
- Login to the Blogger dashboard for your blog.
- Click on Layout. Near the top, left, click on Edit in the Favicon box.
- Upload favicon.ico and save.
Troubleshooting Tip: If you visit your blog and the standard Blogger icon is not replaced with your custom favicon, then do the following:
- Go to yourblog.blogspot.com/favicon.ico
- After your shortcut icon appears in the browser window, click the browser's reload or refresh button.
Add a Custom Shortcut Icon to Wordpress.com
How to Replace the Wordpress Icon with a Custom Favicon
Wordpress.com (the free version) allows users to upload their own favicon, or as they call it, a blavatar (blog + avatar).
- Login to the Wordpress.com dashboard for your blog.
- Go to Settings and then General.
- On the right side of the screen upload a favicon. A tool will allow you to resize the image to the recommended dimensions.
If you have a hosted domain on Wordpress.org, the method for how to add a custom favicon will vary by the theme being used. Here are directions for the popular Thesis theme.
- After logging into the Wordpress admin dashboard, go to Thesis and then Favicon Uploader. Browse for and upload your custom favicon.
- To ensure that the favorite icon is found by all browsers and other websites (like Google+), the favicon HTML needs to be added to the <head> section. To do this using the Thesis theme, go to Thesis, Site Options, and then Additional Scripts. Add the favicon HTML code listed previously in this article to the script box.
- Change the path name to the file to /favicon.ico. The forward slash indicates the root directory.
- Using FTP software or your web host's dashboard, FTP the actual favicon.ico image to the root directory.
Note: If you are unsure of how to upload an image to your root directory via FTP, then upload the image to your blog like all other images, get the URL for the image, and paste the URL to the image in the favicon HTML.
Does your site have a custom favicon?
If you have a blog or website, does it currently have its own custom favicon?
Adding a favicon to a website or blog is a simple way to build online brand recognition.
With just a few pixels and a little know-how, your website deserves this customized finishing touch.