What is a Favicon, you might ask! To quote parts from Wilkipedia:
A favicon ( short for favorites icon), also known as a shortcut icon, Web site icon, URL icon, or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks.[3] Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as desktop icon.
In even simplier terms, a favicon is the little icon that appears up at your Address Bar of your browser (Internet Explorer, FoxFire, Safari, Opera, etc.).
Any image can become a favicon if it meets the proper criteria and is saved in the correct place.
To prepare the image to be saved as favicon.ico:
- The image should be a square image = same height as its width.
- The size of the the image needs to be 16 x 16 pixels.
- The name of the file needs to be favicon.ico
If your image is not 16×16 (who in reality will have a normal picture that size???) you can resize it using something like PhotoShop, Preview, or you can visit picresize.com and do it online.
Once you have your 16×16 pixel file named, favicon.ico, save it on your hosting server in the root directory of your website (http://YourWebsite.com/favicon.ico). This can be done via the File Manager of your hosting company of with an FTP program.
Extra note: if you REALLY want to be thorough and ensure that your favicon will be displayed on older browsers, here is some advice straight from WordPres.org:
In order for your favicon to show up in some older browsers, you will need to edit your page header.
- Go to your WordPress Administration Panel.
- Click on Design (called Presentation in WordPress 2.3.x and below, and Appearance in WordPress 2.7+).
- Click on Theme Editor.
- Select the file called Header or header.php to edit the file.
- Search for the line of code that begins with <link rel="shortcut icon" and ends with /favicon.ico" />. Overwrite it, if it exists, or add the following code below the <head>HTML tag.
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" /> - Save the changes.
To see your new favicon, clear your browser’s cache. You may need to restart your browser in order to see the new favicon.
Awesome sharing, my friend! Paul, you’re a geek plus a good teacher, a rare find… it finally helped me learn how to do a favicon which is a missing piece of my knowledge. Thanks and keep sharing 🙂
Thank you for the compliment, Roger! That means a lot coming from you.
Now, if we can get you an gravatar… Did you read how to do that? Check out: https://digitalmaestro.com/gravatars-and-wordpress/
I wish I was taking this course when I first started my blog because this post would of saved me a lot of time!
It is never to late to learn! I was actually teaching at NAMS when I learned something new!