
Save separate versions of your favicon, so you don't lose the work you've done.If you want to cover all your bases you can create versions of your favicon in each of these sizes.Some other favicon sizes include 57x57px for the standard iOS home screen, 72x72px for the iPad, 96x96px for Google TV, 128x128px for the Chrome Web Store and 195x195px for the Opera Speed Dial.
Next, add a element to your 'index.A common name for a favicon image is 'favicon.ico'. It's important to note that different hardware and software utilizes different favicon sizes. A favicon image is displayed to the left of the page title in the browser tab, like this: To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder.Think about the platforms that your website or application is most likely going to be used on and then create a favicon to cover all your bases. If it is unreadable or not aesthetically pleasing, start over on your original design. X Research source After you create your favicon in a larger format, it's important to reduce its size so you can see how it will look in people's browsers. 32x32 px is the size of Windows desktop items while 16x16 px is the size of favicons in your browser's tab. It should be named favicon.ico for best results, as many modern browsers will look for this file automatically.Resize and save your favicon. However there are some browsers that don't so it is a good idea to add the code to the _header.html for the browsers that don't. Some modern browsers automatically look for favicon.ico in your main directory. You must create and upload a favicon.ico to your main directory(/favicon.ico. Save changes and re-upload over-writting the original. (if so replace the part with your actual site/domain name) Or you may even need to include the full path like: You will need to update the code above for the _header.html accordingly such as: If yours isn't in your main directory, such as a subfolder/directory instead like: Original _header.html looks something like: Must be in the tags, after the meta name keywords is a good spot.įirst backup the original file /templates/base/_header.html just in case.

You can probably find a nice one someone has already created if you want to save yourself some time. otherwise just search google for favcon.ico for a ton of free creators and tools. Here is just one example of a site that you can create one at:


Check out our step-by-step guide and get a favicon set up in minutes. First you will need to create a favicon.ico or download one from some where. If you're serious about branding, never forget to add a favicon to your website.
