🪴 Quartz 4.0

Search

SearchSearch

React - Metadata Files for Images

May 20, 20244 min read

React Metadata Files for Images

Sources: 

title: ## Contents 
style: nestedList # TOC style (nestedList|inlineFirstLevel)
minLevel: 1 # Include headings from the specified level
maxLevel: 4 # Include headings up to the specified level
includeLinks: true # Make headings clickable
debugInConsole: false # Print debug info in Obsidian console

Overview

About

This note is about …

  • Favicons
  • Icons
  • Apple-Icons
  • Open-Graph and Twitter Images
  • Sitemap.xml
  • Robots.txt
  • Manifest.json

Images (Favicons, Icons, etc.)

The favicon, icon, and apple-icon file conventions allow one to set icons for the application.

They are useful for adding app icons that appear in places like web browser tabs, phone home screens, and search engine results.

There are two ways to set app icons:

Image Files

Use an image file to set an app icon by placing a favicon, icon, or apple-icon image file within your /app directory. The favicon image can only be located in the top level of app/.

Next.js will evaluate the file and automatically add the appropriate tags to your app’s <head> element.

File conventionSupported file typesValid locations
favicon.icoapp/
icon.ico, .jpg, .jpeg, .png, .svgapp/**/*
apple-icon.jpg, .jpeg, .pngapp/**/*

Favicon

Add a favicon.ico image file to the root /app route segment.

<!-- <head> output -->
<link rel="icon" href="/favicon.ico" sizes="any" />

App Icons

Add an icon.(ico|jpg|jpeg|png|svg) image file.

<link  rel="icon"  href="/icon?<generated>"  type="image/<generated>"  sizes="<generated>"/>

Apple Icons

Add an apple-icon.(jpg|jpeg|png) image file.

<link rel="apple-touch-icon"  href="/apple-icon?<generated>"  type="image/<generated>"  sizes="<generated>"/>

Good to know

  • You can set multiple icons by adding a number suffix to the file name. For example, icon1.png, icon2.png, etc. Numbered files will sort lexically.
  • Favicons can only be set in the root /app segment. If you need more granularity, you can use icon.
  • The appropriate <link> tags and attributes such as rel, href, type, and sizes are determined by the icon type and metadata of the evaluated file.
    • For example, a 32 by 32px .png file will have type="image/png" and sizes="32x32" attributes.
  • sizes="any" is added to favicon.ico output to avoid a browser bug where an .ico icon is favored over .svg.

Generate Icons using Code

In addition to using literal image files, you can programmatically generate icons using code.

Generate an app icon by creating an icon or apple-icon route that default exports a function.

File conventionSupported file types
icon.js, .ts, .tsx
apple-icon.js, .ts, .tsx
import { ImageResponse } from 'next/og'
 
// Image metadata
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'
 
// Image generation
export default function Icon() {
  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // ImageResponse options
    {
      // For convenience, we can re-use the exported icons size metadata
      // config to also set the ImageResponse's width and height.
      ...size,
    }
  )
}
<link rel="icon" href="/icon?<generated>" type="image/png" sizes="32x32" />

Good to Know:

Props

The default export function receives the following props:

Params (optional)

An object containing the dynamic route parameters object from the root segment down to the segment icon or apple-icon is colocated in.

// app/shop/[slug]/icon.tsx
export default function Icon({ params }: { params: { slug: string } }) {  // ...}
RouteURLparams
app/shop/icon.js/shopundefined
app/shop/[slug]/icon.js/shop/1{ slug: '1' }
app/shop/[tag]/[item]/icon.js/shop/1/2{ tag: '1', item: '2' }
app/shop/[...slug]/icon.js/shop/1/2{ slug: ['1', '2'] }

Returns

The default export function should return a Blob | ArrayBuffer | TypedArray | DataView | ReadableStream | Response.

Good to know: ImageResponse satisfies this return type.

Config Exports

You can optionally configure the icon’s metadata by exporting size and contentType variables from the icon or apple-icon route.

OptionType
size{ width: number; height: number }
contentTypestring - image MIME type

size

icon.tsx | apple-icon.tsx

export const size = { width: 32, height: 32 } export default function Icon() {}
<link rel="icon" sizes="32x32" />

contentType

export const contentType = 'image/png' export default function Icon() {}
<link rel="icon" type="image/png" />

Route Segment Config

icon and apple-icon are specialized Route Handlers that can use the same route segment configuration options as Pages and Layouts.

See Also

Appendix

Note created on 2024-05-09 and last modified on 2024-05-09.

LIST FROM [[React - Metadata Files]] AND -"CHANGELOG" AND -"04-RESOURCES/Code/React/React - Metadata Files"

(c) No Clocks, LLC | 2024

Graph View

Backlinks