FaviconKit
Бесплатно · Без регистрации · Работает на вашем сервере

Создавайте идеальные фавиконы из любого изображения

Превращайте изображения в профессиональные фавиконы с поддержкой SVG, PNG, JPG и всех основных форматов. Скачивайте полный набор фавиконов всех нужных размеров для безупречного отображения на любых устройствах и браузерах.

Молниеносно· Поддержка SVG· Множество форматов
Начать конвертацию

Загрузите изображение

Перетащите изображение или нажмите для выбора. Мы создадим все нужные размеры фавиконов.

Перетащите изображение сюда

или нажмите для выбора файлов

Выбрать файл
PNGJPGGIFWEBPBMPSVGICO≤10MB
Создаём набор фавиконов…
К сожалению, этот файл не удалось обработать. Используйте квадратный PNG, JPG, GIF, WebP, BMP или SVG размером до 10 МБ.
favicon preview

Ваш набор фавиконов готов

ZIP с ICO, PNG, Apple touch icon, иконками Android и web-манифестом.

Скачать набор фавиконов

Генератор фавиконов из текста

Превращайте буквы или короткий текст в аккуратный фавикон. Введите инициалы, выберите цвета и форму, смотрите предпросмотр в реальном времени и скачивайте полный набор иконок.

Генератор фавиконов из эмодзи

Превращайте любой эмодзи в фавикон. Выберите эмодзи, форму и цвет фона, смотрите предпросмотр в реальном времени и скачивайте полный набор иконок.

Пиксельный редактор фавиконок

Рисуйте фавиконку вручную попиксельно на сетке от 16×16 до 64×64. Карандаш, ластик и заливка с отменой/повтором, а затем экспорт полного набора ICO, PNG и иконок Apple/Android.

Загрузчик фавиконов

Введите URL любого сайта, чтобы получить и скачать его фавикон в форматах PNG и ICO.

Проверка фавиконов

Введите URL любого сайта, чтобы мгновенно проверить настройку фавиконов — favicon.ico, Apple touch icon, SVG-фавикон и web-манифест. Получите оценку состояния за секунды.

Всё необходимое для идеальных фавиконов

Один профессиональный генератор фавиконов со всеми инструментами и форматами, необходимыми для создания чётких иконок, работающих везде.

Молниеносно

Обрабатывайте изображения за секунды с оптимизированным движком конвертации. Никакого ожидания и задержек.

Поддержка SVG

Полная поддержка SVG-файлов с аккуратной оптимизацией и масштабированием для идеального результата.

Все устройства

Создавайте фавиконы для десктопа, мобильных устройств, планшетов и PWA всех требуемых размеров.

Полный набор

Скачивайте всё: ICO, PNG-файлы, Apple touch icon и web-манифест.

Множество форматов

Поддержка PNG, JPG, GIF, WebP, BMP и SVG — конвертируйте из любого популярного формата.

Готово к использованию

Получайте HTML-сниппеты и инструкции по установке для немедленного внедрения.

Кроссбраузерность

Безупречная совместимость с Chrome, Firefox, Safari, Edge и всеми современными браузерами.

Высокое качество

Продвинутая обработка изображений сохраняет чёткость фавиконов в любом размере.

Профессионально

Создавайте отраслевой стандарт набора фавиконов, который используют лучшие сайты мира.

8+
Поддерживаемых форматов
6
Размеров фавиконов
100%
Совместимость с браузерами
0s
Время обработки

Простое руководство по установке

Выполните эти простые шаги, чтобы добавить новые фавиконы на ваш сайт.

1

Скачайте набор фавиконов

Используйте генератор выше, чтобы создать и скачать полный набор фавиконов в виде ZIP-файла.

2

Распакуйте файлы

Распакуйте всё содержимое ZIP в корневой каталог сайта (ту же папку, где находится index.html).

3

Добавьте HTML-код

Скопируйте HTML-код ниже и вставьте его в раздел <head> ваших страниц.

4

Проверьте фавиконы

Опубликуйте сайт и убедитесь, что фавикон отображается во вкладках браузера, закладках и на мобильных устройствах.

Код интеграции для вашего фреймворка

Выберите свой стек и скопируйте готовый код. Файлы находятся в корне сайта (или в app/ для Next.js App Router).

index.html
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
// app/layout.tsx
// 1. Drop these files into app/ (Next.js auto-detects them):
//    - favicon.ico, icon.png, icon.svg, apple-icon.png
// 2. For extra PNG sizes + a manifest, declare them here:
import type { Metadata } from 'next'
import './globals.css'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: 'any' },
      { url: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
      { url: '/favicon-16x16.png', sizes: '16x16', type: 'image/png' },
      { url: '/favicon.svg', type: 'image/svg+xml' },
    ],
    apple: ['/apple-touch-icon.png'],
  },
  manifest: '/site.webmanifest',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en"><body>{children}</body></html>
  )
}
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="icon" href="/favicon.ico" sizes="any" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="manifest" href="/site.webmanifest" />
      </Head>
      <body><Main /><NextScript /></body>
    </Html>
  )
}
// Vue (public/index.html) — put files in public/
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

// Nuxt 3 (nuxt.config.ts)
export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
        { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
        { rel: 'manifest', href: '/site.webmanifest' },
      ],
    },
  },
})
// 1. npm i gatsby-plugin-manifest
// 2. gatsby-config.js — point icon at a 512x512 PNG
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'Your App Name',
        short_name: 'App',
        start_url: '/',
        display: 'standalone',
        icon: 'src/images/android-chrome-512x512.png',
      },
    },
  ],
}

// Also copy favicon.ico to the static/ folder for the browser fallback.
// src/app.html — files live in static/
<!doctype html>
<html lang="en">
  <head>
    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display:contents">%sveltekit.body%</div>
  </body>
</html>
Куда поместить файлы? Поместите favicon.ico, icon.png и apple-icon.png прямо в папку app/. Next.js определит их автоматически — вручную добавлять link-теги не нужно.
site.webmanifest
{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Входящие файлы

Ваш набор фавиконов содержит следующие файлы.

favicon.icofavicon-16x16.pngfavicon-32x32.pngapple-touch-icon.pngandroid-chrome-192x192.pngandroid-chrome-512x512.pngfavicon.svgsite.webmanifest

Советы профессионалов

  • Храните все файлы фавиконов в корне сайта для максимальной совместимости.
  • После обновления фавиконов выполните жёсткое обновление (или очистите кеш), чтобы сразу увидеть изменения.
  • Проверьте фавикон на разных устройствах и браузерах, чтобы убедиться в корректном отображении.

Часто задаваемые вопросы

Ответы на распространённые вопросы о создании и внедрении фавиконов.

Какие форматы изображений поддерживаются?
Вы можете загружать файлы PNG, JPG, GIF, WebP, BMP или SVG. Для максимальной чёткости начните с квадратного изображения размером не менее 512×512 пикселей. Принимаются файлы до 10 МБ.
Каким должно быть исходное изображение?
Идеально подойдёт квадратное исходное изображение размером 512×512 или больше. Генератор аккуратно уменьшит его, поэтому большое чёткое изображение даст самые красивые маленькие иконки.
Поддерживаются ли SVG-фавиконы?
Да. SVG-файлы сохраняются как векторный favicon.svg для чёткого отображения в современных браузерах, а также растрируются во все размеры PNG и ICO для старых браузеров.
Какие размеры фавиконов создаются?
Набор включает PNG 16×16 и 32×32, мультиразрешение favicon.ico, Apple touch icon 180×180, иконки Android/PWA 192×192 и 512×512, а также web-манифест.
Как добавить фавикон на мой сайт?
Распакуйте ZIP в корень сайта и вставьте приведённый HTML-сниппет в раздел <head> ваших страниц. Полные инструкции и код для фреймворков показаны выше.