Setting icon in html

How to add a browser tab icon (favicon) for a website?

I’ve been working on a website and I’d like to add a small icon to the browser tab. How can I do this in HTML and where in the code would I need to place it (e.g. header)? I have a .png logo file that I’d like to convert to an icon. Related: HTML set image on browser tab.

Upload the image (favicon.ico) with FTP (read our FTP tutorial) to the root section of your web site. The root section is the main file area, where you would store the index.html (index.asp, index.php, etc) file for your main page. davesite.com would be the root davesite.com/webstation would not be the root davesite.com/webstation/html isn’t root either This file, placed properly, will load as the default for your entire domain.

hit the enter key prematurely there — anyway thanks for the reply. Was just going to say the first part(which i pasted above) in the link you gave didn’t seem to work? However the second part worked perfectly — thank you

13 Answers 13

There are actually two ways to add a favicon to a website.

Simply add the following code to the element:

PNG favicons are supported by most browsers, except IE

Note that you don’t have to precede icon in rel attribute with shortcut anymore. From MDN Link types:

The shortcut link type is often seen before icon , but this link type is non-conforming, ignored and web authors must not use it anymore.

favicon.ico in the root directory

All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico unless you’ve specified a shortcut icon via .

So all you have to do is to make the /favicon.ico request to your website return your favicon. This option unfortunately doesn’t allow you to use a PNG icon.

If you want ALL icons automatically (including mobile, ‘add to homescreen’ icons, mobile bookmarks, iOS/Droid, desktop-tab, etc), ICO file generation, etc, as well as copy-pastable HTML code for said meta files, all with one click, you can use this handy tool (I am not affiliated) realfavicongenerator.net

1. Use a tool to convert your png to a ico file. You can search «favicon generator» and you can find many online tools.
2. Place the ico address in the head with a link -tag:

thanks! I followed the steps properly and it’s working really good on IE and Firefox, but for some reason it’s not working on Google Chrome, do I have to delete the cache? or what do I have to do from there?

The best one that I found is http://www.favicomatic.com/ I say best because it gave me the crispest favicon, and required no editing after their transformation. It will generate favicons at 16×16 and 32×32 and to quote them «Every damn size, sir!» Also, their site looks cool and is easy to use.

They also generate the html that you need to use for the files they generate.

I looked at the first 20 or so google results, and this was by far the best.

I wouldn’t put all of it in your head tag. I would only put in the tags needed to support the devices that you need to support. Honestly you can get by with a single

There are a number of different icons and even splash screens that you can set for various devices. This answer goes through how to support them all.

Here are some snippets I have used with relevant links to where I gathered the information. See my blog for more information and more information about the ASP.NET MVC Boilerplate project template with all this built in right out of the box (Including sample image files).

Add the following mark-up to your html head. The commented out sections are entirely optional. While the uncommented sections are recommended to cover all icon usages. Don’t be scared, most if it is comments to help you.

My browserconfig.xml file. Full explanation above.

My manifest.json file. Full explanation above.

A list of the files in the project (Note that the names of these files are important if you decide to put some of them at the root of your project to avoid using the above meta tags):

favicon.ico browserconfig.xml Content/Images/ android-chrome-144x144.png android-chrome-192x192.png android-chrome-36x36.png android-chrome-48x48.png android-chrome-72x72.png android-chrome-96x96.png apple-touch-icon.png apple-touch-icon-57x57.png apple-touch-icon-60x60.png apple-touch-icon-72x72.png apple-touch-icon-76x76.png apple-touch-icon-114x114.png apple-touch-icon-120x120.png apple-touch-icon-144x144.png apple-touch-icon-152x152.png apple-touch-icon-180x180.png apple-touch-icon-precomposed.png (180x180) favicon-16x16.png favicon-32x32.png favicon-96x96.png favicon-192x192.png manifest.json mstile-70x70.png mstile-144x144.png mstile-150x150.png mstile-310x150.png mstile-310x310.png apple-touch-startup-image-1536x2008.png apple-touch-startup-image-1496x2048.png apple-touch-startup-image-768x1004.png apple-touch-startup-image-748x1024.png apple-touch-startup-image-640x1096.png apple-touch-startup-image-640x920.png apple-touch-startup-image-320x460.png 

Total Overhead

If you take out the comments that’s 3KB of extra HTML, if you don’t support splash screens that’s 1.5KB. If you are using GZIP compression on your HTML content, which everyone should be doing these days, that leaves you with about 634 Bytes of overhead per request to support all platforms or 446 Bytes without splash screens. I personally think its worth it to support IOS, Android and Windows devices but its your choice, I’m just giving the options!

Side Note About The Current Web Icon/Splash Screen/Settings Situation

This situation with vendor specific icons, splash screens and special tags to control the web browser or pinned icons is ridiculous. In a perfect world we would all use a favicon.svg file which could look good at any size and could be placed at the root of the page. Only FireFox supports this at the time of writing (See CanIUse.com).

However, icons are not the only setting these days, there are several other vendor specific settings (shown above) but a favicon.svg file would cover most use cases.

Updated to include the new Android/Chrome version M39+ favicon/theming options. Interestingly, they have gone with a similar approach to Microsoft but are using a JSON file instead of XML.

Источник

Icons Tutorial

To insert an icon, add the name of the icon class to any inline HTML element.

The and elements are widely used to add icons.

All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)

Font Awesome 5 Icons

To use the Free Font Awesome 5 icons, go to fontawesome.com and sign in to get a code to use in your web pages.

Read more about how to get started with Font Awesome in our Font Awesome 5 chapter.

Note: No downloading or installation is required!

Example

Font Awesome 4 Icons

To use the Font Awesome 4 icons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

Bootstrap 3 Icons

To use the Bootstrap 3 glyphicons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

Note: Glyphicons are not supported in Bootstrap 4.

For more information about Bootstrap 3 and Glyphicons, visit our Bootstrap 3 Tutorial.

Google Icons

To use the Google icons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

cloud
favorite
attachment
computer
traffic

For a complete list of ALL icons (font awesome, bootstrap and google), visit the Icon Reference.

Источник

4 Easy Ways to Add Icons In HTML CSS (Simple Examples)

Welcome to a beginner’s tutorial on how to add icons in HTML and CSS. Need to add some icons to your website? Make the contents a little easier to navigate?

There are various ways to add icons in HTML and CSS:

1. The easiest way is to use HTML symbols, simply copy-and-paste the respective HTML entity code. For example, ★ represents a star symbol.
2. Download icons images from websites such as FlatIcon, and use them as-it-is. E.G.
3. Use a set of font icons, such as Webdings. E.G.

   ABC

4. Lastly, load and use icon libraries such as Font Awesome and Material Icons.

But just how are these done exactly? Let us walk through some examples in this guide – Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

TABLE OF CONTENTS

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

ADDING HTML CSS ICONS

All right, let us now get into the various methods on how to add icons in HTML and CSS.

METHOD 1) HTML SYMBOLS

★ STAR!
 
☂ Weather report.
 
☃ Do you want to build a snowman?
 
☻ Happy face.

What kind of sorcery is this? Well, these are HTML symbols, and there are a ton of these – Everything from arrows, to symbols, to currencies, to smilies, and more. The best part is that they are baked straight into native HTML, and we don’t need to load 3rd party frameworks for these to work.

The usage is very simple, just define &#NUMBER; and it will “translate” into the respective HTML symbol. I will leave a link to the complete reference in the extras section below. Also, these symbols are treated just like text, we can control the size using font-size , even apply font-weight and text-decoration on it.

METHOD 2) ICON IMAGES

2A) FLAT IMAGE ICON

 So call me maybe?

So call me maybe?

This should be “Captain Obvious”, just insert an image icon. Do a search for “free icons” or “free clipart”, they are all over the Internet.

2B) IMAGE FONT SET

Following up on the above image icon method, it is inefficient to use one icon per image. This is the smarter way where we combine all the icons into one single image, but it requires a little bit of CSS to work.

 .ico < display: inline-block; width: 32px; height: 30px; background-image: url('icon-set.png'); background-repeat: no-repeat; >.ico-screen < background-position: 0 0; >.ico-phone < background-position: -32px 0; >.ico-pc < background-position: -64px 0; >.ico-tablet < background-position: 0 -31px; >.ico-camera Screen Phone PC Tablet Camera

That’s right. All we are doing here is to use the icon set as the background image, then “map” them using background-position .

METHOD 3) ICON FONT SET

 @font-face < font-family: Heydings; src: url(heydings_icons.ttf); >.icon  

Fonts usually contain alphabets, but there are some interesting ones that are sets of icons instead – All we have to do is to find these sets of icons, include them using CSS @font-face , then use it just as usual.

I will leave links to free font websites in the extras section below, just do a font search for “icons”, and there will be plenty more. But please do take care that not all fonts are “fully free”… Some are free for personal use, but not for commercial use.

METHOD 4) ICON LIBRARIES

4A) FONT AWESOME

• Load the Font Awesome library from the CDN. There are a lot of versions… If unsure, just load all.min.css which contains everything.
• To insert an icon, use the tag, and give it a CSS class=»fa fa-ICON» – Check out the Font Awesome Gallery for the full list of available icons.

Of course, if you somehow need even more icons, there are also paid plans on Font Awesome.

4B) MATERIAL ICONS

Material Icons is another set of popular free icons, which you may find very familiar… Because it’s by Google. Check out their page on Google Fonts for the full list of icons.

EXTRA BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

WHICH IS THE BEST METHOD?

• I personally prefer HTML symbols when it comes to small projects, as it is the most lightweight option. But take note that some symbols will not show up properly on the older browsers, you will not want to use this if backward compatibility is an issue.
• Images are the safest and will always work, but they add to the loading time bloat.
• Font Awesome and Google Material Icons are also pretty safe options but they bloat the loading time as well.
• Loading fonts are kind of meh.

LINKS & REFERENCES

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Источник