{
"id": 10983661,
"title": "How to Make a Favicon for Your Website (Sizes, Formats, and HTML)",
"url": "https://urgent.news/2026/09/30/how-to-make-a-favicon-for-your-website-sizes-formats-and-html",
"topic": "tech",
"section": "Tech",
"published": "2026-09-30T16:30:00.000Z",
"source": {
"name": "Dev.to",
"slug": "dev-to",
"url": "https://dev.to/pulkitgovrani/how-to-make-a-favicon-for-your-website-sizes-formats-and-html-6kk"
},
"original_language": "en",
"account": "A favicon is the tiny icon that appears in browser tabs, bookmarks, and search results. It's notably the icon people see when bookmarking a website or adding it to their home screen. Missing or improperly sized favicons can give the impression of an incomplete site. Creating a favicon today is simpler than before. The key files to generate are favicon.ico, containing 16, 32, and 48 pixel images; icon.svg, a scalable version supported by modern browsers; apple-touch-icon.png, 180x180 pixels, utilized when adding the site to an iPhone or iPad home screen; and icon-192.png and icon-512.png, used by Android and progressive web apps via the web manifest.\n\nBegin with a simple, bold shape for your favicon, as intricate designs may not display well in smaller sizes. Use a square source image of at least 512 by 512 pixels. Include a bit of padding for the touch icon, as iOS applies rounded corners. Ensure the favicon remains readable on both light and dark tab bars.\n\nTo add a favicon to your site, insert the following HTML code:\n\n```html\n\n\n\n\n```\n\nRemember, updating favicons requires a hard refresh or changing the file name to ensure browsers fetch the new version.\n\nGenerators exist that create all necessary versions from a single source image, which is preferable to uploading your logo to a third party. SVG favicons, supported by modern browsers, maintain sharpness at any size; however, an ICO fallback is advisable for older browsers. If your new favicon isn't showing, it may be due to heavy caching by browsers. Try using a private window, clearing the cache, or renaming the file and updating the link. Finally, favicon files should be placed in the root directory of your site (yoursite.com/favicon.ico) and referenced in the head of your HTML document.",
"summary": "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. The files to create favicon.ico containing 16, 32, and 48 pixel images: the classic file, still requested by many…",
"key_points": [
"Favicon is tiny icon in browser tabs and bookmarks",
"Create favicon.ico, icon.svg, apple-touch-icon.png, icon-192.png, and icon-512.png",
"Add favicon HTML code to site's head for visibility"
],
"editors_take": null,
"illustration": null,
"coverage": {
"outlets": 1,
"also_reported_by": []
},
"ai_generated": true,
"disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}