Генератор favicon онлайн.

Для генерации favicon
загрузите изображение
в формате
PNG, JPEG, или GIF

Favicon – это изображение которое является значком сайта или страницы.

Какие форматы favicon допустимы?

Допустимо использование в браузерах для ПК значков размерами: 16 × 16, 32 × 32 или 120 × 120 пикселей, но при этом отображаемый размер значка составляет 16 × 16 пикселей. Современные браузеры поддерживают favicon нескольких форматов: ICO, PNG, JPEG, SVG, GIF в том числе и анимированный. Однако не все браузеры поддерживают указанные форматы, более подробно описано в таблице ниже. В мобильных устройствах размер отображаемого значка favicon зависит от размера экрана мобильного устройства и от операционной системы.

Браузеры для ПК
Формат иконки Internet Explorer Chrome Opera Safari Firefox
ICO 5.0+ Да 7.0+ Да 1.0+
PNG 11.0+ 4.0+ 7.0+ 4.0+ 1.0+
JPEG   4.0+ 7.0+ 4.0+ Да
GIF 11.0+ 4.0+ 7.0+ 4.0+ 1.0+
Анимированный GIF     7.0+   Да
APNG     9.5+   3.0+
SVG     9.6+    

Как создать favicon для сайта?

При помощи нашего генератора для создания favicon, вы с легкостью сможете создать значок для сайта. Для этого вам потребуется загрузить изображение, в PNG, JPEG, или GIF формате, которое вы хотите использовать в качестве favicon, после чего вы получите ссылку на ZIP архив в котором будет сгенерированы все доступные размеры значка favicon в формате PNG и favicon.ico. Так же в архиве будет находиться файл README.md с инструкцией по установке favicon на сайт, данная инструкция приведена ниже.

Как установить favicon на сайт?

Для установки на сайт сгенерированного здесь значка favicon необходимо

  1. Скачать архив с сгенерированными иконками favicon
  2. Разархивировать переместив его как есть в корень вашего сайта.
  3. Поместить между тегами head следующий код
    <link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png"  href="/favicon/favicon-96x96.png" sizes="96x96">
    <link rel="apple-touch-icon" sizes="57x57"  href="/favicon/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60"  href="/favicon/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72"  href="/favicon/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76"  href="/favicon/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114"  href="/favicon/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120"  href="/favicon/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144"  href="/favicon/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152"  href="/favicon/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180"  href="/favicon/apple-touch-icon-180x180.png">
    <link rel="icon"  type="image/png"  href="/favicon/android-chrome-192x192.png" sizes="192x192">
    <link rel="manifest"  href="/favicon/manifest.json">
    <meta name="msapplication-TileImage" content="/favicon/mstile-144x144.png">
    <meta name="msapplication-TileColor" content="#6666ff">
    <meta name="theme-color" content="#6666ff">

Пример:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример использования favicon</title>
...
<link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon/android-chrome-192x192.png" sizes="192x192">
<link rel="manifest" href="/favicon/manifest.json">
<meta name="msapplication-TileImage" content="/favicon/mstile-144x144.png">
<meta name="msapplication-TileColor" content="#6666ff">
<meta name="theme-color" content="#6666ff">
...
</head>