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

Иконку или значок для сайта (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 (Создать фавикон) и щелкнуть правой кнопкой мыши на полученном значке.

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

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

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

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

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

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

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

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

FavIcon from Pics//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  - Скачать только файл с анимацией

Значок сайта favicon: создать онлайн: 2 комментария

  1. Pavel

    Очень полезная статья. Я все никак не мог поменять стандартный favicon. Спасибо

  2. Дмитрий

    Полезная статья, благодарю вас за нее, использую для своего ресурса ...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *