Next.js Discord

Discord Forum

Next.js icon.tsx issue

Answered
Toa Tahu posted this in #help-forum
Open in Discord
Toa TahuOP
I was trying to generate icon by using typescript.

import { ImageResponse } from "next/og"

export const size = {
  width: 32,
  height: 32,
}

export const contentType = "image/png"

export default function icon() {
  return new ImageResponse(
    <div
      style={{
        fontSize: 24,
        background: "black",
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        color: "white",
      }}
    >
      AB
    </div>,
    {
      ...size,
    },
  )
}


But it's not working on myside.
My next.js version is 16.2.4.
Answered by Jboncz
export const config = {
  // Skip all paths that should not be internationalized
  matcher: ['/((?!api|trpc|_next|_vercel|icon|.*\\..*).*)'
};
View full answer

51 Replies

Jboncz
Did you import properly into your meta data in your root layout?
Toa TahuOP
What should I import on my root layout?
Jboncz
Sorry my mistake. 

import { ImageResponse } from "next/og"

export const size = {
  width: 32,
  height: 32,
}

export const contentType = "image/png"

export default function Icon() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 24,
          background: "black",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "white",
          borderRadius: 4,
        }}
      >
        AB
      </div>
    ),
    {
      ...size,
    }
  )
}


icon.jsx needs to but in the root /app folder
Toa TahuOP
Yep, exactly.
I put icon.tsx inside /app directory.
Jboncz
are you viewing on a mac?
Toa TahuOP
No, I am not using mac
Jboncz
Okay. hmmmm
Is your browser caching it? Can you use Edge or a browser you dont typically use?
Toa TahuOP
I can't see it on the other browsers too.
Jboncz
Is it showing the vercel icon?
Toa TahuOP
No, it's showing default chrome icon.
GET http://localhost:3000/icon?db5a07eaf10b4cc4 404 (Not Found)
I am facing this issue too
Jboncz
Do you have the server running in dev?
npm run dev or npm run start
Toa TahuOP
<link rel="icon" href="/icon?db5a07eaf10b4cc4" type="image/png" sizes="32x32">
Yep, I tried both of them.
Jboncz
Bruh
The icons file is for favorites
You shouldnt do it like this
<link rel="icon" href="/icon?db5a07eaf10b4cc4" type="image/png" sizes="32x32">
Where are you putting this?
Im confused on what your trying to acheive here
Toa TahuOP
It's generated automatically from icon.tsx
My goal is to generate icon from the typescript file
Jboncz
export function Logo({ size = 32, className = "" }) {
  return (
    <div
      className={`flex items-center justify-center bg-black text-white rounded ${className}`}
      style={{
        width: size,
        height: size,
        fontSize: size * 0.75,
      }}
    >
      AB
    </div>
  )
}
import Link from "next/link"
import { Logo } from "@/components/logo"

<Link href="/">
  <Logo size={32} />
</Link>
I am following above guideline
Jboncz
I can only tell you the way I would do it
Toa TahuOP
I don't need a logo.
Jboncz
Thats just the name of the component
Toa TahuOP
I am going to set website app icon by using typescript.
Jboncz
Updates in real time when I make a change to the file.
No issues.
If your using typescript the file should be icon.tsx
Toa TahuOP
The problem is that I am using next-intl
@Jboncz is there any idea?
Jboncz
Ahhhh.
That probably changes things.
Hmmm
Can you share your middleware or proxy file?
Toa TahuOP
import createMiddleware from "next-intl/middleware"

import { routing } from "./i18n/routing"

export default createMiddleware(routing)

export const config = {
  // Match all pathnames except for
  // - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
  // - … the ones containing a dot (e.g. `favicon.ico`)
  matcher: "/((?!api|trpc|_next|_vercel|.*\\..*).*)",
}
Jboncz
export const config = {
  // Skip all paths that should not be internationalized
  matcher: ['/((?!api|trpc|_next|_vercel|icon|.*\\..*).*)'
};
Answer
Jboncz
Try that
Its trying to internationalize your icon route.
which is no bueno
Toa TahuOP
Ahh, it's working.
Thank you.
Jboncz
Np please close this thread