Favicon — что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы иконок


Содержание материала:

Создание favicon.ico

С помощью этого сервиса Вы сможете легко преобразовать любое изображение формата jpg, gif, png в favicon.ico. Стандартный размер изображения для favicon 16×16 пикселей. В режиме Эксперт Вы можете сделать иконки размером: 16×16, 24×24, 32×32, 48×48, 96×96, 128×128 и объединить их в один файл. Данный генератор фавикон поможет Вам сгенерировать иконку Favicon для Вашего сайта из изображения любого размера.

На этой странице собраны примеры иконок сайтов:

А это иконки сайтов которые анализировались и строились за последнее время:

Что такое favicon?

Favicon (англ. Favorite Icon) — это небольшая иконка (изображение, картинка) в специальном формате, которая отображается в адресной строке браузера при просмотре сайта, вкладке браузера или в его закладках (“Избранном”).

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

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

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

Что лучше изобразить на фавикон?

  • Иконка должна соответствовать тематике сайта.
  • бренд, если у Вас сайт связан с этим брендом. При этом для разных страниц можно отображать разные бренды;
  • Применяйте фавикон, на который хочется кликнуть, это повысит кликабельность при просмотре в поиске Яндекса, Гугла;
  • Сделайте несколько дизайнов фавиконок для различных разделов Вашего сайта.
  • Сделайте несколько дизайнов фавиконок для различных событий (напр. Нового Года, Дня Святого Валентина или Дня космонавтики, :).

Разместите полученный файл в корне вашего сайта, там где находится основной индексный файл(index.php). Для указания браузеру местонахождения иконки сайта(favicon) в секции заголовка страницы (head) вставьте следующую строку:

Как сделать анимированный favicon?

Формат ICO не поддерживает анимацию. Но современные браузеры позволяют использовать формат GIF для миниатюр. Возможно указать для современных браузеров один анимированный файл(favicon.gif), а для древних, типа Intertet Explorer, другой(favicon.ico). Для этого в секцию head внесите следующие две строчки:

Естественно предварительно нужно поместить оба файла в корневую папку сайта.

Как быть, если запрещен показ изображений в браузере?

Если сделать favicon c внедренным изображением в код старницы:

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

Как получить favicon с сайта

Не все вебмастера располагают favicon.ico в корне сайта. Для получения адреса favicon используйте следующий скрипт:

Поисковые системы Google, Яндекс и favicon

Робот поисковых систем кешируют иконки сайтов. Закешированные иконки доступны по следующим запросам:

Кроме этого, Яндекс может сделать Вам «спрайт» из иконок разных сайтов:

Иконки для iPhone и iPad

Даже если Вы не указываете link-ссылку на картинку iphone все равно будет искать в корневой папке сайта файл с именем apple-touch-icon.png и если найдет, то Возьмет из него картинку, закруглит по углам и на нее будет наложен блик автоматически самоим устройством. Для избежания этого вместо apple-touch-icon.png следует написать apple-touch-icon-precomposed.png владельцы айфонов и точей, т.к. для них мы делаем красивую иконюшку размером 57×57 (можно кстати и больше, но это стандартный размер иконки на ланч-скрине), подключая ее так:

Правильно опубликовать и объявить иконки для старых и новых Retina iPad:

Как динамически менять favicon?

HTML5 и favicon

В HTML5 был добавлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:

Как объявить плитку для планшетов на Windows 8?

Объявление для Windows 8.0 выглядит как-то так:

Windows 8.1 и IE 11 ожидают несколько версий изображения, объявленных в browserconfig.xml. Например:

Можно не объявлять, если имя файла не менять:

Создаём фавикон для сайта

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

Что такое «фавикон» и зачем он нужен

Немного истории. Само слово «favicon» исходит из сочетания двух английских слов: «favorite» и «icon». В дословном переводе – «избранная картинка». Сейчас более известен, как «значок интернет-сайта». Изначально подразумевал свое отображение только на различных страницах-вкладках или в закладках интернет-браузера, имел стандартный размер 16х16 пикселей и расширение «.ico». Впервые «фавикон» заявил о себе в марте 1999 года, когда набирающая стремительно обороты компания «Microsoft» выпустила на мировой рынок новый и современный по тем меркам браузер «Internet Explorer 5.0». Именно с этих пор данное мини-изображение стало применяться априори и приобрело значение того элемента, без которого можно считать SEO-оптимизацию не завершенной.

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

Для большей наглядности и понятия представим скриншот.

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

Форматы отображения

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

Формат, пиксели Где используется
16х16 Стандартные размер. Применяется чаще всего, так как подходит для отображения на большинстве браузеров и устройств
32х32 В некоторых случаях в «Internet Explorer» и «Safari», если это оправданно
57х57 Отображение на мобильных смартфонах «iPhone»
72х72 Отображение на планшетах «iPad»
114х114 Ретина-дисплеях «iPhone»
144х144 Ретина-дисплеи «iPad»

*- для справки. Ретина (retina)-дисплеи – общее обозначение жидкокристаллических дисплеев, производимых фирмой «Apple» с 2010 года, применяемое в маркетинге. Отличаются от остальных достаточной плотностью пикселей или ppi, чтобы глаз человека не смог их заметить. Дисплеи с аналогичными показателями, установленные в других смартфонах и мобильных устройствах не могут считаться retina-дисплеями.

Перейдем к самому основному – созданию фавиконки.

Способы создания «favicon» для веб-сайта

На сегодняшний день можно воспользоваться следующими способами создания:

Использование готовых фавиконок в интернете. Благо, таких онлайн-хранилищ сейчас в достаточном количестве. Есть, как платные сервисы, так и с бесплатным скачиванием выбранной картинки. В некоторых нужна регистрация, в других такая необходимость отсутствует. Рассмотрим поиск и последующее сохранение картинки формата «.ico» на сервисе findicons.com. Переходим по веб-ссылке , вводим необходимую нам тематику или переходим сразу в пункт меню «Обзор».

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

Остается готовое изображение разместить на сайте, но об этом поговорим позже.

При помощи специальных онлайн-генераторов с возможностью их создания непосредственно там же. Одна из таких платформ — favicon.by, являющаяся бесплатной . Все очень просто. Рисуем или загружаем подготовленную иконку, при необходимости редактируем и затем сохраняем себе на компьютер. Возможен еще и импорт файла с внешнего интернет-ресурса, заказ (от 500 рублей) или просмотр уже подготовленных файлов, находящихся в разделе «Коллекция фавиконок»

Еще один способ, являющийся наиболее актуальным с точки зрения профессионализма и свободы действий – использование графических векторных программ типа «Photoshop». Как это делается? Находим необходим файлик на просторах интернет-пространства, сохраняем его на свой компьютер/ноутбук и открываем через вышеуказанную программу.

Возьмем к примеру колесо для сайта шиномонтажа.

Открываем. Сразу находим инструмент «Волшебная палочка» (специальный вид ластика) и стираем те белые места, в которых нам нет нужды, делая данные части прозрачными. Зачем? Во-первых, делаем картинку более презентабельной, во-вторых, уменьшаем общий вес изображения для быстрой загрузки.

Для того, чтобы удалить ненужные области и «подогнать» размер холста под очертания непосредственного изображения, необходимо зайти в раздел «Изображение» в верхнем меню, далее «Тримминг».

Далее создаем необходимого размера файл. Находим снова «Изображение». На этот раз смотрим пункт под названием «Размер картинки», переходим. Прописываем нужный (16х16, 64х64 пикселей и т. д.). Не забываем поставить галочку напротив «Сохранять пропорции», чтобы ваше творение «не поплыло».

Заготовка есть. Теперь остается выполнить команду «Сохранить как» и выбрать формат «пнг».

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

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

Подготовив фавиконку, остаётся дело за его размещением. Процедура по сути проста и может иметь несколько вариантов исполнения:

    При помощи панели администрирования. Очень удобная функция, которая присутствует на большинстве известных систем. В подавляющем большинстве даже не требуется производить конвертацию в формат «.ico» – систем делает за вас все сама. Один из ярких примеров: «WordPress». Заходим в панель, выбираем «Внешний вид», далее «Настроить».

Нажав на пункт «Свойства сайта», находим специальное поле редактирования слева и производим подгрузку необходимого изображения.

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

В разделе «href» прописывается путь, который ведет к загруженной нами фавиконке, которую мы не забываем загрузить на сервер. Стандартное место, где ее размещают – папка «images». Название файла стандартное – «favicon.ico».

Заключение

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

Что такое Favicon? Как и где его сделать?

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

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

Что же это за волшебный зверь такой?

Favicon – это иконка для «Избранного». Его название происходит от FAVoritesICON. Поисковая система Яндекс занимается индексированием фавиконов, что, несомненно, положительно скажется на ранге Вашего сайта. Но не сразу.

На сегодняшний день есть 2 варианта получить фавикон – сделать его самостоятельно или скачать из онлайн-галерей.
Изначально иконка имеет расширение ICO, но тот же Яндекс преобразует его в PNG, делая доступным теперь уже Ваш favicon по специальному адресу:

Отличительные черты фавикона

Для favicon разработан ряд требований, которым иконка Вашего сайта должна в обязательном порядке соответствовать:
Базовый формат расширения – ICO. Размер также строго регламентируется и должен составлять 16 на 16 пикселей.

Как получить favicon

Favicon можно сделать самостоятельно как в Photoshop или любом другом графическом редакторе, так и в специальном генераторе иконок. Однако, для создания этой полезной картинки в Photoshop потребуется установить специальный плагин ввиду того, что данный редактор не умеет по умолчанию создавать изображения с расширением ICO.

Хотя, гораздо проще и быстрее создать Favicon на специальных онлайн-сервисах.

Также можно скачать иконку с одной из многочисленных галерей.

Создаем собственный Favicon

В интернете достаточно много генераторов для создания иконок для сайтов. Один из наиболее популярных – Faviconcc, позволяющий создать собственный шедевр, рисуя попиксельно.

Он достаточно прост в эксплуатации. Но, если возникнут трудности, всегда можно обратиться к помощи глобальной сети. Посмотреть, что получилось, можно в режиме Preview. Когда будет получен желанный результат, воспользовавшись кнопкой Download Вы без труда загрузите иконку на свой сайт.

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

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

Хорошим примером простого, функционального и удобного генератора фавикона является Favicon.ru.

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

Яндекс начинает поиска файвикона с корневого каталога сайта. Логично саму иконку разместить именно там.

Можно установить иконку и мануально, прописав

В популярных сегодня Joomla и WordPress используются несколько отличные способы:

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

Фавикон (favicon) — важный элемент дизайна сайта. Это иконка (файл с расширением ICO), обычно размером 16х16px или 32х32px, которая выводится во вкладке браузера перед названием сайта или любой его страницы. Фавикон придает индивидуальность сайту и узнаваемость в череде открытых вкладок браузера, а также имеет значение в плане SEO. Вы можете сделать фавикон онлайн с помощью онлайн генераторов или скачать готовые, выбрав из коллекции фавиконок или создать в фотошопе (нужен плагин).

Онлайн генераторы фавикон

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

ВАЖНО: Изображение которое станет прототипом фавикон, необходимо загружать квадратное. То есть, если оригинальная картинка прямоугольная, то предварительно ее нужно вписать в квадрат, сохранить и далее использовать.

Favicon CC

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

Favicon BY

Генератор такой же как и Favicon CC, но на русском языке. Также присутствует предпросмотр готового результата.

Bestwebservice RU

Генератор фавикон позволяющий создать иконки в нескольких типовых размерах от 16 x 16 до 512 x 512px.

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

Коллекции фавиконок

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

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

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

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

Доброго времени суток, уважаемый читатель блога inetsovety.ru! В этой статье я расскажу как создать и установить фавикон на сайт. Мы рассмотрим сайт генератор favicon.ico и подборки готовых иконок для скачивания.

Что такое фавикон для сайта и зачем он нужен?

Favicon (фавиконка) — это картинка, изображение которой показывается перед адресом сайта в адресной строке, а также слева от названия сайта на вкладке браузера. Размеры favicon 16 на 16 пикселей. Наглядно смотрите на картинке:

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

Как сделать фавикон из картинки онлайн

Чтобы создать иконку ico онлайн, переходим на сервис генератор favicon из подобранной картинки — favicon .

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

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


Где скачать готовый favicon.ico для сайта

Если Вы не хотите самостоятельно создавать иконку favicon, то Вы можете скачать готовые фавиконы из следующих сайтов:

  • iconj.com — для скачивания favicon нажмите ICO напротив выбранной картинки.
  • findicons.com — введите в поле поиска ключевое слово по тематике, на понравившуюся картинку нажмите правой кнопкой мыши, скачанную картинку переименуйте, как favicon.ico
  • faviconka.ru — еще один сервис, содержащий множество иконок favicon для скачивания. Аналогично предыдущему сайту, сохраните картинку на компьютер и переименуйте ее.

к оглавлению ↑

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

Того, чтобы поставить иконку favicon, необходимо полученный файл favicon.ico загрузить на хостинг. Для этого через FTP клиент загрузите файл иконки в корневую папку Вашего сайта(это папка в которой находятся файлы index.php, sitemap.xml, а также основные папки wp-admin, wp-content). Подробно, где найти корневую папку сайта на хостинге читайте в статье по ссылке https://inetsovety.ru/kornevoy-katalog-sayta/

После этого в админке выберите из меню Внешний вид — Редактор. Откройте файл header.php, так как именно он отвечает за верхнюю часть сайта. В этот файл необходимо вставить следующий код:

  • inetsovety.ru /favicon.ico» type=»image/x-icon» />
  • inetsovety.ru /favicon.ico» type=»image/x-icon» />

    Замените адрес моего блога inetsovety.ru, адресом своего блога. Данный код вставляйте то место, где увидите такие строчки

    Сохраните изменения в файле шаблона header.php. Обновите страницу и фавикон должен поставиться. Если в текущем браузере фавикон не отобразился, то попробуйте открыть свой сайт через другой браузер. У меня, например, в браузере Мозилла иконка отобразилаь только после перезапуска браузера, хотя у других браузерах все работало сразу же после установки. Если же favicon не отображается ни в одном из браузеров, значит Вы сделали что-то не так.

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

    Favicon — что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы иконок

    Favicon — что это такое и как его создавать

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

    Favicon, короче говоря, это иконка (изображение), которое выводится в браузере перед адресной строкой. Также фавикон применяется при добавлении страницы в закладки.

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

    Для чего нужен favicon

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

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

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

    Для чего предназначен инструмент «Генератор Favicon»?

    Посредством его вы сможете создать уникальную иконку для своего веб-ресурса.

    Для этого следует только загрузить в специальном поле исходную картинку, размер которой не обязан превышать 150 Кб, выбрать подходящий размер будущей иконки и нажать кнопку «Конвертировать».

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

    Онлайн сервисы создания Favicon

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

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

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

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

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

    Исходя от браузера и конфигурации, фавикон далеко не всегда отображается, даже если он располагается в одном из вышеуказанных мест и сайт видит его.

    В заключение

    Online Favicon Generator

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

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

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

    Автор: Alexander Wayne

    21 сентября 2020 в 15:03

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

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

    Что такое фавикон и почему он важен для СЕО?

    Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:

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

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

    Подведем небольшие итоги:

    • Favicon влияет на поведенческие факторы и кликабельность в выдаче.
    • Поисковые роботы также могут учитывать наличие или отсутствие фавикона.
    • Такой технический недочет может привести к падению трафика.

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

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

    Где скачать готовый вариант?

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

    Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.

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

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

    Но я еще раз повторюсь, что лучше будет создать фавикон самостоятельно.

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

    Онлайн-сервисы

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

    Например, Favicon.by. Он позволяет вам нарисовать логотип при помощи простых инструментов. Сервис создает иконку в формате ICO.

    Как видите, здесь все интуитивно понятно. Выбираем карандаш, настраиваем цвет и рисуем. Если вашему логотипу нужна какая-то основа, то вы можете воспользоваться “Импортом из файла” и “Импортом с сайта”.

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

    Обратите внимание на левую часть окна “Ваш результат”. Там вы посмотрите, как будет выглядеть ваша иконка во вкладке браузера.

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

    Adobe Photoshop

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

    Итак, у нас есть два варианта:

    1. Сделать фавикон из картинки (логотипа компании или других).
    2. Просто выбрать шрифт и сделать его в виде буквы.

    Второй вариант используется наиболее часто. Наверное, больше половины сайтов просто создают квадрат размером 16 на 16 или 32 на 32, выбирают шрифт (как правило, Roboto или Open Sans), цвет, соответствующий гамме проекта. И все – favicon готов.

    Открываем Фотошоп, после чего сразу идем в “Меню” – “Создать”.

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

    Размер должен быть 16 x 16 или 32 x 32 (в пикселях). Все остальное – по вашему усмотрению, но я бы советовал выставить так, как показано на скриншоте.

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

    Разберу самый популярный вариант. Как я уже и говорил, это фавикон в виде буквы. Обычно первой из названия проекта. Кликаем на “Т” в панели инструментов, после чего в любой участок внутри квадрата.

    Теперь вводим любую букву с клавиатуры. Мы можем уменьшить или увеличить ее, поменять цвет, добавить тени или расположить в любой части созданного нами квадрата. Давайте сделаем лого в виде буквы “А”.

    Цвет я регулировал при помощи специального инструмента в правом верхнем углу. Здесь вы можете выбрать абсолютно любой вариант при помощи мыши. В верхней панели также есть инструменты для выбора шрифта и размера. На картинке 32 x 32 оптимальным размером буквы будет 8 – 10 Пт.

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

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

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

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

    Далее нам нужно сохранить наше творение. Идем в “Файл” – “Сохранить как”. Выбираем нужный формат (PNG, GIF или JPEG) и название – favicon, нажимаем “Сохранить”.

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

    Теперь, когда мы создали фавикон одним из способов выше, мы должны установить его на наш сайт. Это можно сделать несколькими способами.

    Самый простой и доступный – через корневой каталог. Его мы рассмотрим в первую очередь.

    С помощью корневого каталога

    Для начала нам нужно конвертировать файл в ICO. Это можно сделать при помощи любого онлайн-сервиса, достаточно ввести в поисковую строку: “Конвертация в ICO” или “PNG в ICO”. Загружаем туда фотографию, получаем favicon.ico.

    Теперь мы должны загрузить этот файлик в корень нашего сайта. Можно сделать это при помощи FTP-клиента или файлового менеджера.

    Корень сайта, как правило – public_html. Независимо от платформы. Но в некоторых темах могут наблюдаться проблемы с отображением фавиконки. Чтобы пофиксить их, мы должны вручную добавить в header.php следующий код:

    Для этого идем во “Внешний вид” – “Редактор”, находим в боковой панели нужный файл и кликаем для редактирования. Код мы должны вставить внутри тега .

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

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

    Через тему WordPress

    Заходим в настройки темы, используя верхнюю панель на сайте (“Внешний вид” – “Темы”). Далее идем в “Свойства сайта”.

    Вот тут-то мы и настраиваем фавиконку. Просто нажимаем на “Выбрать/изменить изображение”, далее откроется менеджер, через который мы и загружаем нашу картинку.

    Плагины

    Также есть возможность сделать это с помощью плагинов, но это не рекомендуется из-за нагрузки на CMS.

    Идем в “Плагины”, выбираем “Добавить новый”. Откроется страница каталога, где в окно поиска мы должны ввести ключевое слово – Favicon. Нашему взору будет представлено большое количество всевозможных плагинов. Все они работают примерно одинаково, но я все же позволю себе объяснить, как все это делается, на примере одного из самых популярных – All in One Favicon.

    Нажимаем на кнопку “Установить”, а после активируем нужное расширение.

    После того как плагин будет установлен и активирован, мы должны перейти в настройки. Они представлены в таком виде.

    Для каждого формата здесь есть соответствующая вкладка. Допустим, вы создали иконку в формате GIF и хотите, чтобы именно она отображалась во вкладке. Соответственно идем во вторую по счету строку, нажимаем “Загрузить” и в файловом менеджере выбираем наш файл. То же касается и других форматов.

    Отдельного внимания заслуживает вкладка “Apple Touch Icon Frontend”. В ней вы сможете задать иконку для устройств от Apple.

    В отличие от обычного фавикона, логотип для Айфонов или Макбуков имеет большее разрешение и качество. То есть вам, чтобы загрузить картинку, придется создать еще один вариант.

    Уже в разрешении 512 x 512 или 1 024 x 1 024. Однако для мелких сайтов, в принципе, нет нужды проделывать подобное.

    Заключение

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

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

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

    С уважением, Alexander Wayne

    Фавикон для сайта: создание и установка

    Значок веб-сайта, или фавикон – крайне полезная и необходимая вещь для любого сайта. Давайте разберем, что же это такое, и как он поможет в продвижении вашего сайта.

    Фавикон (favicon) – это маленькая иконка размером 16х16 или 32х32 пикселя, в которой, как правило, помещают основной логотип или первую букву из названия компании. Отображается во вкладке браузера рядом с названием страницы сайта и в поисковой выдаче слева от позиции сайта.

    Основные плюсы

    • Улучшает вид сайта в поисковой выдачеОчень хорошо это видно на изображении, представленном выше. Сайты, у которых присутствует иконка, не только более заметны в поиске, но и вызывают больше доверия у пользователей.
    • Узнаваемость сайтаФавикон повысит узнаваемость вашего бренда в Интернете. Также при желании повторно посетить ваш сайт, пользователь легко сможет найти его в закладках или истории браузера, просто кликнув по знакомой иконке.


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

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

    Данная строчка ‹link rel=”icon” type=”image/png” href=”/шаблон/favicon.ico” /› вставляется в код сайта после тега ‹head› и указывает браузеру и поисковикам, откуда брать иконку.

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

    Также, если у вас совсем нет изображения для иконки, можете воспользоваться сервисом Логастер. Онлайн-генератор позволяет создать логотип, а потом на основании этого логотипа – создать фавикон для сайта.

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

    На основании логотипа сервис может сгенерировать несколько десятков возможных вариантов фавикона.

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

    Почему у моего сайта не отображается иконка в поиске?

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

    Вывод

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

    Попробуйте создать иконку сами, а если не получится, обращайтесь к нам! Добавление фавикона нашими специалистами стоит 750 руб. Полный список дополнительных услуг и цены на них смотрите здесь »

    © 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

    Спасибо, мы старались!

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

    Сожалеем, что не оправдали ваши ожидания ((
    Возможно, вам понравятся другие статьи блога.

    Пошаговое руководство по самостоятельному продвижению сайта

    • Все обязательные этапы продвижения
    • Инструкции, как делать самому
    • Ориентировочные цены специалистов

    Favicon: что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы фавиконов

    Здравствуйте, дорогие читатели блога PROgeek.ru. Сегодня я Вам поведаю о том, что такое Favicon, зачем он нужен, где, почему и как его можно создать, и как говорится «с чем его едят».

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

    ico», которая отображается во вкладках практически всех популярных браузеров, а также выводится в поисковой выдаче Яндекса, напротив Вашего сайта с левого края (в поисковой выдаче Гугла Favicon не отображается).

    Вот как отображается Favicon во вкладке браузера:

    А вот как выводится в поисковой выдаче Яндекса:

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

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

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

    Должно пройти определенное время, после чего фавикон будет радовать Вас и Ваших посетителей в поисковике Яндекс.

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

    Как создать Favicon.ico самому

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

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

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

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

    1. favicon.ru — один из популярных инструментов для создания фавикона в рунете. Это сервис примечателен тем, что он позволяет как самому нарисовать фавикон, так и преобразовать фавикон из изображения. Для того, чтобы преобразовать изображение в фавикон, нажмите на кнопку «Выберите файл», соответственно выберите нужное изображение, и нажмите «Открыть».

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

    by — по функционалу и исполнению очень похож с первым примером. Также, как и в первом варианте, Вы можете либо сами нарисовать Favicon, либо преобразовать из изображения:
    ru.toolson.net — сервис для онлайн генерации фавиконов.

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

    Минусом данного сервиса, как отмечалось выше является отсутствие возможности самому нарисовать Favicon.
    www.degraeve.com — удобный зарубежный сервис для создания Favicon в режиме онлайн. Также, по функционалу идентичен приведенному первому примеру. Сервис работает молниеносно быстро (что очень радует).

    Вы также можете либо сами нарисовать Favicon, либо преобразовать его из изображения:

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

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

    Теперь перейдем к более сложному для новичков-вебмастеров вопросу — как же установить на свой сайт Favicon? На самом деле, все очень просто. Вам всего лишь нужно отыскать на сервере Вашего сайта корневую папку/директорию.

    В львиной доле корневой папкой/директорией является папка public_html, реже папки www, domains, HTDOCS. В данную папку Вам необходимо разместить файл Favicon.ico. Разместили? Отлично, теперь можете смело любоваться своим фавиконом.

    Если у Вас не отображается Favicon — то тому есть несколько причин: либо у Вас прописан специальный адрес к отображению фавикона, либо Вы не разместили фавикон в корневую папку/директорию.

    Также, следует иметь ввиду, что Favicon в CMS устанавливается определенным образом, который описан в документации к CMS.

    Как создать фавикон и в чем его польза для продвижения

    Честно, я очень люблю фавикон. Я питаю к нему сколь глубокую, столь же и целомудренную платоническую любовь. Это не значит, что я рассказываю знакомым вебмастерам байки о том, как я сменил фавикон и трафик вырос на 10% (хотя постойте… может такое и было), но значит, что когда фавикон моего нового сайта появляется в индексе Яндекса, то сам сайт начинает казаться мне чуть более СДЛьным.

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

    Фавикон (Favicon – сокращение от «favorite icon») — это изображение, которое отображается в адресной строке браузера перед адресом, во вкладке, соответствующей окну с открытой страницей сайта, а также при добавлении ресурса во вкладки с избранным. Эти изображения могут помочь пользователю лучше запомнить бренд или компанию, повысят узнаваемость сайта. Часто в качестве фавикона используют уменьшенное или немного переделанное в соответствии с форматом изображение логотипа компании или бренда.

    Преимущества использования фавикона

    Использование favicon приносит пользу со временем. Вот например зацените такие варианты:

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

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

    Особенности работы Яндекса с фавиконками

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

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

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

    Также можно вписать в адресную строку следующую конструкцию: для Яндекса — http://favicon.yandex.net/favicon/www.site.ru (где вместо www.site.ru нужно напечатать домен своего сайта).

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

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

    • Размер изображения не соответствует требуемому: 16х16 пикселей;
    • Формат изображения не тот – должен быть ico, jpeg или png (первый вариант – более предпочтительный для Яндекса);
    • Картинка размытая или не уникальная – иногда по этим причинам поисковик блокирует иконки;
    • У Яндекса происходит обновление системы – тогда спустя какое-то время все должно исправиться само;
    • Сайт находится далее сотой позиции в выдаче – в этом случае фавикон тоже может не отображаться.

    Проверив картинку по этим критериям, нужно исправить недостатки. Если и после этого не отображается иконка, можно обратиться в поддержку Яндекса.

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

    Происходит это обычно через 2-4 недели после публикации сайта с изменениями.

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

    Как создать фавикон

    Если вы хотите создать из большого изображения в формате, например, png, ico-файл, то вам не помешало бы поставить Adobe Photoshop для начала. Затем устанавливается плагин ICO для Фотошопа (поищите в поисковике плагин для вашей версии ФШ). Когда он установлен, мы копируем нужный файл ICOFormat.8bi (для 32-бит) или ICOFormat64.8bi (для 64-бит) по одному из следующих путей:

    Если папки «Plug-ins» или «File Formats» нет, то ее необходимо создать. Теперь при диалоге сохранения можно выбрать ico формат. Размеры создаваемых значков могут быть кратны 8 (16×16, 24×24, 32×32 и так далее, но надежнее всего выбрать именно 16×16).

    Затем изображение, которое должно стать фавиконом, открывается в Фотошопе. Жмется “Image – Image Size” и размер изображения меняется на 16х16 пикселей. Затем жмется “File – Save as” и выбирается формат ICO (название файла нужно сделать favicon.ico).

    Сам я в последнее время перевожу изображения в ico формат без фотошопа. С помощью сервиса https://realfavicongenerator.net/.

    Далее файл загружается в корневую папку сайта. После этого через «Внешний вид – редактор» админки WordPress в файле header.php прописываются следующие строки:

    Через некоторое время фавикон появится на сайте.

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

    Яндекс пугает фавиконных очкошников

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

    Сервисы

    Для создания иконок также существуют специальные программы и ресурсы, среди которых популярностью пользуются:

    • favicon.cc – простейший редактор позволит создать несложное изображение, принцип работы немного напоминает Paint. Также выбираются цвета, и выполняется рисунок нажатием на пиксельные квадраты, которые нужно закрасить. Есть инструмент для исправления. Созданную картинку здесь же можно сохранить на компьютер в качестве готового изображения favicon. В процессе работы внизу экрана можно наблюдать предварительный результат в том виде, в каком он будет отображаться в браузере. Ресурс также предлагает большой выбор готовых иконок;
    • favicon.ru – здесь лучше создавать фавиконы из уже готовых изображений. Картинка загружается с компьютера, обрабатывается системой и преобразуется в файл favicon.ico, который затем можно скачать;
    • iconj и audit4web – базы, в которых можно найти готовые фавиконы.

    Есть и такой сервис:

    Можно обратиться за разработкой изображения и к дизайнеру, но это обойдется существенно дороже.

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

    Что такое favicon

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

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

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

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

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

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

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

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

    Назначение favicon

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Создание favicon.ico

    С помощью этого сервиса Вы сможете легко преобразовать любое изображение формата jpg, gif, png в favicon.ico. Стандартный размер изображения для favicon 16×16 пикселей.

    В режиме Эксперт Вы можете сделать иконки размером: 16×16, 24×24, 32×32, 48×48, 96×96, 128×128 и объединить их в один файл.

    Данный генератор фавикон поможет Вам сгенерировать иконку Favicon для Вашего сайта из изображения любого размера.

    Новичок Эксперт Готовые favicon Описание

    На этой странице собраны примеры иконок сайтов:

    А это иконки сайтов которые анализировались и строились за последнее время:

    Favicon (англ. Favorite Icon) – это небольшая иконка (изображение, картинка) в специальном формате, которая отображается в адресной строке браузера при просмотре сайта, вкладке браузера или в его закладках (“Избранном”).

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

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

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

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

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

    Что лучше изобразить на фавикон?

    • Иконка должна соответствовать тематике сайта.
    • бренд, если у Вас сайт связан с этим брендом. При этом для разных страниц можно отображать разные бренды;
    • Применяйте фавикон, на который хочется кликнуть, это повысит кликабельность при просмотре в поиске Яндекса, Гугла;
    • Сделайте несколько дизайнов фавиконок для различных разделов Вашего сайта.
    • Сделайте несколько дизайнов фавиконок для различных событий (напр. Нового Года, Дня Святого Валентина или Дня космонавтики, :).

    Разместите полученный файл в корне вашего сайта, там где находится основной индексный файл(index.php). Для указания браузеру местонахождения иконки сайта(favicon) в секции заголовка страницы (head) вставьте следующую строку:

    Как сделать анимированный favicon?

    Формат ICO не поддерживает анимацию. Но современные браузеры позволяют использовать формат GIF для миниатюр. Возможно указать для современных браузеров один анимированный файл(favicon.gif), а для древних, типа Intertet Explorer, другой(favicon.ico). Для этого в секцию head внесите следующие две строчки:

    Естественно предварительно нужно поместить оба файла в корневую папку сайта.

    Здесь можно сделать анимированнй gif.

    Как быть, если запрещен показ изображений в браузере?

    Если сделать favicon c внедренным изображением в код старницы:

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

    Как получить favicon с сайта

    Не все вебмастера располагают favicon.ico в корне сайта. Для получения адреса favicon используйте следующий скрипт:

    Как создать favicon (иконку) для сайта с помощью онлайн генераторов, установить фавикон, галереи иконок

    Добрый день, всем читателя блога LoleknBolek.com. Сегодня поговорим о фавиконе сайта, как его создать с помощью онлайн генераторов, где скачать галерею и как установить favicon на свой сайт WordPress. Иконки сайта — это очень актуальная вещь, так как она улучшает зрительное восприятие и первое впечатление о Вашем сайте.

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

    Favicon — это небольшое изображение (размером 16х16 пикселей) и имеющее расширение .ico. Его можно наблюдать в левой части вкладки в браузере и в выдаче поисковой системы Яндекс (читайте также про фильтры Яндекса тут). Покажу на фото ниже, что я имею ввиду.

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

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

    У Яндекса даже есть свой бот, который выкачивает фавиконы. Апдейты происходят не часто, но где-то раз в месяц бывают (что такое апдейты читайте здесь). Создать его можно в Фотошопе, правда есть небольшие трудности. Photoshop не может сохранять фото с расширением .ico. Для того, что б он научился это делать, нужно ставить специальный плагин.

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

    Как создать фавикон для сайта?

    Для создания фавикона для Вашего сайта есть 3 способа:

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

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

    Favicon.ru – очень удобный сервис. Тут Вы можете закачать любую картинку со своего компьютера и подредактировать ее, можно заказать разработку иконки у дизайнеров, а можно нарисовать самому. Как по мне, то самый лучший вариант — загрузить красивое фото и отредактировать ее в этом сервисе.

    Быстро, просто и красиво. Внизу есть просмотр того, что Вы нарисовали (или закачали). И большая кнопка «Скачать» с помощью который, Вы сможете сохранить иконку на свой компьютер. Favicon.cc – тут тоже можно загрузить фото и его редактировать онлайн. Соответственно можно и с нуля нарисовать собственный.

    Очень удобный онлайн генераторов фавиконов. Так же есть возможность предпросмотра Вашего творения Внизу есть кнопка «Download Favicon» с помощью которой можете скачать Вашу иконку. В приципе это 2 самых удобных и популярных онлайн генератора фавиконов.

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

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

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

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

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

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

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

    Это изображение называется Фавикон (читаем Favicon).

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

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

    Фавикон (favicon) что за атрибут?

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

    Словоформа Favicon состоит из пары слов английского языка Favorites Icon (воспользуйтесь переводчиком). Почти для каждого интернет проекта есть свой мини-логотип, который отображается на закладке браузера. Размер файла иконки составляет 16×16 пикселей и имеет расширение ico (хранилище иконок для Windows).

    Отображение фавикона на закладках браузера


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

    Чем полезен Favicon для сайта?

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

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

    Отображение фавикона в поисковой выдаче

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

    Способы создания Фавикон для сайта

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

    Готовые коллекции Фавикон

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

    Что касается выбора изображения, то здесь следует руководствоваться тематическим содержанием вебсайта. Так, например, для портала об автомобилях можно поставить иконку в виде авто, на сайт о бизнесе и финансах – фавикон в виде доллара и так далее.

    Сделать фавикон (favicon.ico) для сайта

    Favicon — (от англ. FAVorites ICON в переводе «значок для избранного») — значок веб-сайта размером 16x16px или 32x32px, который отображается браузером в адресной строке или рядом с сохраненной закладкой. Традиционно название и расширение иконки используется favicon.ico.

    Наш сервис способен конвертировать выбранное Вами изображение (размером до 175 Кб) в иконку значка сайта (размерами 16x16px или 32x32px). После генерации необходимо лишь загрузить favicon.ico в нужный каталог хостинга сайта.

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

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

    Куда загрузить фавикон чтобы он был онлайн?

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

    Зачем указывать путь к Фавикону?

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

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

    Фавикон — что это такое и как его сделать

    Фавикон — обычное изображение, значок (в переводе с англ. — «иконка для избранного»), отображаемое в начале адресной строки перед названием URL, в сниппете в результатах поиска Яндекса, а также в закладках.

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

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

    Фавикон под микроскопом

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

    Со слов Яндекса, размер фавикона должен составлять 16х16, 32х32 или 120х120 пикселей. К слову, чаще всего применяется изображения размера 16х16 пикселей. Рекомендованный формат ICO. К допустимым форматам относятся: GIF, JPEG, PNG и BMP.

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

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

    В указанной поисковой системе есть специальный бот индексации фавиконов YandexFavicons, который собирает и обновляет иконки для всех ресурсов. Стоит обратить внимание, что индексация осуществляется периодически (несколько дней, месяц). Т. е. новоиспеченный фавикон может появиться в поисковой выдаче Yandex возле описания вашего проекта не сразу, а спустя некоторое время.

    Когда поисковик найдет Favicon.ico на вашем сервере, он изменит его графический формат ICO в PNG, после чего ваш фавикон можно будет найти по следующему адресу:

    При проверке не забудьте подставить поле последнего слеша URL-адрес своего блога.

    Создание фавикона — важный этап в продвижении проекта. К преимуществам использования фавиконов можно отнести:

    • узнаваемость бренда;
    • доверие посетителей;
    • повторные посещения;
    • экономия времени пользователей.

    Основная выгода с этого — узнаваемость бренда. С помощью «мини-логотипа» можно привлечь большее количество посетителей из поисковой выдачи (в частности со страниц Яндекса), поскольку возле адреса вашего веб-ресурса будет миловаться знакомая иконка. Она то и будет побуждать пользователей отдавать предпочтение вам, а не конкуренту (соседу по выдаче). Однако чтобы эта иконка выполняла все возложенные на нее функции, она должна привлекать внимание, быть яркой и запоминающейся.

    Осталось разобраться, как создать и как создать и установить фавикон на сайт?

    Как создать фавикон

    Из определения он должен быть размещен в корне сайта (возможно и другое местонахождение) и сохранен в одном из вышеуказанных форматов в размере 16х16 пикселей.

    Его можно создать в Photoshop, минус — графический редактор Фотошоп не может сохранять изображения в предпочтительном формате (ІСО).

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

    Вариант для ленивых — скачать готовый favicon из онлайн-каталога или галереи.

    Обзор онлайн-генераторов, где найти коллекцию фавиконов

    Favicon generator — сервисы, где можно сотворить «мини-логотип» для сайта или преобразовать подходящую картинку в нужный формат.

    Faviсon.cc

    Удобный сервис, в котором можно сделать эксклюзивную иконку — нарисовать ее с нуля попиксельно. Для этого переходим на сервис и в меню слева нажимаем кнопку «Create New Favicon».

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

    Чтобы переместить рисунок по холсту сервиса, ставится галочка возле чекбокса «move». Для того чтобы посмотреть что получилось предусмотрен блок «Preview», который находится под пиксельной сеткой. Для скачивания готового фавикона на компьютер нужно нажать кнопку «Download Favicon».

    Если вы не Пабло Пикассо и нарисовать с нуля для вас равносильно прыжку из парашюта, загрузите на сервер для будущего фавикона картинку любого формата и размера, она будет, как болванка. Чтобы загрузить изображение на генератор, нажимается кнопка «Import Image» в левом меню.

    На открывшейся странице нужно кликнуть кнопку «Выбрать файл», найти на компьютере подходящую картинку. При загрузке прямоугольной картинки можно отформатировать ее в квадрат (16х16). Для этих целей предусмотрена вкладка «Shrink to square icon». Учтите, в таком случае изображение будет искажено по одной из осей.

    Чтобы соотношение сторон остались прежними, поставьте точку в чекбоксе «Keep dimensions».

    После всех манипуляций нажимаем кнопку «Upload». Редактирование загруженной фавиконки будет доступно аналогичным способом, что и создание с нуля. Для скачивания готового шедевра на ПК следует нажать кнопку «Download».

    Этот онлайн генератор еще и предоставляет коллекцию фавиконов, которые создавались другими пользователями этого сервиса ранее. Они выложены в общем доступе. Чтобы посмотреть галерею нужно в левом меню нажать кнопку «Latest Favicons» — экспонаты, отсортированные по дате или кнопку «Top Rated Favicons» — по рейтингу.

    Чтобы скачать понравившийся экземпляр кликните левой кнопкой мыши по его названию и на открывшейся странице выберите «Download Favicon».

    Logaster.ru

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

    Для создания фавикона необходимо ввести название компании или сайта и нажать кнопку «Далее».

    Онлайн генератор предоставляет уже готовые к использованию шаблоны фавикона. Для скачивания иконки нажмите кнопку «Посмотреть и скачать» и на открывшейся странице «Скачать».

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

    FaviconGenerator

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

    Последовательность действий следующая: выбираем файл и нажимаем кнопку «Create Favicon».

    На заключительном этапе остается только кликнуть по ссылке «Download the generated favicon» и на ваш ПК будет скачан архив полный разноразмерных фавиконов.

    AntiFavicon

    Сервис, предоставляющий возможность создавать фавикон с надписью. Цветовая гамма настраивается в области «Colors», а текст надписи вводится в полях «Top text» и «Bottom tex».

    Для скачивания готового значка следует кликнуть по миниатюрной надписи «save as favicon file».

    Iconj

    От остальных отличается тем, что позволяет созданную иконку не скачивать (но можно и скачать), а оставить непосредственно на сервисе и получить ссылку к этому файлу.

    Для создания фавикона выбираем файл и нажимаем «Upload Now».

    Спустя секунду изображение можно будет скачать на компьютер по ссылке «Click here to download your Favicon.ico File». Здесь же можно скопировать HTML код, который затем нужно разместить в файле главной страницы сайта. Помимо этого сервис генерирует ссылку на фавикон, которую можно расположить на страницах сайта.

    Также в сети можно найти и другие генераторы, которые позволяют создать фавиконы с нуля или же доработать уже имеющееся изображение. В частности FavIcon from Pics, DeGraeve, Generator, Онлайн редактор иконок favicon.ico, Online Favicon, Free Favicon Generator и Фавикон-генератор. Стоит отметить, что все они бесплатные.

    Можно не растрачивать силы на эксклюзивность и найти уже готовые иконки в интернете. Для этого существуют специальные галереи с коллекциями бесплатных фавиконов. Хотелось бы выделить:

    • Галерея иконок для сайта favicon.ico;
    • Iconj;
    • Favicon.cc;
    • The Favicon Gallery.

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

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

    Есть некоторые отличия между установкой фавикона на сайт Joomla и WordPress.

    В первом случае достаточно просто закинуть файл в папку с активным шаблоном. Для этих целей используйте бесплатный FTP-клиент FileZilla или консольный файловый менеджер FAR Manager.

    Более простой способ: зайти в панель управления веб-хостингом (ISPmanager, cPanel, ISPConfig), открыть каталог, затем папку templates

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

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

    Если это не так, вам, как и в случае с Джумла, нужно будет загрузить файл с изображением в активный шаблон (/wp-content/themes/ваша_тема). Затем следует отыскать среди прочих файлов файл header.php и сразу же после открывающего тега вставить следующий код:

    После правки не забудьте нажать кнопку «Сохранить».

    В том случае, если фавикон не отображается, убедитесь, что ему присвоено правильное имя — favicon.ico и очистите кэш.

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

    Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter

    Устанавливаем favicon на сайт

    Быстрая навигация по этой странице:

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

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

    Favicon — это иконка, которая по умолчанию имеет формат 16 на 16 пикселей и отображается в верхней части вкладки браузера рядом с названием сайта/страницы. Если иконка не задана или задана не правильно, то тогда в браузере рядом с названием сайта просто рисуется значок самого браузера (например, значок Firefox или Google Chrome).

    Однако в действительности роль этой картинки состоит не только в украшении браузера. Дело в том, что эти картинки выводятся в поисковой выдаче Яндекса (если иконка не задана — показывается пустое место). Представьте ситуацию, что Яндекс предложит пользователю на его запрос два примерно одинаковых сайта, но к одному из них будет дополнительно проставлена иконка — на какой сайт более вероятно перейдет пользователь? Конечно, в первую очередь он перейдет на сайт, предложенный первым по списку, но как раз именно наличие картинки, которая всегда более приятна пользователю, чем текст, может привлечь посетителя именно на ваш сайт.

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

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

    Про то, как сделать иконку ico, у нас есть отдельная статья ( ссылка ), потому перейдем сразу к рассмотрению вопроса о том, каким должен быть фавикон.

    Каким должен быть файл с иконкой и где он должен находиться?

    Исторически сложилось, что для сайтов используется формат .ico. Особенность этого формата состоит в том, что внутри одного .ico-файла может храниться несколько картинок размером от 16х16 до 64х64 (размер должен быть кратным восьми). Правда, для веб-сайтов в действительности используется только формат 16х16 — ни Яндекс, ни браузер не будут показывать другой размер иконки.

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

    Теоретически, сохранить файл можно в любой папке с файлами сайта, но крайне рекомендуется сохранять его именно в корневой директории вашего ресурса — чтобы он всегда был доступен по адресу vash-site.ru/favicon.ico, так как по умолчанию именно там его ищут поисковики и браузеры.

    Как добавить на сайт?

    Добавление иконки для вашего ресурса является очень простым: достаточно лишь прописать необходимый html-код между тегами

    Как сделать favicon для своего сайта

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

    Что такое favicon

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

    Как создать favicon

    Если говорить о технических характеристиках, то стандартный размер для фавиконки — 16 х 16 пикселей; также возможно использование изображения размером 32 x 32 пикселя и совсем редко 48 х 48. Изначальный формат этого знака — ico, однако сейчас последние версии браузеров поддерживают также вывод фавиконок в форматах png, gif и jpeg. Набирает популярность и еще один вид фавиконки — анимированная (или динамическая). В этом случае это будет не статическая картинка, а меняющийся файл в формате gif. При выборе подобного формата имейте в виду, что на данный момент его вывод поддерживается только двумя браузерами: Firefox и Opera, а остальные браузеры будут показывать лишь первый кадр.

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

    Для создания favicon подойдет любая графическая программа, в том числе и Paint: все, что вам нужно сделать, это изменить размеры изображения на 16 х 16 (или 32 х 32) пикселей и сохранить в одном из перечисленных выше форматов.

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

    Ресурсы для создания фавиконок:

    • http://www.xiconeditor.com/ — вы можете загрузить изображение и затем отредактировать его или нарисовать favicon с нуля, множество настроек позволят вам воплотить в жизнь любые творческие желания;
    • http://www.favicon.cc/ — более простой редактор для создания фавиконок, на этом ресурсе вы также найдете коллекцию различных значков, которые можно отсортировать по тегам или названию;
    • http://antifavicon.com/ — редактор для тех, кто хочет вместо картинки использовать favicon в виде отдельных букв или слов.

    Итак, общие рекомендации к favicon следующие: размер 16 х 16 пикселей либо 32 х 32 пикселя, минимальный размер (желательно, чтобы иконка весила менее 1 Кбайт), формат ico (как наиболее предпочтительный) либо png.

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

    Как загрузить favicon на сайт

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

    Если вы хотите разместить favicon.ico в какой-либо другой папке, вам следует прописать путь к этому файлу внутри контейнера :

    Тип (type) прописывать необязательно, но в дальнейшем эта информация понадобится для настройки кэширования.

    Если вы используете CMS WordPress:
    вы можете сделать так, как написано выше, либо использовать специальный плагин Favicon by RealFaviconGenerator. Еще обратите внимание на официальную документацию WordPress, касающуюся favicon: https://codex.wordpress.org/Creating_a_Favicon

    Если вы используете CMS Joomla:
    вам нужно загрузить файл в директорию /joomla/templates/ . Официальную документацию вы можете найти в этом разделе: https://docs.joomla.org/Changing_the_site_favicon

    Как оптимизировать favicon

    Используйте кэширование – пропишите в файле .htaccess соответствующую строку:

    Не забудьте про Nginx: проверьте, что тип файла ico включен в перечисление в файле конфигурации веб-сервера:

    Как добавить favicon для портативных устройств

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

    Android

    Выбор фавиконки для Android-устройства зависит от показателя PPI (pixels per inch – пикселей на дюйм); это важно учитывать, так как из-за этого одно и то же изображение может выглядеть по-разному на экранах с различным параметром PPI. Общая таблица с указанием коэффициента плотности и соответствующего ему размера фавиконки выглядит следующим образом:

    Что касается формата, то изображения должны быть в формате png.

    iOS

    В отличие от Android, размер иконок для iOS-устройств зависит от наличия Retina и версии операционной системы. В таблице это выглядит так:

    Для того, чтобы создать фавиконку для всех возможных форматов и устройств, вы можете воспользоваться специальным сервисом: https://realfavicongenerator.net/.

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

    Сначала вам нужно выбрать изображение, которое составит основу вашей фавиконки. Оно необязательно должно быть квадратным, но такой формат предпочтителен. В противном случае вы сможете заполнить пустые края изображения каким-либо цветом (для iOS) либо оставить их прозрачными (для Android). Также RealFaviconGenerator создает иконки и для других платформ (Windows 8 и 10).

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

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

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

    Топ-пост этого месяца:  Uptolike Share Buttons — бесплатный плагин по добавлению кнопок социальных сетей в WordPress
  • Добавить комментарий