Next.js Discord

Discord Forum

SEO

Answered
Eastern Kingbird posted this in #help-forum
Open in Discord
Eastern KingbirdOP
How to get your favicon as a logo on google search?
Answered by B33fb0n3
remove this part (see attached) and put your favicon.ico inside your app/ folder. Do you see the correct image now, when you start your app in dev mode?

--- Edit
After that do this: https://nextjs-forum.com/post/1329183609755668521#message-1329460810161848391
View full answer

21 Replies

@Eastern Kingbird How to get your favicon as a logo on google search?
B33fb0n3
you just set the favicon and let google recrawl your website. Then it should be displayed directly there
Eastern KingbirdOP
I have set a favicon and, have recrawl my site
@Eastern Kingbird I have set a favicon and, have recrawl my site
B33fb0n3
can you share your page and maybe an image from the whole google result and explain further which image you would like to change?
Eastern KingbirdOP
export const metadata = {
title: {
template: '%s | AUN',
default: 'AUN | Solomon François',
},
description: 'Portfolio van Solomon François',
icons: {
icon: '/favicon.ico',
apple: '/apple-touch-icon.png',
},
manifest: '/site.webmanifest',
openGraph: {
template: '%s | AUN',
default: 'AUN | Solomon François',
description: 'Portfolio van Solomon François',
url: 'https://aundevelopment.dev',
siteName: 'AUN Development',
images: [
{
url: 'https://aundevelopment.dev/apple-touch-icon.png',
width: 48,
height: 48,
alt: 'AUN Development Logo',
},
],
locale: 'nl_BE',
type: 'website',
},
keywords: [ 'Full Stack Developer',
'Web Developer',
'Frontend Developer',
'React Developer',
'Next.js Developer',
'TypeScript',
'JavaScript',
'België',
'Webontwikkelaar',
'Freelance Developer',
'Web Development',
'Solomon François'
]
}

<head>
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="theme-color" content="#EB3012" />
<meta property="og:image" content="https://aundevelopment.dev/apple-touch-icon.png" />
<meta property="og:image:width" content="48" />
<meta property="og:image:height" content="48" />
<meta property="og:image:alt" content="Logo AUN Development" />
<meta property="og:type" content="website" />
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify({
"@context": "https://schema.org",
"@type": "Organization",
"name": "AUN Development",
"url": "https://aundevelopment.dev",
"logo": "https://aundevelopment.dev/apple-touch-icon.png"
})
}}
/>
</head>
Like the earth I want my favicon as a image
@Eastern Kingbird export const metadata = { title: { template: '%s | AUN', default: 'AUN | Solomon François', }, description: 'Portfolio van Solomon François', icons: { icon: '/favicon.ico', apple: '/apple-touch-icon.png', }, manifest: '/site.webmanifest', openGraph: { template: '%s | AUN', default: 'AUN | Solomon François', description: 'Portfolio van Solomon François', url: 'https://aundevelopment.dev', siteName: 'AUN Development', images: [ { url: 'https://aundevelopment.dev/apple-touch-icon.png', width: 48, height: 48, alt: 'AUN Development Logo', }, ], locale: 'nl_BE', type: 'website', }, keywords: [ 'Full Stack Developer', 'Web Developer', 'Frontend Developer', 'React Developer', 'Next.js Developer', 'TypeScript', 'JavaScript', 'België', 'Webontwikkelaar', 'Freelance Developer', 'Web Development', 'Solomon François' ] } <head> <link rel="icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <meta name="theme-color" content="#EB3012" /> <meta property="og:image" content="https://aundevelopment.dev/apple-touch-icon.png" /> <meta property="og:image:width" content="48" /> <meta property="og:image:height" content="48" /> <meta property="og:image:alt" content="Logo AUN Development" /> <meta property="og:type" content="website" /> <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "@context": "https://schema.org", "@type": "Organization", "name": "AUN Development", "url": "https://aundevelopment.dev", "logo": "https://aundevelopment.dev/apple-touch-icon.png" }) }} /> </head>
B33fb0n3
remove this part (see attached) and put your favicon.ico inside your app/ folder. Do you see the correct image now, when you start your app in dev mode?

--- Edit
After that do this: https://nextjs-forum.com/post/1329183609755668521#message-1329460810161848391
Answer
Eastern KingbirdOP
in de zoekmachine is het nogsteeds zonder favicon
@Eastern Kingbird in de zoekmachine is het nogsteeds zonder favicon
B33fb0n3
this server is an english server, so make sure we write english together 🙂
Make sure you are looking though the dev mode after you done the changes
Eastern KingbirdOP
wdym
I did npm run dev
the favicon is displayed
but not in google search
B33fb0n3
great. Now push the dev code to production and let google reindex your page. You can ask for reindexing via the google search console
B33fb0n3
@Eastern Kingbird solved?
Eastern KingbirdOP
Nope it didn’t work
still got a earrh icon on google and not my favicon
@Eastern Kingbird Nope it didn’t work
B33fb0n3
is your reindex request already done? Can you show the crawed page data (see google search console)
Eastern KingbirdOP
Now it’s working
thank you very much
B33fb0n3
happy to help