Spots

How to Make a Favicon for Your Website (Sizes, Formats, and HTML)

A favicon is the small icon in a browser tab, bookmark list, and search result. It is also the icon people see when they add your site to their home screen. A missing one looks unfinished, and getting all the sizes right used to be fiddly. Here is what you actually need today. favicon.ico containing 16, 32, and 48 pixel images: the classic file, still requested by many browsers and tools. icon.svg: a scalable version supported by modern browsers, which can even adapt to dark mode. apple-touch-icon.png at 180 by 180 pixels: used when someone adds your site to an iPhone or iPad home screen. icon-192.png and icon-512.png: used by Android and progressive web apps through the web manifest. Start from a simple, bold shape. Tiny sizes can't show detail or long text. Use a square source image at least 512 by 512 pixels. Keep a little padding for the touch icon; iOS applies rounded corners.

Make sure it is readable on both light

Make sure it is readable on both light and dark tab bars. The manifest lists the 192 and 512 pixel icons so Android and installable web apps can use them. Open your site in a private window to avoid cached icons. Check the tab, a bookmark, and a mobile home-screen shortcut. Browsers cache favicons aggressively; a hard refresh or changed filename helps when updating.

Generate them all at once A favicon generator

Generate them all at once A favicon generator takes one source image and produces every size plus a snippet to paste into your HTML. Choose one that runs locally so your logo isn't uploaded. Generate them all at once

A favicon generator takes one source image and

A favicon generator takes one source image and produces every size plus a snippet to paste into your HTML. Choose one that runs locally so your logo isn't uploaded. Frequently asked questions What size should a favicon be?

Provide 16, 32, and 48 pixels in an

Provide 16, 32, and 48 pixels in an ICO file, a 180 pixel Apple touch icon, and 192 and 512 pixel PNGs for Android and web apps. Can I use an SVG favicon? Yes. Modern browsers support SVG favicons, which stay sharp at any size. Keep an ICO fallback for older ones. Why isn't my new favicon showing? Browsers cache favicons heavily. Try a private window, clear the cache, or rename the file and update the link. Where do I put favicon.ico? In the root of your site (yoursite.com/favicon.ico), where browsers look by default, and reference it in the head. Try it: Favicon Generator — free, runs in your browser, nothing is uploaded. Originally published at ilovekit.app. For further actions, you may consider blocking this person and/or reporting abuse

News

How to Make a Favicon for Your Website (Sizes, Formats, and HTML)

A favicon is the small icon in a browser tab, bookmark list, and search result.

@spots #dev
Source: Dev.to
See more like this