Generated package

Phoenix (Elixir) favicon package. Ready to install.

Download the correct Phoenix (Elixir) favicon package, place every file in the right location, and follow the exact installation steps for this stack.

Stack-specific filesExact snippet locationsCopy-ready guide
Backend9 files

Phoenix (Elixir)

For Phoenix apps. Files in priv/static are served from the web root.

ZIP: favico-phoenix-modern-package.zip

Folder: favico-phoenix-modern-favicon/

  1. 1
    Download your favicon package.
    Download favico-phoenix-modern-package.zip for Phoenix (Elixir).
  2. 2
    Extract this package in your project.
    Extract it in your project root. The package contains:
    Package structure
    favico-phoenix-modern-favicon/
├── priv/static/favicon.ico
├── priv/static/favicon.svg
├── priv/static/favicon-dark.svg
├── priv/static/favicon-96x96.png
├── priv/static/favicon-dark-96x96.png
├── priv/static/apple-touch-icon.png
├── priv/static/site.webmanifest
├── priv/static/web-app-manifest-192x192.png
└── priv/static/web-app-manifest-512x512.png
  3. 3
    Copy the favicon files to the correct location.
    Copy the generated files to priv/static/.
    Generated fileCopy toStatusPurpose
    favicon.icopriv/static/favicon.icoOptionalOptional classic browser fallback file. Keep it when useful, but do not link it by default in modern light/dark favicon snippets.
    favicon.svgpriv/static/favicon.svgRequiredLight-mode SVG favicon for modern browsers.
    favicon-dark.svgpriv/static/favicon-dark.svgOptionalDark-mode SVG favicon used with prefers-color-scheme: dark.
    favicon-96x96.pngpriv/static/favicon-96x96.pngRequiredLight-mode PNG fallback favicon.
    favicon-dark-96x96.pngpriv/static/favicon-dark-96x96.pngOptionalDark-mode PNG fallback favicon.
    apple-touch-icon.pngpriv/static/apple-touch-icon.pngRequirediPhone/iPad home screen icon.
    site.webmanifestpriv/static/site.webmanifestRequiredWeb app manifest containing app metadata and PWA icon references.
    web-app-manifest-192x192.pngpriv/static/web-app-manifest-192x192.pngRequired192×192 Android/PWA icon referenced by the web app manifest.
    web-app-manifest-512x512.pngpriv/static/web-app-manifest-512x512.pngRequired512×512 Android/PWA icon referenced by the web app manifest.
  4. 4
    Add the config snippet in lib/your_app_web.ex inside def static_paths.
    lib/your_app_web.ex inside def static_paths
    def static_paths,
  do: ~w(
    assets
    fonts
    images
    favicon.ico
    favicon.svg
    favicon-dark.svg
    favicon-96x96.png
    favicon-dark-96x96.png
    apple-touch-icon.png
    site.webmanifest
    web-app-manifest-192x192.png
    web-app-manifest-512x512.png
    robots.txt
  )
  5. 5
    Insert the favicon/head snippet in lib/your_app_web/components/layouts/root.html.heex inside <head>.
    lib/your_app_web/components/layouts/root.html.heex inside <head>
    <meta name="color-scheme" content="light dark" />

<link rel="icon" type="image/svg+xml" href={~p"/favicon.svg?v=10"} media="(prefers-color-scheme: light)" />
<link rel="icon" type="image/svg+xml" href={~p"/favicon-dark.svg?v=10"} media="(prefers-color-scheme: dark)" />

<link rel="icon" type="image/png" sizes="96x96" href={~p"/favicon-96x96.png?v=10"} media="(prefers-color-scheme: light)" />
<link rel="icon" type="image/png" sizes="96x96" href={~p"/favicon-dark-96x96.png?v=10"} media="(prefers-color-scheme: dark)" />

<link rel="apple-touch-icon" sizes="180x180" href={~p"/apple-touch-icon.png?v=10"} />
<link rel="manifest" href={~p"/site.webmanifest?v=10"} />
  6. 6
    Why this setup works.
    • Phoenix serves root static files only when they are listed in static_paths().
    • The HEEX snippet uses verified routes with ~p so paths are checked by Phoenix.

  7. Support Favico Studio

    Satisfied with the result?

    If Favico Studio helped you create your favicon faster, you can support the creator and help keep this tool free, fast, and available for everyone.

    ♥Support the creator→
  8. 7
    Start your app and verify the favicon URLs.
    Run command
    mix phx.server
    Verify URLs
    http://localhost:4000/favicon.svg
http://localhost:4000/favicon-dark.svg
http://localhost:4000/site.webmanifest
http://localhost:4000/web-app-manifest-192x192.png
http://localhost:4000/web-app-manifest-512x512.png
  9. 8
    Common mistakes to avoid.

    Forgetting static_paths

    Wrong: Only copy files to priv/static/

    Correct: Copy files and add every favicon file to def static_paths

    Without static_paths, Phoenix may not serve the root favicon and manifest files.

    Making favicon.ico the main favicon

    Wrong: <link rel="icon" href="/favicon.ico">

    Correct: Use SVG and PNG links with light/dark media queries.

    favicon.ico is included as an old-browser fallback, but actively linking it can override the modern light/dark setup.

  10. 9
    Final checklist.
    ✓ Correct stack selected.
    ✓ Correct package downloaded and extracted.
    ✓ Files copied to the exact folder shown in this guide.
    ✓ Config snippet added only when this stack requires it.
    ✓ Head/favicon snippet added to the exact head location shown in this guide.
    ✓ No /public/ or /static/ URL is used unless the framework explicitly requires it.
    ✓ favicon.ico is kept as fallback only, not actively linked as the main favicon.
    ✓ favicon.svg loads directly.
    ✓ favicon-dark.svg loads directly.
    ✓ site.webmanifest loads directly.
    ✓ Manifest icon PNG files load directly.
    ✓ Browser cache cleared and Favico Studio checker passes.