А вон тамчасто приходится сталкиваться с вопросами:
- “… как поставить иконку для сайта, которая показывается перед урлом в браузере?”.
- “…хочу чтоб в результатах поиска Яндекса показывался мой логотип. как это сделать? ”
Попытаюсь подробно описать как поставить иконку на сайт просто и правильно.
Такую возможность ввели добрые дяди из всем известной “мелко-мягкой” компании и назвали сей инструмент Favicon.;
Favicon (сокр. от англ. FAVorites ICON — “значок для избранного”, от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в вкладках и в других элементах интерфейса.
Изначально, еще во времена IE5, использовались изображения размера 16?16 пикселей формата ICO. Назвав файл favicon.ico и поместив его в корневую папку вашего сайта (для большинства хостингов это папка public_html, www, либо docs) вы можете увидеть результат – перед урлом будет красоваться ваша иконка-логотип.
Все современные браузеры, кроме Microsoft Internet Explorer, понимают явное указание положения значка в HTML-коде и могут использовать вместо формата ICO формат PNG, GIF, BMP и другие форматы.
Но, Internet Explorer до версии 7.0 — это единственный браузер, который показывает иконку сайта только если сайт добавлен в “Ибранное” (Закладки), иконка называется favicon.ico и лежит только в корневой папке сервера.
Тут есть и положительный момент – администраторы серверов могут узнать, сколько пользователей создало закладку на их сайт (хотя любой счетчик посещаемости, например, LiveInternet, может дать вам такую информацию).
Итак, все современные браузеры понимают явное указание положения значка в (X)HTML-коде (внутри элемента <head>), что позволяет при условии отсутствия /favicon.ico использовать для каждой страницы свой значок.
<link rel=”icon” type=”image/png” href=”/someimage.png” />, где
rel может содержать и “shortcut icon” (при этом Microsoft Internet Explorer будет реагировать на строку “shortcut icon”, а браузеры, соответствующие стандартам — на слово “icon”)
href содержит абсолютный или относительный URI к файлу (в Mozilla Firefox 3.0, например, поддерживаются те же URI, что и с тегом img).
Форматом файла может быть png или gif, размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета (в Mozilla Firefox, например, может быть не только этот, но и как у тега img). При этом атрибут type должен содержать MIME-тип формата (например, image/png для PNG). Если для Internet Explorer используется формат ICO, то его MIME-тип должен быть image/vnd.microsoft.icon. Тип image/x-icon устарел в 2003 году после стандартизации типа для ICO.
Можно указать несколько изображений в разных форматах — например, строку с shortcut icon и значком в формате ICO для Internet Explorer, и строку с icon и значком в формате GIF или PNG для остальных браузеров.
Простой пример:
Если вы делаете иконку для статичного сайта то подвязать иконку в формате ICO можно вписав в код документа между тегами <head></head> следующий код:
<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” > ; – это для Internet Explorer
<link rel=”icon” type=”mage/vnd.microsoft.icon” href=”/favicon.ico” > ; – это для всех остальных браузеров
и закачайте по FTP файл иконки в корневую папку (как и указывалось выше, для большинства хостингов это папка может называться “public_html”, “www”, либо “docs”) .
Если, например, вы используете WordPerss, то этот код нужно разместить между тегами <head></head> в файле темы header.php.
В нашем сайте мы используем систему Netcat, и весь код обрабатывает как PHP инструкции, поэтому не забудьте экранировать кавычки обратной косой чертой.
В настройках макета дизайна главной страницы в поле “Нeader” между тегами <head></head> вставляем код:
<link rel=”icon” type=”mage/gif” href=”http://www.artitory.ru/artilogo.gif” />
<link rel=”shortcut icon” type=”image/gif” href=”http://www.artitory.ru/artilogo.gif” />
Если у вас иконки в другом формате, то достаточно изменить атрибут type, указав другой MIME-тип. Список MIME-типов можно посмотреть, например, тут http://www.chem.msu.su/rus/wwwbook/mime.html
Открываем свой сайт в браузере и наслаждаемся результатом.
В результатах поиска Яндекса иконка появится не сразу, только после того как Яндекс заново переиндексирует вашу страницу.
Более сложно решение.
Иногда хочется чтобы для каждой страницы была своя иконка и хочется автоматизировать этот процесс, чтобы нужная иконка автоматически подгружалась в зависимости от раздела сайта. Как создать такие компоненты в Netcat смотрите другую статью на нашем сайте.
Как создать файл иконки.
Для того чтобы создать иконку для сайта можно воспользоваться несколькими способами:
Использовать специальный плагин для Photoshop, например — IconBuilder-XP100
Использовать онлайн ресурсы для создания favicon. Например — http://favicon.ru/
Для Windows можно использовать специальные программы Microangelo, QTam Bitmap to Icon, Axialis IconWorkshop.
Для Mас OS можно использовать Iconverter, Icon2Image, iconXprit, Img2Icns.
Img2Icns лучшая программ что я видел, с ее помощью можно любую картинку в 2 клика перевести в иконку любого формата (и даже для изменения вида папок Windows). К тому же очень приятно что программа является бесплатной.
Делаем favicon онлайн
Сайт Favicon.ru полностью посвящен иконкам сайта favicon.ico. Сайт содержит форму, позволяющую загрузить собственную картинку размером не более 300 Кб для создания иконки. В этой форме предусмотрена возможность поставить галочки для добавления в favicon.ico значков 32?32 и 48?48 для десктопа.
Кроме вышесказанного данный сервис позволяет отредактировать и обрезать исходную картинку перед созданием иконки. Конечно данному графическому редактору далеко до фотошопа, но он довольно прост в использовании и содержит понятные и достаточные инструкции. К тому же для редактирования изображения под иконку функций данного редактора вполне достаточно.