Вы наверняка замечали, что практически у каждого сайта имеется свой значок, своя иконка. Такой значок можно увидеть в браузере — в закладках или на вкладке сайта:
иконки сайтов на вкладках браузера
Так же этот значок выводиться в некоторых поисковиках рядом с ссылкой на сайт, как например в Яндексе:
favicon моего сайта в поисковой выдачи Яндекса
Ещё эта иконка может использоваться в Windows 8 в виде плитки обозначающей сайт.
Как создать favicon и прикрепить к своему сайту? Это достаточно просто. Нужно всего лишь последовательно совершить следующие нехитрые манипуляции:
- Необходимо создать картинку, которую вы сочтёте нужной, размером 16х16 пикселей, имеющую имя favicon.ico и сохранить на своём компьютере;
- Затем загрузить это изображение в корневой каталог вашего сайта;
- Вставить html-код:
<link rel="Shortcut Icon" href="/favicon.ico">
между тегами <head> и </head> на основной странице сайта;
- Обновить сайт.
Всё.
Если кому-то эти действия не до конца понятны, то объясню поподробнее:
Шаг 1. Создаём изображение favicon.ico
Для этого можно использовать один из множества онлайн редакторов предназначенных специально для создания иконок. Вот например некоторые из них: favicon.ru, hxiconeditor.com, favicon.by, favicon.cc, realfavicongenerator.net
В любом из этих сервисов favicon можно создать как с нуля, рисуя по пикселям, так и из готового рисунка, по средством загрузки оного с вашего компьютера, т.е. импортировать.
Так же можно использовать обычный графический редактор, который есть у вас под рукой. Главное помнить, что стандартный размер иконки 16х16 пикселей, глубина 256 цветов и она имеет формат файла ICO (.ico), в котором вам её и будет нужно сохранить.
Можно сделать значок и большего размера — 32х32, 24х24, 48х48 или даже 64х64 пикселя и глубиной цвета 32 бита. Тогда у вас будет больше возможностей по созданию наиболее красивого и детального значка. Но он будет занимать чуть больше места (что я считаю не таким важным — разница не значительная для сайта) и могут быть проблемы с отображением в Internet Explorer, старыми его версиями (представляете, есть персонажи которые пользуется IE и даже его не обновляют, не поверите — но сам видел).
Шаг 2. Заливаем его на сайт.
После того, как вы создали свой шедевр и сохранили на компьютере, картинку, которая должна носить имя favicon.ico (и ни какое другое!) нужно разместить в корневой папке вашего сайта с помощью FTP соединения. Сделайте это любым привычным для вас способом. Я для таких случаев пользуюсь программой FileZilla.
Говорят, что можно использовать и другие форматы файла вместо ICO, но зачем лезть через задницу, когда всё и так замечательно выходит?! Правда есть еще вариант, что вы хотите создать анимированную иконку — гифку, тогда формат должен быть соответственно GIF (.gif), но это простите, уже извращение.
Шаг 3. Прописываем html-код.
Остаётся прописать следующий html-код в заголовке основной странице вашего сайта между тегами <head> и </head>:
<link rel="Shortcut Icon" href="/favicon.ico">
или такой
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
Если не знаете, что вам подойдёт больше, можно прописать оба варианта.
Скажу по секрету, что я прекрасно обходился без третьего шага — и у меня всё работает, большинство современных браузеров автоматически распознает favicon и без указания в html-коде.
Теперь можно перезагрузить сайт, и посмотреть на вкладку в браузере — на ней должна появиться ваша иконка, правда это может произойти не сразу.
Я описал самый распространённый, классический вариант создания favicon для сайта. Существуют и другие способы, если ваш сайт сделан например на wordpress или joomla то можно использовать специальные плагины, можно так же обойтись без FTP для заливки изображения на сайт.
Хотите поговорить об этом? Пишите, спрашивайте, всё расскажу.
Эту и другие статьи можно также читать на канале NIGIL.RU на Яндекс.Дзен
