"HTML5 e CSS3 - Módulo 2"
Favicon
"Curso em Vídeo"
This is the student's notebook of Ricardo Barros Becheli
"Curso em Vídeo"
This is the student's notebook of Ricardo Barros Becheli
<!DOCTYPE html>TitleHTML Semantic ElementsHead, header and headingParagraphFormatingEntitiesEmojisImagesFaviconMark the textHow to display codeQuotationsListsLinksResponsive imagesAudioVideo"A favicon is a small icon or collection of icons associated with a website, web page, or web application. It's displayed within the browser tabs and bookmarks bar". Favicon.io
"A favicon is used to help users visually identify websites, web pages, and web applications within browser tabs, bookmarks, shortcuts, and address bars more easily. It's important to have a favicon for your website for brand recognition so that your users can easily identify your site in their browser tabs and bookmarks". Favicon.io
Examples of favicon:
"The most common favicon formats are ICO, PNG, and SVG, but there are additional formats for specific browsers or devices. The ICO file format was developed by Microsoft and is the original file format for the favicon. The format is unique because it allows for multiple small images within the same file. This is advantageous because the small icons required for a favicon in ICO format (16x16, 32x32, and 48x48 pixels) can be scaled and optimized independently. At small dimensions you can't rely on the browser to automatically resize your icon in an optimal way. The ICO format is supported by all browsers and it's the only format that IE5 through IE10 supports". Favicon.io
"The PNG format is a nice format because it's a format that most people are used to and doesn't require any special tools to create. With modern screens being high resolution the original problem of small icon dimensions for small resolutions no longer exists. For browsers that support the PNG favicon format oftentimes the quality of the favicon displayed within the browser tab or bookmarks bar will be higher than the ICO format. The disadvantage of the PNG format is that it's not compatible with IE5 through IE10". Favicon.io
"The SVG format has benefits over the PNG and ICO formats, but doesn't have great browser support yet. SVG files (Scalable Vector Graphics) are very lightweight and, being a "vector" graphic, they are infinitely scalable. This means that image quality is superb without sacrificing load times for heavy images. Only Chrome, Firefox, and Opera support SVG format favicons". Favicon.io
In the head area of the HTML code you type link. One of the Emmet Abbreviations the assistant will suggest says link : favicon.
Delete whatever comes written in the "href" quotation marks and press ctrl+enter to choose your own favicon image from your project's folder (all this in the Visual Studio Code, of course).
And don't change anytinng else in this code line given by Emmet. (Those colors here are some "span" + "style" testing.)