Member Avatar for Wakesta

How do you create the icons that appear within the Internet windo tab, I have attached an example as I would like to create one for my website

  • 4 Contributors
  • 3 Replies
  • 107 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by Flexor123
javaProgrammar commented: I also wanted to know this. +0

Dani AI

Generated

As and pointed out, that small tab image is a site icon. Building on those answers, here are up-to-date, practical points that matter today and avoid common pitfalls.

Design and export workflow: design the artwork at a large size (for example 512x512) and reduce it to simple, high-contrast shapes so it remains readable when tiny. Produce multiple raster sizes (48, 96, 192, 512) and a monochrome SVG for Safari pinned tabs if you need that effect. Create an ICO container that holds several sizes for legacy browsers, but also provide PNG/SVG assets for modern browsers and touch icons for mobile platforms. Test the result at actual small sizes to confirm the silhouette still works.

Deployment and troubleshooting: include platform-specific assets (apple-touch-icon, manifest icons) and keep a root-level fallback file named favicon.ico for older agents. Ensure the server serves the files with the correct MIME type and be prepared for aggressive browser caching — to force an update change the filename or add a version query string. If something does not appear, verify the file path, MIME type, and clear the browser cache or restart the browser. Tools that package all sizes and generate the correct markup are helpful and save time. For reference and testing tools see RealFaviconGenerator and the MDN overview on favicons: RealFaviconGenerator MDN Favicon.

Recommended Answers

All 3 Replies

Member Avatar for GioChaos

What your wanting is a webpage/ tab icon.

You need to create/ find an image. That is (16px x 16px)

if you create it, make sure to save it as an ".ico" image.

Then place this code, in the header of your script :

<link rel="shortcut icon" href="">

of course, you would replace "YourDirectImageLink.ico" With the actual image.

Edited by GioChaos because: n/a
Member Avatar for powersstuff

You want a favicon. Just google "favicon" and there are free generators. Start with a completely square image 32px. Upload your image and then press the submit button. It will give you a file to download. Upload that to your server and be sure to create a link to the .ico file in the head of your index page.

Member Avatar for Flexor123

FAVICON.CC

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.