Иконку или значок для сайта (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 - Скачать только файл с анимацией
Очень полезная статья. Я все никак не мог поменять стандартный favicon. Спасибо
Полезная статья, благодарю вас за нее, использую для своего ресурса http:...