Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Pure CSS icons for popular file extensions

colorswall/CSS-file-icons

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

…ource-1.1.1 Bump eventsource from 1.0.7 to 1.1.1

Git stats

Files

Failed to load latest commit information.

README.md

Pure CSS file icons for popular extensions lightweight css library

Include css-file-icons.css to html or install via npm

include css file css-file-icons.css from folder build

div class pl-s">fi fi-doc"> div class pl-s">fi-content">docdiv> div>

mp3, wav, aif, cda, mid, midi, mpa, mkv, ogg, wpa, wpl, 7z, zip, rar, tar.gz, pkg, z, csv, dat, json, xml, dat, db, dbf, sql, ns, 3ds, max, ai, psd, ttf, woff, woff2, png, bmp, jpg, jpeg, gif, tif, tiff, svg, rss, torrent, ppt, pps, pptx, odp, asp, c, cs, java, jsp, swift, php, hh, go, py, js, html, xhtml, css, vb, rb, scss, sass, less, jsx, sh, pl, xls, xlsx, xlsm, ods, dll, bak, ini, dmp, sys, cfg, tmp, icns, doc, docx, log, txt, pdf, avi, mov, mp4, mpg, mpeg, mkv, wmv, wps, exe.

.fi.fi-*extension* /* where *extension* = file extension. example: .fi.fi-doc */

.fi.fi-size-xs .fi.fi-size-sm // default .fi.fi-size-md .fi.fi-size-lg .fi.fi-size-xl

sm, md default border radius 0

@mixin fi-color($class, $color, $text_color:$file_icon_text_color)

@mixin fi-size($class, $width, $height, $arrow_h, $font_size)

This project exists thanks to all the people who contribute.

CSS file icons supports all modern browsers (Chrome, Firefox, Opera and Internet Exploer >= 9)

Thank you to all our backers! 🙏 [Become a backer]

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

About

Pure CSS icons for popular file extensions

Источник

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.

Источник

HTML Favicon

Favicon is the short form of a favorites icon, also termed a bookmark icon can be defined as a small logo with a .ico file extension, not with any other .bmp or .gif file usually seen in the address bar with a personalized image of the frequently visited URL, helps to an advertisement, promote or made as a standard trademark, meanwhile plays an essential aspect in the website like google, Facebook where we have noted a small logo in the left side of the address bar which gives a professional look as well as appears in the users favorites bookmarks and also without favicon icon the website remains generic web page icon and favors as the shortcut from the favorite’s icon.

Web development, programming languages, Software testing & others

The sample real-time example is shown below. Clicking favorites in the bookmark show typical icons. Even some Web services using XML and search engines use the favicon for their uniqueness.

The primary meta tag is given below to link to the web page.

In the above syntax, you replace the image path with the actual location of the favicon.ico, which you might place in an image directory. The last value type is a MIME format file. You can use any type of image here, but we consider the GIF format more advanced.

How to Create HTML Favicon?

A web designer creates their personalized icon and associates them with the web page. Browsers that support a favicon display it in their particular address bars, achieving this through two means. Secondly, it displays with the tabbed document interface in the next link. Even when selected from their hard drive, the favicon must, most importantly, use the (.ico) file format. There are a few free services that can convert the image.

Once a developer completes the design of a website, they add a favicon. Simply it replaces a blank document icon on the browser tab with an official web page icon. This enables a user to make a website more accessible or find a more accessible website. The most popular search engine, Google, impresses or identifies with the user through its logo theme. As the icon is too small, it should be clear for the user to understand. There are different methods to create a Favicon. Method 1 – automatic generation using File Manager, Method -2: Uploading a regular image.

Steps to create favicon.ico. It’s a straightforward landing process:

1. Generating an image with a size of 16 x 16 pixels (Recognition of an image). Here, you can resize the image to make it tiny for use as a favicon.
2. Make a conversion to a favicon.ico file format for the browser’s understanding.
3. Uploading a generated icon into the website.
4. The next step is adding the code to HTML. You can even use a favicon as a desktop or Apple icon.

How to Insert Favicon in HTML File?

You can also create the favicon with a transparent background, using either .gif or .png format. The question may arise why do we need a favicon? The answer is very simple: branding and marketing our website worldwide. The little icon makes a web page a little more professional. You add the favicon to an HTML file, which must have a particular characteristic. You can add or change the favicon on the website at any time.

• Standard Name with a File Format: Once an image is created and named, the default has a favicon.ico (ICO files done with X-ICON Editor).
• Size of an Image File:16 * 16, 64 * 64, 128 * 128 pixels, and files should not exceed 100KB.
• Colour: maybe 8 bites, 24 or 32 bites
• Image: Should be in gif or png format.

The favicon is placed between the element and replaces an image location. It uses a link tag that defines a link to the file. It makes use of two attributes, rel and href. We can use Photoshop with plugins and other online generators to convert an image file to .ico format.

Icon Location path: It’s a standard implementation.

 // It installs variety of icons. // here in the link attribute shortcut installs its own address bar icon.

The next code is used for IOS users:

         
EDUCBA Icon
 
Icon is added to the address bar
  

Code Explanation: I have created a small oval icon in the above code and converted it into a favicon. We note that an icon displays in Internet Explorer, but many browsers do not support it. IE takes the icon from the root directory. The HTML file displays a 404 error from the server response if no specified path exists. You’ll likely need to empty your website’s cache to update the favicon since web browsers persistently hold onto cached favicons.

Note: Although with the successful completion of the favicon creation, it is not visible in all the browser tabs. The good compatibility is with Internet Explorer 5.0+ and Netscape 7.0 +. Most modern browsers support different graphical formats as their favicon. The problem arises when a server is not well configured: It is necessary to create the root has type= “image/x-icon .ico format.

Conclusion

Coming to the end, the favicon logo plays a vital role in website development, and also, we have seen various methods in creating a favicon, thereby achieving compatibility in cross-browser. This icon helps in creating a visual specification with the domain name. Adding them to the website is easy as they guide site recognition and branding and support the web designer to mark their professionalism.

Recommended Articles

This is a guide to HTML Favicon. Here we discuss the definition, how to create and insert an HTML favicon, and a different example and its code implementation. You may also look at the following articles to learn more –

500+ Hours of HD Videos
15 Learning Paths
120+ Courses
Verifiable Certificate of Completion
Lifetime Access

1000+ Hours of HD Videos
43 Learning Paths
250+ Courses
Verifiable Certificate of Completion
Lifetime Access

1500+ Hour of HD Videos
80 Learning Paths
360+ Courses
Verifiable Certificate of Completion
Lifetime Access

3000+ Hours of HD Videos
149 Learning Paths
600+ Courses
Verifiable Certificate of Completion
Lifetime Access

All in One Software Development Bundle 3000+ Hours of HD Videos | 149 Learning Paths | 600+ Courses | Verifiable Certificate of Completion | Lifetime Access

Financial Analyst Masters Training Program 1000+ Hours of HD Videos | 43 Learning Paths | 250+ Courses | Verifiable Certificate of Completion | Lifetime Access

Источник