Предпринимательство как образ жизни. Что такое иконка сайта


что это такое, как создать и установить на свой сайт, отображение на мобильном

Что такое фавикон?

Favicon – это значок web-сайта или страницы в виде небольшой иконки, размером 16x16 пикселей (или больше). Пользователь может увидеть favicon в виде маленького изображения в адресной строке браузера слева от ссылки на открытый сайт, возле названия сайта в закладках и вкладках, в результатах выдачи некоторых поисковиков, каталогов, сервисов закладок и пр.

История появления фавикона

Когда-то фавиконы можно было создавать исключительно в формате .ico, потому что он поддерживался лишь старым браузером Internet Explorer. Отсюда и пошло название favicon (сокращенно от английского слова FAVorites ICON – «значок для избранного»). «Избранные» – так назывались закладки в браузере IE.

Сегодня же иконки для сайтов и страниц можно создавать во многих других форматах, в числе которых jpg, png, gif и, конечно же, старый добрый ico.

Зачем нужен favicon?

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

Пример фавиконов

Так выглядят фавиконы в браузере.

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

Более того, значок будет запоминаться пользователям, и через какое-то время он станет узнаваемым для широкой аудитории, что также станет дополнительным привлечением посетителей.

На заметку. Favicon лучше устанавливать уже на оптимизированный веб-ресурс.

Например, у поисковика Яндекс есть специальные роботы YandexFavicons, занимающиеся индексом фавиконов. Они посещают сайты для сбора и обновления значков приблизительно раз в месяц.

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

Поисковой машине после того, как она найдет иконку, нужно будет переконвертировать ее в формат PNG (если она сделана в формате ICO). После этого вы сможете найти favicon своего ресурса по адресу (на примере Яндекса): http://favicon.yandex.net/favicon/URL-адрес-вашего-сайта.

Как создать favicon для сайта?

Недостаточно сделать фавикон чисто «для галочки». Если вы хотите, чтобы он стал дополнительным источником для привлечения посетителей, важно знать, как создать значок сайта правильно.

Каталоги и сервисы для создания фавиконок

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

  1. Favicon.cc - один из самых простых и популярных сервисов не только в России, но и за рубежом. Программа позволяет создать фавикон с нуля, прорисовав буквально каждый пиксель. Любые изменения вы можете посмотреть в онлайн-режиме в специальном окне предпросмотра.Сервис Favicon.cc
  2. IconJ.com - объединяет в себе функции генератора и каталога фавиконов, в котором можно найти более 18 тысяч иконок.Каталог фавиконов IconJ
  3. Logaster.ru - превосходный генератор логотипов и фавиконов. В отличие от других сервисов, здесь вы можете быстро отыскать картинку, соответствующую тематике вашего проекта. Для этого достаточно указать название сайта и выбрать тему, которой он посвящен. После этого сервис предложит вам несколько десятков подходящих шаблонов значков. Вот пример для сайта, посвященного животным.Сервис генерации фавиконов Logaster

И это далеко не все генераторы и каталоги, так что современный веб-мастер без проблем найдет тот favicon, который будет ему по душе.

Внешний вид значка

Стандартный размер favicon составляет 16x16 пикселей. Есть еще размеры 24x24, 32x32, 48x48 и 64x64. Нужно понимать, что иконка сайта – это его лицо, от которого в определенной степени зависит трафик. Поэтому к созданию фавикона необходимо подойти грамотно. Вот несколько правил того, как должен выглядеть значок, чтобы привлекать внимание пользователей:

  • Стиль, соответствующий тематике сайта. В изображении должны преобладать такие же цвета и элементы, которые используются и в дизайне интернет-ресурса или его эмблемы. По сути, это и есть главная задача фавикона – соответствовать сайту.
  • Простой к восприятию. Не стоит рисовать изобилие элементов и лепить их друг на друга. Пользователь, взглянув на значок, должен понять, что на нем изображено, а не пытаться разгадать ваш «скрытый смысл». Разумный минимализм – залог успеха.
  • Запоминающееся изображение. Этот пункт тесно связан с предыдущими двумя. Соответствие тематике и простота фавикона гарантируют вам то, что пользователи быстрее и легче запомнят его. Попытайтесь использовать образ, взглянув на который, человек сможет описать его каким-то словом. К примеру, тот же поисковик «Яндекс» подошел к этому вопросу идеально, и теперь, увидев логотип в форме буквы «Я», вы сразу же вспомните об этой поисковой системе.

Установка фавикона

После создания favicon, его необходимо установить на сайт. Сделать это очень просто:

  1. Загрузите изображение favicon.ico в корневую папку вашего веб-сайта;
  2. Пропишите в HTML коде самого сайта, в мета-теге head, следующий код:
<link rel="shortcut icon" href="/favicon.ico" type="image/ico">

Код favicon должен располагаться между тегами. Общепринято, при верстке его используют, как можно выше в коде.

Отображение Favicon на мобильном

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

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

Иконка для IOS

Чтобы favicon отображалась на устройствах IOS и в браузере Safari, надо прописать следующий код:

<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">

Android

Для устройств работающих на Android, прописываем:

<link rel="icon" type="image/png" href="/favicon-16x16.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png"> <link rel="icon" type="image/png" href="/favicon-96x96.png"> <link rel="icon" type="image/png" href="/favicon-192x192.png">

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

<link rel="manifest" href="/manifest.json">

Его содержимое:

{ "name": "%title%", "icons": [ { "src": "\/android-chrome-36x36.png", "sizes": "36x36", "type": "image\/png", "density": "0.75" }, { "src": "\/android-chrome-48x48.png", "sizes": "48x48", "type": "image\/png", "density": "1.0" }, { "src": "\/android-chrome-72x72.png", "sizes": "72x72", "type": "image\/png", "density": "1.5" }, { "src": "\/android-chrome-96x96.png", "sizes": "96x96", "type": "image\/png", "density": "2.0" }, { "src": "\/android-chrome-144x144.png", "sizes": "144x144", "type": "image\/png", "density": "3.0" }, { "src": "\/android-chrome-192x192.png", "sizes": "192x192", "type": "image\/png", "density": "4.0" } ] }

Более подробно можно посмотреть в документации Google Chrome.

Но это еще не все. В новых версиях Android (начиная с Lollipop), ваш браузер может перекрашиваться в интерфейс цвета сайта.Цвет браузера на androidЧтобы сделать такую фишку, прописываем строчку и задаем свой цвет:

<meta name="theme-color" content="#8A2BE2">

Windows Phone

Про favicon в Windows Phone тоже не забываем:

<meta name="msapplication-TileColor" content="#8A2BE2"> <meta name="msapplication-TileImage" content="/mstile-144x144.png">

Для более расширенной настройки иконки в Windows Phone, можно использовать следующие значения:

<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/mstile-70x70.png"/> <square150x150logo src="/mstile-150x150.png"/> <square310x310logo src="/mstile-310x310.png"/> <wide310x150logo src="/mstile-310x150.png"/> <TileColor>#8A2BE2</TileColor> </tile> </msapplication> </browserconfig>

Сам файл настройки:

<meta name="msapplication-config" content="/browserconfig.xml" />

Более подробно о разметке в документации Microsoft.

Сервисы для генерации и проверки favicon

Digitalagencyrankings.com

Первый сервис http://digitalagencyrankings.com/iconogen/, очень простой в использовании. Для того чтобы вручную не делать favicon разных размеров, вы загружаете в этот сервис свою иконку в jpg, png или gif. Сервис создает её в разных размерах.Загрузка изображения в icongenСразу видно, как они будут выглядеть.Пример favicon в icongenЕсть возможность скачать все иконки в одном архиве.Скачать favicon из icongenСервис сразу генерирует код для вставки на сайт:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-16x16.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png"> <link rel="icon" type="image/png" href="/favicon-96x96.png"> <link rel="icon" type="image/png" href="/android-chrome-192x192.png"> <meta name="msapplication-square70x70logo" content="/smalltile.png" /> <meta name="msapplication-square150x150logo" content="/mediumtile.png" /> <meta name="msapplication-wide310x150logo" content="/widetile.png" /> <meta name="msapplication-square310x310logo" content="/largetile.png" />data-rel="lightbox-image-1" data-rl_title="" data-rl_caption="">

Realfavicongenerator.net

Второй сервис https://realfavicongenerator.net, имеет более расширенные настройки и проверку иконок на валидность.

Загружаем на сайт свое изображение в размере не менее 260*260, чтобы получить более лучшие результаты.Загрузка favicon в realfavicongeneratorВ сервисе мы можем настроить иконку для разных устройств: размер изображения, цвет подложки и т.д. Здесь сразу отображается, как будет выглядеть favicon на устройстве.Настройки realfavicongeneratorПри генерации сервис также предоставляет код для вставки на сайт и запакованные иконки в архиве.

Проверка иконок

После установки иконок на сайт, вы можете их проверить валидатором https://realfavicongenerator.net/favicon_checker

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

Заключение

На сегодняшний день практически все браузеры поддерживают favic

webmasterie.ru

Иконка или фавикон для вашего сайта

Как установить иконку или favicon для вашего сайта

Приветствую вас друзья!

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

Что такое иконка или favicon сайта ?

Фавикон — это небольшая картинка, которая видна возле адреса вашего сайта и рядом с названием вашего сайта в «Избранном» или в «Закладках» вместо стандартной, общей для всех иконки.

Вы сможете услышать или увидеть еще смежные названия этого термина: favicon, favicon.ico,  иконка или картинка сайта.

foto_favicon

Зачем нужна иконка для сайта ?

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

Небольшая инструкция по созданию фавикона или иконки сайта

Я для вас подготовил небольшую инструкцию. Теперь давайте приступим к практике.

1. Готовим изображение

Подготовьте квадратную картинку, которую вы хотите видеть возле адреса сайта.

2. Создание фавикона

Я использовал онлайн ресурс по созданию фавикона сайта http://favicon.ru. Поэтому переходим на этот сайт.

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

3. Сохранить иконку

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

4. Установка иконки на сайт

Для загрузки иконки нужно воспользоваться программой файлового FTP — клиента (например  FileZilla) или заходите на свой хостинг и загружаете созданные выше файл «favicon.ico» в корневую папку установленного сайта например  «движка» сайта — WordPress если на этой  CMS у вас работает сайт.

Всё.

Теперь при загрузке Вашего сайта, будет виден значок. Как например у меня на этом сайте  блоге.

Спасибо за внимание.

P.S. Буду рад, если данная информация оказалась полезной для вас. Оставляйте комментарии.

До следующих выпусков.

Подпишитесь на новые статьи ! Я вышлю интересную и ценную информацию на Ваш e-mail, который оставите ниже. После того, как подтвердите свои данные Вы получите ПОДАРОК. С уважением Н.Я.

nikolayyakimenko.com

Как сделать иконку около сайта? О фавиконках (файл favicon.ico)или иконках сайта

Полезные советы для обслуживания веб сайта и работы с ним

Как сделать фавиконку для сайта

Мы смотрим на сайты в поисковиках и видим слева изящные картинки с символикой сайтов.

Что такое фавиконка (иконка сайта, пиктограмма сайта)?

Это картинка размером 16Х16 пикселей, которая характерна для большинства профессионально сделанных сайтов. В интернет - браузерах иконка сайта показывается в адресной строке и в папке Избранное (отсюда и название Favorite Icon), рядом с названием сайта. Чаще всего в качестве фавиконки используется логотип сайта. Иконка сайта - отличительная черта грамотных сайтов. Она придает ему индивидуальность. Кроме того, при поиске необходимого сайта иконка позволяет ускорить процесс, поскольку выделяет ваш сайт в выданном поисковиком списке. Нужно только настроить параметры поиска.

В Яндексе, например, это делается так: выбрать ссылку "настройка" в верхней части страницы (www.yandex.ru/setup/index.html?rnd=1157334667, в меню "Результаты поиска" выбрать "настройка поиска", а там найти пункт "графика" и отметить галочку "показывать пиктограммы сайтов".

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

Что такое фавиконка

Для создания или редактирования иконки подойдет любой редактор иконок. Можно также использовать плагин к Фотошопу Icon Factory, который позволяет создавать фавиконки из уже готовых картинок. Название готового файла должно быть favicon.ico и никаким иным.

Самое логичное и простое объяснение установки плагина для фотошопа "пошагово" для создания формата рисунков .ico вы найдете у Влада Мержевича на странице htmlbook

Однако, во многих случаях не удается произвести вложение плагина в папку фотошопа, например при использовании пакета программ Adobe CS5 возникают иногда трудности. В таком случае (да и во многих других) рекомендуем простенький следующий способ. Рисуете картинку в фотошопе с размерами 16х16px и сохраняете её как gif изображение. После этого переходите на страницу: http://www.codenet.ru/services/png-to-ico/index.php - это он-лайн преобразование файлов в формат ico. Загружаете туда вашу картинку и получаете на выходе нужный вам файл, который размещаете в нужном вам месте.О том, как это сделать - чуть ниже.

Куда загрузить готовый файл favicon.ico

Готовый файл favicon.ico необходимо загрузить в тот каталог на сервере, где лежит индексный файл вашего сайта. Если это не помогло (поисковые боты должны находить его по умолчанию), или index.html лежит не в корневом каталоге, то добавьте строку <LINK REL="SHORTCUT ICON" href="/your path/favicon.ico"> в индексный файл между тегами <head> и </head> . Кроме того, если вы считаете, что пользователь может занести в "Избранное" не только корневой URL вашего сайта, то скопируйте файл favicon.ico во все директории сайта.

Пример записи для робота между тегами <head> и </head>: <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="http://www.sitename.com/dirname/favicon.ico" type="image/x-icon">

Пиктограмма сайта - это стильно, это его лицо уже в поисковой выдаче. Кроме того, при отсутствии favicon.ico в корне вашего сайта каждый новый заход на страницу сайта оборачивается новой строкой в error.log:

[Sun Aug 05 15:55:55 20**] [error] [client 87.0.0.2] File does not exist: /home/localhost/www/favicon.ico

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

И напоследок - если вы проделали все рекомендуемые процедуры, но при заходе в поисковик не обнаружили иконку сайта в выдаче - не огорчайтесь. Дело в том, что обновление кэша у поисковиков, в частности, Яндекса, процесс длительный, поэтому процесс появления пиктограммки может занять несколько дней, а иногда и месяцев. Хотите ускорить её появление ПОПРОСИТЕ Яндекс учесть ваше "новшество"- для этого загрузите адрес вашей фавиконки в addурилку по адресу: http://yadd.ru/ (адрес вы должны записать абсолютный в виде: Http://www.ваше-доменное-имя.ru/favicon.ico).

Просмотреть сразу результаты вашей работы вы сможете, если введете адрес сайта в поисковую строку таких браузеров, как Mozilla или Opera, после загрузки сайта в окошечке слева от поисковой строки появится фавиконка. Если у вас еще остались вопросы - почитайте FAQ здесь: http://favicon.ru/faq/. (А можете нарисовать фавиконку сами быстро в он-лайн-редакторе: http://favicon.ru (Удачи).

www.seomax.ru

Шаг №42.Как поставить иконку на сайт? « Создание сайта на Wordpress с нуля для новичка

Привет друзья. Вы никогда не задавались вопросом о том, как поставить иконку на сайт?Если Вас в данный момент интересует именно этот вопрос, то вы попали правильно по адресу.

Начнем с того, что такое иконка сайта, и каково ее основное назначение на сайте.

Что такое иконка сайта?

Иконка сайта – это небольшое изображение,которое владелец сайта может назначить для своего сайта.После добавления иконки сайта, она будет отображаться в заголовке вкладок браузеров, в истории и закладках браузера, а также иконку сайта можно встретить в различных RSS лентах(установка RSS ленты на сайт), а также в многочисленных сайтах анализаторах и статистики(установка счетчика посетителей).

Посмотрите на рисунок, я стрелочкой указал иконку моего сайта,которая находится в заголовке вкладки браузера Chrome.

Установка иконки сайта на сайт

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

Иконка сайта в поисковой выдаче

Где взять красивую иконку для сайта?

Если у Вас еще нет подходящего изображения, которое будет использоваться для сайта, я Вам могу посоветовать один отличный сервис,на котором можно выбрать иконку для сайта, и на котором и я иногда выбираю изображения для своих проектов.Встречайте Iconfinder.com.

Впишите в поисковую строку тему Вашего сайта, и укажите размер в 16 пикселей, и также установите прозрачность.

Настройка поиска иконок на сайте Iconfinder.com

В списке появившихся изображений, выберите интересующее и скачайте его в формате ico.

Скачиваем иконку для сайта в формате ICO

Скачанный файл переименуйте в favicon.ico.

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

Вот мы вплотную и подобрались к волнующему моменту установки иконки на сайт.

Для начала загружаем иконку сайта, которую мы переименовали в favicon.ico в корень сайта.

Для этого подключитесь по ftp к сайту, и загрузите иконку в корень сайта.

Теперь если Ваш сайт на wordpress откройте файл header.php, который располагается в папке с шаблоном, и пробегитесь глазами, нет ли там похожего кода,который подключает иконку к сайту.И если есть измените только путь к картинке,а если нет тогда скопируйте код расположенный ниже,и вставьте в файл header.php

Код который подключает иконку к сайту:

<link href="http://адрес_сайта/favicon.ico" rel="shortcut icon" type="image/x-icon" />

После всех манипуляций сохраните файл header.php, и обновите его на сервере, либо загрузите его повторно.Теперь откройте Ваш сайт, и проверьте отображается ли Ваша иконка на сайте.Записал первый видео урок, не судите строго.

Если у Вас не получилось поставить иконку на сайт, обратитесь ко мне в комментариях,и я по возможности помогу.

wpcreate.ru

Иконки для сайта. Как установить фавикон (favicon)

Что такое «фавикон» для сайта

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

Эта статья написана специально для тех, кто незнаком с этим понятием, или хочет освежить/дополнить свои знания про иконки для сайта.

Итак, само название «фавикон» – это то, что осталось от исходного «favicon», так сказать – сленговая версия, которая популярна в русскоязычном интернете.Favicon – для сайта является его своеобразной визитной карточкой. Расшифровывается как «favourite icon» (если дословно, то это «любимое/избранное изображение»).

По факту это небольшая картинка, которая отображается:

  1. В результатах поиска рядом с названием отображаемой странички веб-ресурса.

     

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

     

  3. Во вкладке браузера, соответствующей отображаемой странице, рядышком с ее названием.

     

  4. В закладках браузера.

Зачем нужен favicon для сайта

Если установить «фавикон» на сайт ничего сверхъестественного не случится. Но некоторые положительные моменты все же будут:

  • Повышение узнаваемости веб-ресурса интернет-пользователями (если сделать иконку из картинки, которая будет выделяться среди других и легко запоминаться).  
  • Увеличение показателя CTR веб-ресурса (тоже полезно).  
  • Косвенное улучшение поведенческих факторов вследствие подсознательного выбора пользователем Вашего веб-ресурса в результатах поисковой выдачи (если он будет выделяться).

Как сделать «фавикон» для сайта

Для того чтобы сделать иконку из картинки, которую Вы выберете, нужно соблюсти некоторые условия:

  1. Назвать ее «favicon.ico».
  2. Размер иконки должен составлять 16х16 пикселей.
  3. Разместить favicon.ico для сайта в корне веб-ресурса.
  4. Нужно сделать иконку в формате .ico. 

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

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

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

Как создать новый «фавикон» или вообще его удалить

Для того, чтобы заменить старую иконку для сайта на новую или вовсе от нее избавиться, нужно всего лишь удалить favicon.ico из корневого каталога и, если это надо, загрузить туда же новый файл.

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

Небольшой итог

Независимо от способа, который Вы выберете, чтобы создать favicon.ico для сайта, это простейшее действие поможет существенно улучшить узнаваемость Вашего веб-ресурса среди сотен одинаковых конкурентов. А это однозначно не будет лишним! Спасибо за внимание! Не забудьте «лайкнуть»!

 

seo-akademiya.com

Что такое favicon: как создать и установить

Favicon

Многие пользователи интернета не знают, что такое фавикон, хотя регулярно сталкиваются с ним во время работы в сети. Слово favicon происходит от английского словосочетания favorite icon – избранная иконка или значок. Эта пиктограмма отображается во вкладках браузеров перед названием страницы (которое выводится с помощью тега title) и в качестве иконки в закладках.

Что такое favicon

Где можно увидеть favicon сайта?

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

Более подробно об иконке сайта

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

Favicon – это отображаемая в открытой вкладке браузера, левее от названия открытой странички, пиктограмма, так называемый мини-логотип. Является своеобразной визитной карточкой ресурса, независимо от движка (CMS), на котором тот создан, установленной темы и используемого шаблона. Пиктограмму можно встретить на сайтах под управлением как популярных CMS, таких, как WordPress, Bitrix, Joomla, Drupal, так и на менее распространенных. Изображение имеет размеры 16×16 пикселей и зачастую хранится в формате ico.Инфографика Favicon

Назначение favicon

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

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

Favicon в поисковой выдаче Яндекса

Favicon в поисковой выдаче Яндекса

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

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

Все эти факторы могут повлиять на увеличение посещаемости страниц вашего сайта.

Способы создания favicon

Так как фавикон – это пиксельный графический файл, то и создать его можно таким же образом, как и обычное изображение в формате ico. Сделать фавиконы можно следующими способами:

  • конвертировать из изображения практически любого формата через специальное приложение;
  • скачать готовую пиктограмму;
  • нарисовать с нуля в графическом редакторе или воспользоваться онлайн-генератором.

Разберемся с каждым способом подробнее.

Галереи готовых значков

Интернет пестрит различными ресурсами, в том числе и узкоспециализированными. Одними из таких сайтов являются ресурсы, хранящие и постоянно пополняющие коллекцию созданных пользователями (а порой и роботами) иконок. Любая такая галерея позволяет быстро выбрать и загрузить на компьютер или прямо на сайт понравившееся изображение.

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

  1. www.iconj.com/favicon-gallery-page1.html – содержит более 4 тысяч изображений, позволяет скачивать готовые решения необходимого размера в форматах ico и gif. После регистрации появится возможность добавления значков в избранное. Скопировав HTML-код, можно быстро вставить его в код своего сайта.

Добавление иконок в избранное на ICON J

Добавление иконок в избранное на сайте ICON J

  1. www.favicon.cc – большая коллекция значков, которые можно найти по дереву тегов или путем перелистывания страниц. Из функционала доступны загрузка в формате ico, online-редактирование оригинальной пиктограммы, конвертирование картинки в значок и просмотр новых/популярных файлов.

favicon.cc

Сайт favicon.cc

  1. www.freefavicon.com/freefavicons/objects – крупнейший тематический каталог, где можно отыскать и загрузить иконку. Файлы рассортированы по категориям для удобства выбора и названы согласно своему содержимому.

Категории для поиска фавикон

Категории для поиска фавикон на сайте freefavicon.com

Онлайн генераторы

При помощи специализированных сервисов нужную favicon можно создать самому за несколько минут.

  1. Favicon.cc – редактор, который дарит возможность выбрать фон и пиксель за пикселем нарисовать рисунок при помощи кисти, поддерживающей прозрачность. Также на сайте можно преобразовать любой графический файл в фавикон с его последующим редактированием.

Онлайн-редактор для создания фавикона

Создание с помощью онлайн-редактора Favicon.cc

  1. Logaster.ru предлагает поработать над визиткой, логотипом и фавиконкой сайта одновременно, дабы основные графические элементы были взаимосвязаны и выполнены в едином стиле. Выполняется все в несколько простых шагов: создаем логотип, на его основе генератор предлагает соответствующую ему иконку, после выбора которой откроется графический редактор для ее корректировки. Готовый логотип и значок загружаем после регистрации в системе или через контекстное меню.

Регистрация на Logaster.ru

Регистрация на сайте Logaster.ru

  1. www.favicon-generator.org – простой сервис, создающий favicon из выбранного изображения без возможности его редактирования или обрезки.

Сервис для создания favicon

Сервис favicon-generator.org

  1. www.michurin.net/online-tools/favicon-editor.html – узконаправленный ресурс, где после загрузки картинки в jpeg, bmp или gif формате она будет уменьшена до 16 пикселей по обеим сторонам без сохранения пропорций, а число цветов уменьшится до 16 для минимизации размера файла на выходе. Дополнительно доступна функция модификации готовых ico.

Онлайн-редактор иконок favicon.ico

Онлайн-редактор иконок favicon.ico

  1. www.favicon.by и favicon.ru поддерживают рисование собственных пиктограмм и превращение области или целого изображения в фавикон. Есть инструменты заливки и пипетка.

Рисование собственных пиктограмм

Рисование собственных пиктограмм

  1. www.favicomatic.com превратит загруженный графический файл в ico размером 16×16, загрузит его на ПК и сгенерирует HTML-код для вставки на сайт.

Фавикон генератор Favic-o-matic

Фавикон генератор Favic-o-matic

  1. www.antifavicon.com – генератор простых favicon с текстовыми надписями, в котором пользователь задает текст, выбирает цвет фона, букв и границы, и получает готовую иконку.

Генератор favicon с текстовыми надписями

Генератор favicon с текстовыми надписями

Графические программы

При помощи IconFX, Axialis IconWorkshop и подобных графических редакторов можно легко создать иконку для любого портала, но лишь при условии владения пользователем базовыми навыками работы с подобными приложениями. Если вы работаете в Photoshop, загрузите для него расширение под названием ICOFormat, тем самым добавив поддержку импорта иконок в формате ico.

Расширение ICOFormat

Расширение ICOFormat

Через IconFX и альтернативы, можно как нарисовать, так и конвертировать картинку или ее часть в иконку, отредактировав ее, выбрав цвет и размер.

Создание нового рисунка в IconFX

Создание нового рисунка в IconFX

Добавление на сайт

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

<head> ... <link rel="shortcut icon" type="image/x-icon" href="директория_хранения_файла/favicon.xxx"> ... </head>

<head>

...

<link rel="shortcut icon" type="image/x-icon" href="директория_хранения_файла/favicon.xxx">

...

</head>

Где атрибут href содержит относительный или полный путь к файлу на сервере, а rel сообщает браузеру о том, что этой строкой задается фавиконка сайта.

Ответы на популярные вопросы

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

Делаем иконку из картинки или фото

Множество графических редакторов, специализирующихся на работе со значками, позволяют конвертировать png, bmp, jpeg и прочие форматы в ico с возможностью обрезки исходного файла и редактирования результата. На примере IcoFX это делается следующим образом:

  1. Открываем редактор и перетаскиваем в его окно графический файл.
  2. Выбираем вариант создания иконки из изображения.

Создания иконки из изображения

Создания иконки из изображения

  1. После редактирования сохраняем полученный ico-файл и загружаем его на сайт.

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

Делаем прозрачный фавикон

Известно, что среди распространенных графических форматов прозрачность поддерживается файлами с расширением png. В качестве исходника берем файл png и конвертируем его в фавикон с помощью Photoshop (установив перед этим плагин ICOFormat), иного графического редактора или онлайн-сервиса, поддерживающих прозрачный слой, например, Favicon.cc.

Как получить анимированную иконку

Создать анимированный favicon поможет специализированный сервис:

  1. Переходим по ссылке favicon.htmlkit.com/favicon/.
  2. Жмем «Обзор» и указываем путь к первому слайду (кадру) анимации.

Создание анимированного favicon

Создание анимированного favicon

  1. Кликаем по кнопке «Add another image», дабы добавить второй кадр и указываем желаемую картинку, и так со всем кадрами.
  2. По окончании добавления слайдов щелкаем «Download FavIcon Package».

Скачивание FavIcon Package

Скачивание FavIcon Package

Как скачать favicon?

Пиктограммы, как правило, лежат в открытом доступе. Простейший способ копирования фавиконки с чужого сайта заключается в переходе по адресу: www.google.com/s2/favicons?domain=1 или favicon.yandex.net/favicon/1, где единицу в обоих случаях заменяем на URL площадки.

Копирование фавиконки с другого сайта

Копирование фавиконки с другого сайта

Также помогает дописывание /favicon.ico в конце корня сайта, к примеру, www.youtube.com/favicon.ico.

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

Дописывание /favicon.ico в конце корня сайта

Допишите /favicon.ico в конце названия сайта

Что делать если не отображается фавикон в Яндексе

Если в поисковике не визуализируется недавно добавленная пиктограмма, скорее всего проблема кроется в следующем:

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

Заключение

Добавление favicon способно не только сделать сайт красивее, но и повысить количество его посетителей. А как это сделать, вы уже знаете!

Автор статьи:

Олег Скрып

Руководитель компании ApollonGuru, ментор SEO-материалов vc.ru. В интернет-маркетинге с 2012 года. Люблю чтобы все было четко.

Будем признательны за каждый лайк:

« Older Article

Next Article »

apollon.guru

Иконка - это... Что такое Иконка?

Значки на панели инструментов текстового редактора

Значки были изобретены в 1970 году в исследовательском центре компании «Ксерокс» в Пало-Альто, чтобы облегчить взаимодействие с компьютером для новичков.

Вид значков

Как правило, значки представляют собой картинки квадратного формата стандартных размеров.

В операционных системах пикселов.

Значки KDE существуют в виде PNG‐изображений 6 размеров, и масштабируемых векторных SVG‐изображений.

В различных средах также используются значки с размером 24, 40, 60, 72, 92, 108, 128 пикселов и другие; векторные значки (например, в форматах. Многие современные среды и приложения умеют задавать значки по умолчанию. Значок для приложения выбирается стандартным, для файла — в зависимости от типа файла (часто берётся значок приложения, обрабатывающего этот файл по умолчанию). Иногда значки для графических файлов получаются из самого файла (например, уменьшенная копия изображения). Некоторые продвинутые интерфейсы умеют делать то же и для неграфических файлов (документов, презентаций). Не все значки статичны. Например значок, представляющий связь с интернетом, может наглядно показывать, идёт ли в данный момент передача данных, значок менеджера задач показывать загрузку процессора и т. д.

Независимое создание значков

Те значки, которые уже́ включены в операционную среду, не всегда удовлетворяют вкусам и потребностям пользователей, поэтому появилось множество независимых художников и целых творческих групп, специализирующихся на создании новых значков — как отдельных, так и целых серий в единой стилистике или единой тематике.

Работа по созданию значков нередко бывает сопряжена с созданием целого массива изображений одного и того же значка, но с разным количеством пикселов, в разных видах и для различных операционных систем.

«Иконка» или «значок»?

В английском языке подобные графические элементы пользовательского интерфейса называются словом «icon» (от греч. είκων — образ, символ, икона). При недостатке официальной документации по программному обеспечению на русском языке в среде русскоязычных компьютерных пользователей за значками закрепилось жаргонное обозначение «иконка» (уменьшительное от икона). Данное обозначение нельзя назвать удачным, ибо понятие «икона» в русской культуре несёт вполне определённую смысловую нагрузку, мало совместимую с обозначаемым понятием. В качестве альтернативы предлагались разные термины, но в настоящее время за обозначением картинок в интерфейсе пользователя закрепилось название «значок». Так, компания Майкрософт в документации на своё программное обеспечение называет эти элементы «значками».[1] Семантически слово «значок» вернее соответствует обозначаемому понятию, ибо картинка представляет собой именно небольшой знак приложения, документа, окна и т. п., а не является его образом (основное значение слова «иконка»). Обычно рекомендуется избегать слова «иконка», а в официальной документации использовать слово «значок».

См. также

Ссылки

Примечания

  1. ↑ В мае 1999 года Екатерина Лажинцева (тогда менеджер по операционным системам в отделе подготовки русских продуктов корпорации «Майкрософт») изложила историю выбора термина «значок» в статье «Как „Майкрософт“ решает вопросы выбора терминологии» (та же статья на другом сайте). По её словам, слово «пиктограмма» было отвергнуто из-за излишней длины, а вариант «иконка» вызывал опасения как задевающий религиозные чувства.

Wikimedia Foundation. 2010.

dic.academic.ru