НТВ плюс 

Прозрачный favicon. Другие графические форматы фавикон. Что же такое Favicon

Иконка favicon.ico представляет собой крошечную картинку размером 16х16 пикселей, которая отображается рядом с адресом вашего сайта или блога в браузерах, в результатах поиска, в закладках и т.д. Обычно такую иконку делают из логотипа или фрагмента логотипа компании на фоне корпоративного цвета или любой другой символ, который дизайнер посчитает запоминающимся и подходящим для тематики сайта. Например, иконка favicon для этого блога — .

Сделать иконку favicon для своего сайта совсем не сложно, зато она сделает ваш сайт более узнаваемым. В последнее время у большинства сайтов есть такие иконки, потому не стоит ленится или недооценивать их значение. Тем более делается и устанавливается favicon быстро и просто. Я просто очень подробно описываю, как это сделать, потому много текста:).

Иконки favicon отображаются перед адресом просматриваемого сайта почти во всех браузерах, в Избранном или Закладках браузера:

Делаем иконку для сайта favicon.ico с помощью программ Photoshop CS3 и AWicons Pro

1. Создаем в Photoshop или любом другом графическом редакторе иконку размером 16х16, сохраняем ее в формате GIF или PNG.

2. Открываем сохраненную иконку любой программкой для создания иконок и курсоров, например, AWicons Pro (она платная). Подобных бесплатных программ достаточно много, погуглите, скачайте и установите. Откройте программу и перетащите в нее заготовку своей иконки favicon. Если вы сохраняли иконку на белом фоне, в программе AWicons Pro она выглядеть будет примерно так:

3. Если вид иконки устраивает, нажимаем F2 или Файл->Сохранить объект… и сохраняем иконку под именем favicon.ico :

Если фон favicon будет прозрачным, можно или сохранить в Фотошопе заготовку сразу с прозрачным фоном или удалить лишние пиксели в программе для создания иконок. Чтобы сделать прозрачный фон у favicon нужно изначально создать новый файл в Фотошопе с прозрачным фоном (Ctrl+N ):

Обратите внимание, что формат ICO, как и формат GIF, не поддерживают альфа-прозрачность. Если просто взять сложный логотип компании и уменьшить его в Фотошопе, то сохранять такую иконку нужно на непрозрачном фоне. При уменьшении изображения крайние пиксели изображения будут полупрозрачными. И после преобразовании в формат ICO все полупрозрачные пиксели станут белыми, вокруг изображения появятся белые точки, называемые артефактами. Если же сохранять иконку на заполненном фоне, полупрозрачные пиксели преобразуются в смешанный цвет фона и картинки.

Саму иконку можно рисовать сразу в специальной программе, но лично мне удобнее в Фотошопе, да и возможностей по обработке картинки у Фотошопа несравнимо больше. Жаль только, что даже версия Photoshop CS3 не умеет сохранять иконки в формате ICO и приходится использовать специальные программы-конверторы. Но есть и второй способ, .

После создания иконки favicon.ico ее нужно загрузить на свой сервер () в корневую папку, где находится сайт и, желательно, во все подпапки.

После этого в HTML-шаблон своего сайта нужно добавить код вызова иконки. Это одна строчка между тегами HEAD :

<head >
<link rel = "shortcut icon" href = "favicon.ico" >
</ head >

Все. Если иконка имеет имя и формат favicon.ico , она загружена в корень сайта и в области HEAD HTML-шаблона вашего веб-сайта есть строчка загрузки – фавикон будет отображаться рядом с адресом вашего сайта или блога.

Формат ICO и другие графические форматы иконок. Установка фавикон на сайт с поддержкой для iOS, Android и др. устройств, а также новинок HTML5. Пошаговая инструкция, от простого к сложному, доступно и наглядно, для начинающих веб-мастеров.

Наверное, вы уже что-то слышали о формате ICO и иконке для сайта favicon , но ничто не стоит на месте и постоянно появляется что-то новое. Эту статью я решил написать, чтобы не только обобщить известные всем вещи, но и дополнить их новинками.

Так вы узнаете о некоторых секретах формата ICO, проблемах с Internet Explorer и их устранении, о новых графических форматах favicon (прозрачных и анимированных) , стандартах HTML5 и иконках для мобильных устройств под iOS и Android, а также многое другое.

  • Формат ICO
  • Файл favicon.ico
  • BugFix для Internet Explorer
  • Фавикон в HTML5
    • Фавикон для Apple
    • Фавикон для Android
  • Адрес файла favicon.ico

Формат ICO

А начну я с того, что формат ICO (Windows icon) был разработан компанией Microsoft для значков файлов. Он аналогичен формату CUR (Windows cursors) и наиболее близок к BMP . Отличие лишь в заголовках, а также наличии маски, что и позволяет создавать прозрачность в рисунках. Однако альфа-канал (полупрозрачность) для 32-битных значков появился лишь в Windows XP.

Файл favicon.ico

Идея с файлом favicon.ico (картинкой 16х16 пикселей) тоже принадлежит Microsoft, которую они реализовали для закладок в Internet Explorer 5. Отсюда и название fav - сокращённо от favorite - избранное, а icon - значок. На данный момент этот формат поддерживается всеми популярными браузерами, но главное в деталях. Условно обобщённый вариант установки фавикон на сайт имеет следующий вид:

Обратите внимание на то, что в приведённом примере используется два отношения: shortcut (с англ. ярлык ) и icon (с англ. иконка ). Фишка в том, что shortcat здесь является излишним, и был оставлен лишь для старых версий Internet Explorer, но он должен идти перед icon .

image/vnd.microsoft.icon vs image/x-icon?

Интересно и то, что в 2003 году формат ICO был зарегистрирован Саймоном Батчером (Simon Butcher) в IANA и его MIME-типом стал image/vnd.microsoft.icon . Проблема в том, что старые версии Internet Explorer не могут корректно интерпретировать его, так что лучше использовать старый image/x-icon .

BugFix для Internet Explorer

Не забываем и о том, что для Internet Explorer можно использовать HTML-костыли основанные на комментариях, например:



Другие графические форматы фавикон

Впрочем, сейчас активно стала набирать обороты интеграция и других графических форматов: PNG, GIF, JPEG, APNG и SVG. Лучше всего дело обстоит со статическими форматами PNG и GIF , их поддерживают все новые версии популярных браузеров. Анимированный APNG работает только в Firefox (начиная с версии 3.0) и Opera (начиная с версии 9.5) , а вот анимированный GIF не понимают лишь IE и Safari. JPEG не поддерживает только Internet Explorer.

Приведу несколько корректных примеров вставки favicon в соответствующих форматах на сайт:





Обращаю внимание на то, что для APNG использует MIME-тип video/png , а для GIF (даже анимированного) - image/gif . Также интересен здесь и MIME-тип для SVG формата, это image/svg+xml .

Фавикон в HTML5

Теперь, что касается формата favicon в HTML5 , подробней читайте . Интересным здесь является атрибут sizes , который задаёт размер иконок для визуально отображения в формате:

{ширина1} x{высота1} [{ширинаN} x{высотаN} ] | any

Другими словами, можно перечислить соответствующие размеры через пробел или указать значение any (для всех) . В документации HTML5 приводится такой пример:





Favicon.ico для мобильных браузеров

Проблема в том, что на данный момент атрибут sizes не поддерживается ни одним из популярных браузеров. Несколько иначе обстоит дело с мобильными браузерами.

Фавикон для Apple




Если атрибут sizes не указан, используется значение по умолчанию 57x57 .

Примечательно и то, что как favicon.ico служит автоматически распознаваемой иконкой для сайта, без указания связи, так и следующие имена будут распознаны автоматически:

  • apple-touch-icon-57×57.png
  • apple-touch-icon-72×72.png
  • apple-touch-icon-114×114.png
  • apple-touch-icon-144×144.png

Если же Вы хотите, чтобы iOS не добавляла к иконке каких-то эффектов , используйте ключевое слово precomposed , например:




Здесь тоже имеется набор автоматически распознаваемых имён:

  • apple-touch-icon-57×57-precomposed.png
  • apple-touch-icon-72×72-precomposed.png
  • apple-touch-icon-114×114-precomposed.png
  • apple-touch-icon-144×144-precomposed.png

Фавикон для Android

Браузеры на базе Android унаследовали формат Apple. По сути, будет достаточно указать, что-то вроде следующего:


Адрес файла favicon.ico

Наверное, Вы обратили внимание на то, что в некоторых примерах используется относительный, а не к фавикон? Это не случайно, т.к. помимо HTTP сейчас набирает обороты HTTPS. Для избежания проблем, в абсолютном адресе, проще не указывать протокол, например:

или использовать относительный путь.

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

Ну, а теперь попробуем сформировать обобщённый вариант вставки фавикон сайт , у меня он получился таким:







Попробую внести ясность в предложенную конструкцию. В начале идёт фавикон для Internet Explorer, который среагирует на shortcut . Далее оптимальным будет статичная PNG иконка с прозрачностью, а анимацию иконки я отдал GIF формату. Для мобильных устройств создадим иконки стандартного размера 57x57 пикселей, одну без эффектов, а другую со своими эффектами (precomposed - отключит эффекты браузера) . Для того чтобы избежать проблем с HTTP и HTTPS я указал относительный путь , начиная от корня сайта (/ - в начале адреса) , но для IE, наверное, лучше будет использовать абсолютный путь.

На этом у меня всё. Надеюсь, что статья была Вам полезна. Если сможете внести какие-то правки, дополнения, уточнения и т.д. - пишите. Спасибо за внимание. Удачи!

В этом уроке рассмотрено создание Favicon, вы узнаете, для чего необходима данная иконка, получите рекомендации по улучшению ее вида и привлекательности.

Кроме этого мы рассмотрим процесс создания и добавления Favicon для сайта.

Favicon - это небольшая иконка которую вы можете видеть в адресной строке браузера и на вкладках открытых страниц, а также при добавлении сайта в закладки браузера туда же добавляется и данная иконка.

Кроме этого поисковая система Яндекс отображает иконку Favicon в результатах выдачи рядом с вашим сайтом. Ваша задача сделать так чтобы данная иконка выделялась, запоминалась, бросалась в глаза на фоне остальных иконок в выдаче, а также имела какие-то ассоциации с вашим сайтом. Красиво созданная и привлекающая внимание иконка Favicon может значительно увеличить количество заходов на ваш сайт по сравнению с теми на которых она не установлена или имеет не привлекательный вид.

Вот некоторые рекомендации, которые необходимо учитывать при создании Favicon.

#1. Значок должен быть легко распознаваемым и иметь ассоциации с вашим сайтом или нишей, к которой относится ваш сайт. В качестве значка вы можете использовать логотип или символ вызывающий ассоциацию с вашим сайтом. Кроме этого можно использовать ту цветовую гамму, в которой создан ваш сайт или логотип.

#2. Не используйте стандартные значки. Многие после создания сайта на той или иной CMS, оставляют значок , ничего, не меняя. В результате в выдаче поисковой системы может находиться не один сайт с таким значком, а множество. Этим вы не как не выделите свой сайт, поэтому используйте только уникальные иконки Favicon созданные специально для вашего сайта. Сюда же можно отнести ситуацию, когда используют иконки из различных коллекций или элементов интерфейса других сайтов. Помните для того чтобы выделяться вам нужна уникальная Favicon.

#3. Старайтесь при создании значка использовать более яркие и светлые цвета, как правило, они привлекают больше внимания.

#4. Не используйте анимированные значки. Во первых анимация поддерживается не всеми браузерами, во вторых внимание посетителя должно быть сосредоточенно на содержимом, а не на иконке.

Теперь рассмотрим непосредственно сам процесс создания Favicon. Для этого существует множество сервисов. Однако они больше подходят для тех у кого уже есть готовая иконка которую они где нибудь содрали или взяли из какой-то коллекции. Но как я уже говорил выше, иконка должна быть уникальной, поэтому здесь я рассмотрю процесс ее создания при помощи программы Photoshop, на примере сайта сайт.

Создание заготовки Favicon в Photoshop

#1. Создайте новый документ в Photoshop размером 64*64px , для этого пройдите в меню "Файл" >> "Новый..." или нажмите сочетание клавиш Ctrl+N. Вообще сам значок должен быть 16*16px , но лучше вначале создавать его таки размером, а потом уменьшить до необходимого.

#2. В моем случае у меня нет какого либо логотипа для сайта поэтому я решил использовать символ "W" с которого начинается адрес сайта, а также те цвета которые преобладают в верхней части сайта это синий и желтый. Поэтому я установил значение цвета #6A91D0 и при помощи инструмента "Заливка" (G) задал синий цвет ранее созданному документу.

#3. После этого я выбрал инструмент "Текст" (Т) добавил символ "W" и задал ему следующее значение цвета #FAC31D.

Для того чтобы символ более выделялся на синем фоне я добавил ему обводку черным цветом и размером 2px. Для этого необходимо пройти в пункт меню "Слой" >> "Стиль слоя" >> "Обводка" , выбрать цвет и размер обводки.

После этого необходимо объединить слои, для этого необходимо пройти в пункт меню "Слой" >> "Объединить видимые" или нажать сочетание клавиш Shift + Ctrl + E.

Для того чтобы линии были плавные без засечек я добавил размытие. Для этого необходимо пройти в пункт меню "Фильтр" >> "Размытие" >> "Размытие по Гауссу..." и установить радиус 0,3 пикселя.

Свой символ или изображение размещайте так, чтобы оно заняло максимум пространства, потому что если он будет маленького размера, то при размере значка 16*16 оно не будет заметно.

#4. Теперь необходимо изменить размер значка. Для этого нужно пройти в меню "Изображение" >> "Размер изображения" и установить размер 16*16px.

#5. Осталось сохранить значок. Иконка Favicon должна иметь имя favicon и расширение.ico. Все дело в том что по умолчанию Photoshop не сохраняет изображения в формате.ico. Поэтому сохраните его в формате.png, для этого пройдите в пункт меню "Файл" >> "Сохранить как..." и из раскрывающегося списка выберите пункт PNG.

Конвертирование изображение в формат.ICO

После этого мы конвертируем его в формат.ico при помощи сервиса . Зайдите на данный сервис и при помощи кнопки "Обзор" выберите ранее сохраненный файл в формате PNG после чего нажмите на кнопку "Создать favicon.ico".

После этого на загрузившейся странице появится ссылка "Скачать favicon.ico!" кликнув по которой можно сохранить готовую иконку Favicon на компьютер.

Теперь пришло время добавить Favicon к вашему сайту, чтобы она отображалась для всех его страниц. Для этого поместите иконку в корневую папку вашего сайта. Если ваш сайт уже находится на хостинге то обычно эта папка называется "public_html". Затем, в каждую страницу вашего сайта, перед закрывающим тегом добавьте следующие строки:

Но в каждую страницу данные строки необходимо добавлять, если у вас сайт на HTML. Но так как, скорее всего ваш сайт создан на базе, какой-то CMS, то вам будет достаточно добавить эти строки в главный файл вашей темы, которую вы используете для сайта.

Если вы используете WordPress то пройдите в папку wp-content/themes/папка-с-вашей-темой/ найдите в ней и откройте файл header.php, а заетм вставьте необходимы строки и сохраните файл.

Если вы используете Joomla то пройдите в папку templates/папка-с-вашей-темой/ и откройте файл index.php вставьте необходимые строки и сохраните.

В некоторых темах в WordPress и Joomla уже могут быть прописаны свои пути к файлу favicon.ico в таком случае удалите их и замените на свои.

Если вы используете, какую либо другую CMS то все делайте по аналогии.

На вкладках страниц и в адресной строке браузера ваша иконка отобразится сразу, что же касается поисковой выдачи Яндекса то здесь нужно, чтобы прошло время, и специальный поисковый робот Яндекса нашел вашу иконку, после этого она станет отображаться в результатах поиска.

Материал подготовлен проектом:

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

Для чего используется favicon

Favicon - это изображение размером в 16х16 пикселей, которое отображается в адресной строке при посещении сайта.

Для того, чтобы создать фавикон, нажимаем Create New Favicon и рисуем с помощью инструментов:

  • pick existing color - инструмент-пипетка, помогает выбрать цвет, который уже использовали для рисования;
  • move - двигать нарисованное изображение;
  • transparent – стереть нарисованный пиксель.

После сохраняем рисунок на компьютер, нажав Download Favicon. Чтобы загрузить свою картинку, кликаем Import Image, загружаем файл и так же редактируем.

У этого сервиса есть версия на русском языке, где все необходимые инструменты легко найти.

Способ 4. Самый идеальный

Лучшим вариантом создания уникального, яркого и запоминающегося фавикона будет заказ картинки у профессионального дизайнера. Правда, это не бесплатно, а порой и очень дорого. Но вы же хотите выделиться из толпы?

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

  1. Подключаемся по FTP-доступу к сайту через программу Total Commander.
  2. Загружаем иконку в корневую папку сайта. В зависимости от системы управления сайтом корень может называться по разному, например public_html, htdocs, www и т.п. В этой папке вы должны найти файл index.php.
  3. Открываем файл index.php или header.php и между тегами
    вставляем вот такой html код:

Первая строка для поисковой системы Internet Explorer с атрибутом rel="shortcut icon". Остальные браузеры распознают фавикон по значению rel="icon".

Как изменить фавикон для Joomla, WordPress, UCOZ?

Поисковый робот, как и браузер, ищет файл favicon в корневой папке сайта. Для смены иконки нужно установить FTP-соединение и скопировать в корень каталога новую иконку favicon.ico. Как только изображение будет сохранено, следует открыть в браузере сайт и проверить, поменялось ли изображение в адресной строке.

В том случае, если у картинка не изменилась, нужно почистить кэш браузера. Зачастую изображение грузится непосредственно из кэша. А так как там находится старый файл, то именно он и прорисовывается на месте иконки.

Если кэш сайта очищен, а иконка все равно не изменилась, то значит на вашем сайте для файла favicon задан другой адрес. Это очень легко проверить. Следует открыть исходный код любой страницы в используемом браузере. В верхней части страницы будет прописан путь до файла favicon.ico.

Вычислив адрес расположения иконки, нужно заново подсоединиться к сайту через FTP и поменять старый файл favicon.ico на новый.

Как прописать фавикон в шаблоне для Joomla, WordPress, UCOZ?

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

  • Рассмотрим сайты на Joomla. Как правило, на этих сайтах файл favicon заливается в папку с шаблоном. Путь до используемой иконки прописывается в файле index.php.

Код будет выглядеть следующим образом: templates/адрес/favicon.ico.

  • Что касается сайтов, созданных на , то путь до файла favicon.ico задается непосредственно в используемой теме. В соответствии с этим, картинка будет лежать по адресу: /wp-content/themes/адрес/favicon.ico
  • Существует ряд сайтов, созданных в системе uCoz. Для того чтобы сменить фавиконку, следует залить файл favicon.ico в корень каталога посредством FTP-соединения.

Если в полной мере соблюсти все указанные выше пункты, новая иконка гарантировано будет украшать ваш сайт и привлекать новых посетителей.

Почему favicon не отображается в выдаче?

Чтобы в выдаче рядом с вашим сайтом была видна иконка, роботу Яндекса необходимо проиндексировать сайт. Сколько времени на это потребуется, точно ответить сложно и зависит от многих факторов. На один сайт робот может заходить каждый день, на другой через пару недель.

Чтобы проверить видимость favicon сайта для Google и Яндекс введите в адресную строку:

Яндекс - http://favicon.yandex.net/favicon/www.site.ru

Google - http://www.google.com/s2/favicons?domain=www.site.com

Заменить www.site.ru и www.site.com на домен вашего сайта. Например, http://favicon.yandex.net/favicon/сайт

Теперь вы знаете, как сделать иконку для вашего сайта и успешно загрузить ее.