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.
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.
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".
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.
Step 6. Open Weebly's HTML/CSS editor
Clickon "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.
You're done! Publish your site to see your new favicon!
Weebly Tricks is a third-party Weebly 'after market' site providing tutorials, apps, and widgets for Weebly sites. Weebly Tricks is not affiliated with Weebly, Inc in any manner. Not all tutorials work for every site and may require additional customizing. Always save your files before editing.