Use png as icon html

How to Add Image in the Title Bar

Most websites add an icon or image logo in the title bar. This icon logo is also called a favicon and can be useful for user engagement.

A favicon, also known as a URL icon, a tab icon, a shortcut icon, a website icon, or a bookmark icon, is a file containing one or more small icons associated with a particular website or web page.

You can let the browser detect your favicon or upload it to your hosting root area.

Let the browser finds the favicon!

One way, which is the easiest, is by uploading an icon as a .png or .ico file from your hosting’s File Manager. If you prepare your image in png or ico, you can upload it to your hosting area, and most modern browsers will automatically detect favicon.png and favicon.ico files from your host (naming matters here, it should be exactly favicon). So, you’ll need no coding.

The other way is by using the HTML link inside the head tag.

Let’s use HTML link tag:

/* it should be placed inside the head tag */ icon" type="image/png" href="path-to-your-favicon"/> 

If you use a different image format, implement the appropriate changes (read the next paragraph), and change the value of the href attribute to the path where your image is located in your project. The ICO format is not as reliable anymore, and it’s better to use png (to preserve transparency).

Depending on the favicon format, the type attribute must be changed:

• For PNG, use image/png.
• For GIF, use image/gif.
• For JPEG, use image/jpg.
• For ICO, use image/x-icon.
• For SVG, use image/svg+xml.

/* for gif files, for example, it should look like this: */ /* path-to-favicon should be changed to the location of your favicon file */ icon" type="image/gif" href="path-to-favicon">

A favicon must have the following characteristics:

• Favicon.ico is the default name.
• Size should be 16×16, 32×32, 48×48, 64×64 or 128×128 pixels.
• Color should be 8 bites, 24 bites or 32 bites.

There are a lot of online tools that will help you create a favicon, convert the image formats, etc., and you can find them by a simple search on Google, by the way.

The image must be square dimensioned in any image format (ico, jpg, BMP, gif, png) to appear in browsers properly. Images with non-square dimensions will also work. However, such icons may not look professional.

Example of adding an image in the title bar:

html> html> head> title>Title of the document title> link rel="icon" type="images/x-icon" href="https://www.w3docs.com/favicon.ico" /> head> body> h1>Hello from W3docs! h1> body> html>

If you take a look at the result of the above code, it should be something like this.

Different Platforms:

For different platforms, the favicon size should also be changed:

Platform	Name	Rel value	Favicon size
Google TV	favicon-96×96.png	icon	96×96
Ipad Retina, iOS 7 or later	apple-touch-icon-152×152-precomposed.png	apple-touch-icon-precomposed	152×152
Ipad Retina, iOS 6 or later	apple-touch-icon-144×144-precomposed.png	apple-touch-icon-precomposed	144×144
Ipad Min, first generation iOS 7 or later	apple-touch-icon-76×76-precomposed.png	apple-touch-icon-precomposed	76×76
Ipad Mini, first generation iOS 6 or previous	apple-touch-icon-72×72-precomposed.png	apple-touch-icon-precomposed	72×72
Iphone Retina, iOS 7 or later	apple-touch-icon-120×120-precomposed.png	apple-touch-icon-precomposed	120×120
Iphone Retina, iOS 6 or previous	apple-touch-icon-114×114-precomposed.png	apple-touch-icon-precomposed	114×114

Add it to your code in the following way:

 icon" href="/favicon.ico" type="image/x-icon"> icon" href="/favicon.png" sizes="32x32" type="image/png"> icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="152x152"> icon-precomposed" href="/apple-touch-icon-120x120-precomposed.png" type="image/png" sizes="120x120"> icon" href="/favicon-96x96.png" sizes="96x96" type="image/png">

Please note that you must change the href attribute value based on the location of your favicon file, either in your host or in your project folder if you’re working locally. And the naming matters; otherwise, the browser can not detect it.

In the end, it is worth noting that you can use this open-source link which is a cheat sheet for favicon and has valuable information that may help you along the way.

Источник

HTML Favicon

A favicon is a small image displayed next to the page title in the browser tab.

How To Add a Favicon in HTML

You can use any image you like as your favicon. You can also create your own favicon on sites like https://www.favicon.cc.

Tip: A favicon is a small image, so it should be a simple image with high contrast.

A favicon image is displayed to the left of the page title in the browser tab, like this:

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is «favicon.ico».

Next, add a element to your «index.html» file, after the element, like this:

Example

This is a Heading

This is a paragraph.

Now, save the «index.html» file and reload it in your browser. Your browser tab should now display your favicon image to the left of the page title.

Favicon File Format Support

The following table shows the file format support for a favicon image:

Browser	ICO	PNG	GIF	JPEG	SVG
Edge	Yes	Yes	Yes	Yes	Yes
Chrome	Yes	Yes	Yes	Yes	Yes
Firefox	Yes	Yes	Yes	Yes	Yes
Opera	Yes	Yes	Yes	Yes	Yes
Safari	Yes	Yes	Yes	Yes	Yes

Chapter Summary

HTML Link Tag

For a complete list of all available HTML tags, visit our HTML Tag 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!

Источник