Favicons and touch icons – Web design tutorial

Articles

Favicons and touch icons – Web design tutorial


One of the most important finishing aspects
when publishing a website is how you represent your site in a browser’s UI. Favicons have been around since the stone
ages, and along with touch icons, they’re used by a lot of browsers for tabs and bookmarks—they
can even be used on an iPhone when we add our website to the home screen. When we’re prepping our image assets for
upload, you can create a 32×32 pixel version for your favicon, which will get used in most
classic desktop browsers…and you can prep another 256×256 pixel version for your touch
icon. This touch icon will be used in places like
Safari’s bookmarks and on mobile devices as well. Webflow will automatically configure the code,
but keep in mind that your filename — the filename you use in these image assets — might
still be visible in your HTML head, so just be careful not to include anything you might
regret there. Once you’re done prepping these image assets,
you can upload each file, and then when you’re done, you can publish your site for the changes
to go live. You may have to manually refresh your live
site in your browser to see the update. Your favicon and your touch icon are live
and ready to go.

Leave a Reply

Your email address will not be published. Required fields are marked *