In Lab 11 we worked with inserting our favicon into the address bar of our webpage about favicons. The first thing we did was duplicate the files for Lab 9, the lab dealing with internal CSS, and change the names to fit Lab 11. In the code some relative paths needed to be changed to adjust to the change in nomenclature. After that what we did was pretty simple, really only one new line of code was added between the <head> tags. This was a <link> tag that allowed for our favicon to be displayed in the address bar. The formatting of the link tag was quite simple, following the format that we used to link our Lab 10 HTML file to its CSS file. The rel was "icon", the type was "img/png" though this is subject to change based on the file type of the favicon, and the href was the relative path to the favicon file. There was one attribute that was new to adding favicons though, sizes. In the sizes attribute we specify the size of the favicon it is already or we want it to adjust to. For example, if I had a favicon image file that was larger than 28 x 28 px I would specify the size to be smaller than that, such as 16 x 16 px. After closing this tag and uploading the favicon appeared in the address bar.
These skills are important for a web designer because in the modern day it's an unofficial requirement for websites to have a favicon to distinguish themselves. Favicons are a simplified visual representation of a website. Being able to identify a site, or it's company, help the user experience since the user doesn't have to waste time figuring out where a link or tab will take them while swifting through bookmarks or switching tabs respectively. Favicons not only come down to the visuals but their actual insertion since you can have a finished product but it's no good if you can't use it properly. Knowing how to insert favicons allow you to properly utilize them in creating an optimal user experience.
Comments
Post a Comment