Free forever, no sign-up - get your full favicon set now
Back to generator

Favicon by platform

Add a favicon on any platform

Pick your platform for the exact, step-by-step way to add a favicon - real menu paths, the files and sizes that platform reads, the common mistakes, and a one-click way to generate the whole set. Whatever you build with, the icons come from one source: your logo.

Every website builder and framework handles favicons a little differently - some give you a single upload field, others expect you to wire up <link> tags by hand. The guides below cover the real workflow for each one, so you spend a minute, not an afternoon.

Choose your platform

WordPressUse the Site Icon customizer, or upload a complete set for sharper results across every browser and device.ShopifyUpload it in the theme editor under Brand/Favicon, or add a custom set in theme.liquid for full control.WixSet it under Settings, Favicon - requires a Premium plan; upload a square image and publish.SquarespaceUpload a Browser Icon under Logo & Title - square image, 300x300 or larger, then save.WebflowSet the Favicon (32x32) and Webclip (256x256) in Project Settings, General, then publish.Next.jsUse file conventions (app/favicon.ico, icon.png, apple-icon.png) or explicit metadata icons.ReactPut icons in public/ and add the link tags to index.html (CRA) or root index.html (Vite).GhostUpload a square Publication icon under Settings, General - Ghost generates the favicon for you.FramerUpload a square Favicon in Site Settings, General, then publish your Framer site.NotionNotion alone can't set a favicon; publish via Super/Potion/Popsy to upload a real one.HTML (static site)Drop favicon.ico at the root and paste the modern <link> set into every page's <head>.VuePut icons in public/ and add the link tags to the root index.html - Vite serves public/ from /.AngularSwap src/favicon.ico, add icons to the angular.json assets array, link them in src/index.html.AstroReplace public/favicon.svg and add the icon link tags to your Layout.astro <head>.VitePut icons in public/ (copied to root, unhashed) and add the link tags to the root index.html.GatsbySet icon in gatsby-plugin-manifest; it generates icons + manifest and injects the link. Use static/ for favicon.ico.SvelteKitReplace the icons in static/ and add the link tags to src/app.html <head>.HugoPut icons in static/ and add the link tags to a head partial (layouts/partials/head.html).Eleventy (11ty)Copy icons with addPassthroughCopy in eleventy.config.js, link them in your base layout in _includes.LaravelPut icons in public/ (the web root) and link them in your Blade layout via asset().DjangoPut icons in app/static/, link with {% static %} in the base template, run collectstatic in production.
Free forever, no sign-up

Generate your full icon set free

Drop one logo into the generator and download favicon.ico, every PNG size, the Apple touch icon, Android, PWA, and maskable icons, plus the manifest and HTML snippet - all in your browser, nothing uploaded.

Open the generator

Related reading

Want the formats and markup explained first? Read the complete favicon guide, the icon size cheatsheet, or browse convert to favicon if you are starting from a specific file type.