Tutorials
by Rubie Tiburcio
Your favorite icon, also known as, Favicon, could be added to your website project.
What is a Favicon? This is the logo or symbol that is shown on your tab and when your web project is bookmarked by your user.
To add a Favicon to your site, you will first need to create a square .svg or .png format of the logo you want to use for your project. We recommend using at least 180px X 180px logo size.
Upload the image to your media gallery. Once the image is in your library, you can easily get the image URL by right-clicking on the image and Copy Image Address.
Follow the format and add these lines of code in your Sitecast project's metatags file:
<link rel="apple-touch-icon" sizes="180x180" href="https://res.cloudinary.com/YOUR_CLOUDINARY_CLOUD_NAME/image/upload/c_fill,h_180,w_180,b_rgb:fff,bo_20px_solid_white/YOUR_LOGO_FILENAME.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://res.cloudinary.com/YOUR_CLOUDINARY_CLOUD_NAME/image/upload/c_fill,h_32,w_32/YOUR_LOGO_FILENAME.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://res.cloudinary.com/YOUR_CLOUDINARY_CLOUD_NAME/image/upload/c_fill,h_16,w_16/YOUR_LOGO_FILENAME.png">
Replace the YOUR_CLOUDINARY_CLOUD_NAME with the right value as well as the YOUR_LOGO_FILENAME. Be careful with the extension you are using for each icon viewport. Also, you can customize the theme-color by replacing the color and content values.
If you use an .svg for your logo, these tags will allow you to get higher quality icons in some systems.
<link rel="mask-icon" href="https://res.cloudinary.com/YOUR_CLOUDINARY_CLOUD_NAME/image/upload/YOUR_LOGO_FILENAME.svg" color="#FFFFFF">
<link rel="icon" type="image/svg+xml" href="https://res.cloudinary.com/YOUR_CLOUDINARY_CLOUD_NAME/image/upload/YOUR_LOGO_FILENAME.svg">
<meta name="theme-color" content="#FFFFFF">
With a nice Favicon, your web project will look more professional and your users will be able to recognize your brand when they bookmark your app!
Ready to try it yourself and build something cool?
Get started »