Tutorial Stats
How To Add A Favicon To Your Weebly Site
Tutorial Description
This tutorial will show you how to add a favicon to your Weebly site. A favicon is your brand's trademark icon most notably displayed in the web address bar or next to your site's page title at the top of a browser. The purpose of a favicon is to help visitors easily identify your website when many tabs are open -- or when it's pinned to a mobile desktop -- and also adds a level of professionalism to your website.
With the many different browsers and media platforms available these days, a favicon for just the desktop browser simply won't do. This tutorial will also show you how to have your favicon cover all browsers and media platforms.
One example is saving a website to the desktop on your mobile phone. The icon that appears will be one of a few favicons that are needed for cross-browser and media platform coverage.
With the many different browsers and media platforms available these days, a favicon for just the desktop browser simply won't do. This tutorial will also show you how to have your favicon cover all browsers and media platforms.
One example is saving a website to the desktop on your mobile phone. The icon that appears will be one of a few favicons that are needed for cross-browser and media platform coverage.
SHOW MORE
Tutorial
Step 1. upload your favicon
Go to realfavicongenerator.net and upload a 500x500 favicon picture.
Step 2. Change some settings (optional)
Once this page appears after you've uploaded your favicon picture, scroll down to "Windows Metro>Assets" and check off the box "Medium, square icon, declared with two HTML markups".
Note: If you don't perform this step, your favicon will not show when Windows 8 and 10 users choose to pin your website to their desktop -- it would appear like a native Windows app.
Note: If you don't perform this step, your favicon will not show when Windows 8 and 10 users choose to pin your website to their desktop -- it would appear like a native Windows app.
Step 3. set favicon file path
While still on the same page, scroll down to "Favicon Generator Options>Path" and check off the box "I cannot or I do not want to place favicon files at the root of my website. I will place them here:".
Now add "/files/theme/favicon/" to the input box below and click "Generate your Favicons and HTML code".
Now add "/files/theme/favicon/" to the input box below and click "Generate your Favicons and HTML code".
Step 4. download favicon file and copy HTML code
Once the next page appears, click the "Favicon package" button to download your favicon's ".ZIP" folder and copy the HTML code provided.
Step 5. Add HTML code
Head back to the Weebly editor, and at top, click on "Settings>SEO>" and paste the HTML code you copied from the previous step into the "Header Code" section.
Click save.
Click save.
Step 6. Open Weebly's HTML/CSS editor
Click on "THEME" at the top, then click on "Edit HTML/CSS" on the left.
Step 7. create folder
On the left, under "ASSETS", click the "+" icon and select "New Folder". Name this folder "favicon".
Step 8. upload favicon
Now click on the "+" icon of the "favicon" folder and select "Upload File(s)...". Locate the ".ZIP" folder you downloaded from Step 4, extract it, and then upload every file within the ".ZIP" file to your Weebly site.
Click save.
Click save.
You're done! Publish your site to see your new favicon!
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
