Значок сайта favicon: создать онлайн

Иконку или значок для сайта (favicon) можно нарисовать как цветной попиксельный рисунок или создать из готового изображения.

В этой статье:

1 Формат и загрузка значка сайта
2 Создание favicon онлайн

Формат и загрузка значка сайта

Значок сайта (favicon от английского favorites icon, значок для избранного, от названия папки с закладками в MSIE) появляется в адресной строке браузеров перед URL страницы, около закладки на страницу, в результатах поиска Яндекса и т.д. favicon - фавикон - это квадратное изображение размером 16×16 (или 32x32, 48х48) пикселов в формате .ico (файл favicon.ico) или .png или с анимацией в формате .gif (файл favicon.gif).

Многие современные браузеры загружают файл favicon.ico из корня сайта, даже если на него нет явного указания. Чтобы задать явно ссылку на фавикон, нужно поместить в код веб-страницы между тегами <head> и </head>

<link rel="shortcut icon" href="/favicon.ico" />
или <link rel="icon" type="image/png" href="/someimage.png" />
и/или
<link rel="icon" type="image/gif" href="/animated_favicon.gif" />

При явном указании на файл favicon.ico можно хранить этот файл в любой папке сайта и/или задать разные значки для разных разделов или страниц сайта.

<link rel="icon" type="image/png" href="путь к файлу favicon" />

где

rel может содержать «shortcut icon» (IE будет реагировать на «shortcut icon», а браузеры, соответствующие стандартам, — на «icon»)
href - абсолютный или относительный путь к файлу.
Форматом файла может быть png или gif, размером 16x16 или 32x32 и с 8-битной или 24-битной глубиной цвета (в Mozilla Firefox, например, может быть как у тега img).

Атрибут type должен содержать MIME-тип формата (например, image/png для PNG).

Можно указать несколько изображений в разных форматах, например, строку с rel="shortcut icon" и значком в формате ICO для Internet Explorer, и строку с rel="icon" и значком в формате GIF или PNG для остальных браузеров.
(см. ru.wikipedia.org/wiki/Favicon)

Создание favicon онлайн

Создать значок сайта можно в графической программе, поддерживающей формат .ico, или с помощью одного из множества доступных онлайн-сервисов, например:

Попиксельное рисование

Favicon Generator - нарисовать цветной попиксельный рисунок с нуля или загрузить и, возможно, изменить загруженный рисунок. Когда рисунок для значка сайта будет готов, щелкнуть на Make Favicon (Создать фавикон) и щелкнуть правой кнопкой мыши на полученном значке.

Повернуть или отразить изображение

http://favicon.ru - русский сайт. Исходный рисунок можно загрузить как с компьютера, так и из Интернета. Есть попиксельный редактор, позволяющий передвинуть или повернуть/отразить рисунок фавикона.

Значок с размерами от 16x16 до 128x128

Genfavicon - значок 16x16, 32x32, 48x48, 64x64 или 128x128 из загруженного рисунка размером не более 4 Мб

Загрузить файл и щелкнуть на Upload Image
Выбрать нужную часть рисунка, перетаскивая и/или изменяя серый квадрат, выбрать размер значка и щелкнуть на Capture&Preview
Чтобы скачать полученный файл favicon.ico, щелкнуть на Download Image

Текст/буква на цветном фоне в одну или в две строки

antifavicon.com - без рисунков, только буква или несколько букв Полученный значок (Your generated favicon) появляется выше полей настроек текста и цвета. Чтобы скачать файл, нужно щелкнуть на желтой кнопке "save as favicon file"

Из рисунка простой значок и/или с анимацией

FavIcon from Pics: http://favicon.htmlkit.com/favicon/
Загрузить файл с рисунком: выбрать файл на компьютере

и щелкнуть на кнопке Generate Favicon.ico
Появится фавикон и фавикон с анимацией, который можно изменить (Edit), например, добавить в него прокручивающийся текст.

Изменение анимации: добавить прокручивающийся текст вместо "Your Text", выбрать цвета:

Download FavIcon Package - Скачать пакет файлов - простой значок-фавикон (Still) и с анимацией (Animated)

Еще можно:
Customize colors, text, animation, iPod icons, ... - Изменить цвета, текст, анимацию, значки для iPod, ...
Instantly preview your favicon in this browser - Просмотреть полученный фавикон в бразере
Validate your favicon, after installing - Проверить отображение установленного фавикона
Add your site to the Favicon Gallery - Добавить сайт в галерею фавиконов
Send your feedback... - Отправить комментарий
Download only favicon.ico - Скачать только файл favicon.ico
Download only animated_favicon.gif - Скачать только файл с анимацией