Содержание

Создаем и устанавливаем красивый фавикон (favicon) для сайта

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

Favorite Icon (“значок для избранного”) – именно так расшифровывается favicon.ico. Он был придуман еще в прошлом веке. В марте 1999 года, браузер “Internet Explorer 5” стал первым поддерживать эти значки. По сравнению с 99 годом, интернет-технологии ушли далеко вперед, а иконка осталась и используется по сей день. Конечно, за 16 лет она претерпевала ряд усовершенствований, о некоторых из них мы сегодня поговорим. Также расскажу о том, как можно нарисовать собственную иконку или сгенерировать ее из графического файла. Не обойду вниманием и сайты, где можно выбрать и скачать красивый favicon для своего сайта.

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

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

В самом начале, иконка имела расширение ICO, но сегодня этим дело не ограничивается, и можно встретить ее в таких форматах, как GIF, JPEG и PNG. Эти форматы поддерживаются и всеми современными интернет-браузерами, за исключением только поддержки JPEG в Internet Explorer.

Есть два основных способа создания иконки. Первый – ручная прорисовка favicon на специализированных онлайн-сервисах или при помощи графических редакторов типа Photoshop. Второй – работа уже с готовыми иконками или изображениями. Рассмотрим оба варианта, и пойдем по порядку…

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

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

Как правило, эти сервисы позволяют не только рисовать, но и конвертировать графический файл в стандарт ICO. Таких сервисов существует несколько, вот только некоторые из них:

  1. Favicon.ru – русскоязычный сервис, скриншот из которого вы видите чуть выше. Позволяет как рисовать, так и конвертировать из других форматов в формат ICO.
  2. Favicon.cc – англоязычный сервис, с аналогичными возможностями, но поддерживающий создание анимированных иконок.
  3. Favicon.by – русскоязычный сервис (судя по домену белорусский). Функционал, также аналогичен предыдущим. Анимация не поддерживается, но есть возможность указав адрес сайта, «утащить» с него иконку для последующей переделки в редакторе.

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

Использование готовых иконок для сайта

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

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

  1. IconSearch.ru – русскоязычный сервис, с приличным набором иконок. Размеры иконок от 16х16 до 128х128 пикселей. Есть возможность сохранения иконки в форматы ICO и PNG.
  2. IconSeeker.com – аналогичный сервис, только англоязычный. Больших отличий нет, за исключением того, что попадаются иконки размера 256х256.
  3. IconFinder.com – это один из моих любимых поисковиков иконок. Там правда много платных иконок, но и среди бесплатных есть что выбрать. Помимо упомянутых уже ICO и PNG форматов, можно скачать в SVG, или даже в AI (векторная графика Adobe Illustration). Иконки размерностью до 512х512 пикселей.

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

Прозрачность и размер иконки

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

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

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

Так в мобильном Google Chrome, вместо иконки 16х16, можно увидеть цветной квадрат с первой буквой из названия сайта по середине. Другие браузеры могут растягивать маленькую иконку, что выглядит визуально не очень красиво. Доля мобильного трафика сегодня высока, и может достигать 20-25%. И с каждым годом только растет, поэтому, подумать о нем на будущее будет не лишним.

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

Если на вашем сайте уже есть стандартный фавикон от CMS, то самый простой вариант, это заменить файл favicon.ico на вашем хостинге новым фалом (обычно он находится в корне сайта). Также в ряде CMS установка favicon осуществляется через админку и не нужно ковыряться коде сайта.

Если стандартной иконку и вас нет, и в админке она тоже не меняется, то необходимо прописать небольшие строчки в HTML код вашего сайта. Их нужно размещать между тегов <head> и </head>. У разных CMS структура шаблонов разная, поэтому, иногда приходится поискать в каком файле шаблона есть эти теги. У WordPress, например, этот файл называется «header.php», а у OpenCart – «header.tpl».

Если у вас иконка в формате ICO, то нужно вставить следующий код:

<link rel=»icon» href=»/favicon.ico» type=»image/x-icon»> <link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»>

<link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>

<link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»>

Данная запись справедлива, если фавикон находится в корне сайта. Если он имеет иной путь, то перед «/favicon.ico», нужно записать путь к файлу. Например, такой: «http://мой-сайт.ru/моя-папка/favicon.ico».

Код для иконки в формате GIF:

<link rel=»icon» href=»/favicon.gif» type=»image/gif»> <link rel=»shortcut icon» href=»/favicon.gif» type=» image/gif»>

<link rel=»icon» href=»/favicon.gif» type=»image/gif»>

<link rel=»shortcut icon» href=»/favicon.gif» type=» image/gif»>

Код для иконки в формате PNG:

<link rel=»icon» href=»/favicon.png» type=»image/png»> <link rel=»shortcut icon» href=»/favicon.png» type=» image/png»>

<link rel=»icon» href=»/favicon.png» type=»image/png»>

<link rel=»shortcut icon» href=»/favicon.png» type=» image/png»>

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

sa1nikov.ru

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

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

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

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

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

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

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

Содержание статьи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ресурсы с иконками:

  1. //www.thefavicongallery.com/ — небольшая коллекция изображений разных тематик. Всего в коллекции около 300 иконок. Каждую будущую фавиконку можно просмотреть в увеличенном виде, а затем сохранить на свой компьютер
  2. //www.iconj.com/ — содержит более 3 тысяч изображений для фавикон. Сервис позволяет сохранять изображения в разных графических форматах.
  3. //www.favicon.cc/ — огромнейший банк favicons, количество которых на момент написания статьи 228 839 штук. Единственный минус, что на одной странице находится 20 иконок, и чтобы выбрать понравившуюся придется долго листать.
  4. //www.favicon.by/ — не знаю количество, но очень много готовых иконок, при нажатии на понравившуюся, фавиконка сразу скачивается на компьютер.
  5. //www.flaticon.com — ресурс с огромным количеством готовых иконок, на все случаи жизни, которых на момент написания статьи более 384 тыс. сгруппированных по 7 тыс. группам. Иконки можно скачать в разных форматах с необходимым разрешением.

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

Графические редакторы

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

Будущий фавикон для своего сайта я создавал в любимом всеми редакторе Adobe Photoshop. Сделал нужную мне картинку размером 800×800 пикселей, с последующей конвертацией в необходимый формат — 16×16 pix.

Картинки в поисковых системах

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

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

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

Иконки в Яндекс.Картинках

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

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

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

Вот список наиболее популярных сервисов для онлайн создания фавикон:

  1. //www.favicon.cc/ — англоязычный сервис создания Favicon
  2. //favicon.ru/ — русскоязычный аналог, есть один минус, при сохранении конечной картинки изначальный прозрачный фон получается черным, хотя может я не до конца разобрался с настройками.
  3. //www.favicon.by/ — имеет два интерфейса, русский и английский. Очень мне понравился этот сервис, рекомендую и Вам.

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

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

Разберем наиболее популярные варианты установки favicon.

Плагин — простейшее решение

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

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

  1. Использовать свой граватар (gravatar), для этого у Вас должен быть настроен глобально распознаваемый аватар. Как правило это фото владельца блога. Не рекомендую использовать данную опцию, после установки Вы сами поймете почему.
  2. Заранее подготовленный файл с изображением. Для этого необходимо указать внешний URL картинки.
  3. Готовые фавиконы зашитые в плагин по умолчанию, коих ровно 100.

Установка фавикона с помощью плагина

Встроенные возможности WordPress

Почти у всех платных (и некоторых бесплатных) тем для WordPress есть встроенная возможность добавить Фавикон на свой блог. Например данная опция для темы моего блога выглядит так:

Встроенная возможность в WordPress

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

Установка с помощью кода html

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

Первым шагом подготовленный файл иконки (16×16 pix) необходимо загрузить на сервер Вашего хостинга, в корневую папку Вашего сайта (папки www или public_html) . Сделать это можно из админки хостинга, либо как вариант воспользоваться службой FTP в Total Commander.

Далее в файл index.html (если у Вас лендинг или подписная страница), или в файле header.php (если у Вас сайт на одной из популярной CMS) внутри тега <head> необходимо прописать следующий код:

link rel="icon" href="/favicon.ico" type="image/x-icon"
link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"

После этой процедуры Фавикон порадует своим появлением на вкладке браузера Вашего сайта. Если он не появится рекомендую очистить кэш браузера используя сочетание CTRL+R.

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

P.S. Рекомендую посетить страницу РЕКОМЕНДУЮ, где собраны качественные, а главное бесплатные курсы.

С Уважением Дмитрий Леонов | leonov-do.ru

Рекомендую прочитать похожие статьи:

Новости блога Получай обновления первым!


Согласен (-на) с политикой конфиденциальности и обработки персональных данных

leonov-do.ru

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

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

Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:

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

План урока:

  1. Создание Favicon с нуля.
  2. Создание фавиконки из готового изображения.
  3. Сервисы с готовыми иконками для сайта.
  4. Прикрепление полученной иконки к сайту.

Как создать Favicon (фавикон) с нуля

Есть один очень удобный сервис. Он имеет адрес favicon.cc. Этот сервис по построению фавиконок выглядит так:

Чтобы нарисовать favicon достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:

Я нарисовал следующий фавиконку:

Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:

Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т.п.) посмотреть итог работы:

Теперь нам нужно просто сохранить иконку сайта на свой компьютер. Для этого нужно нажать на кнопку “Download Favicon”:

Создание favicon (фавикон) из готового изображения

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

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

Список сервисов с готовыми favicon (фавикон)

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

  1. iconj – Огромная база фавиконок;
  2. favicon.cc – Да, в этом сервисе тоже есть уже готовые фавиконки.
  3. Favicon.co.uk – Можете глянуть и сюда, вдруг найдете что-то подходящее.
  4. audit4web – Большое количество иконок для сайта.

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

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

  1. Полученный favicon.ico скопировать в корень блога (т.е. в папку, где находятся папки wp-content, wp-admin и т.п.). В моем случае эта папка называется public_html:
  2. Далее открываете файл header.php (напомню, он находится в папке темы Вашего блога). И прописываете в этом файле следующий код (главное условие: код должен быть после тега <head> и до </head>):
    <link rel="shortcut icon" href="http://адрес_сайта/favicon.ico"; type="image/x-icon" />
<link rel="icon" href="http://адрес_сайта/favicon.ico"; type="image/x-icon" />

    Естественно в 2 местах слова адрес_сайта меняете на адрес СВОЕГО блога.

  3. У меня получилось следующее:
  4. Теперь сохраняете файл header.php, обновляете на сервере и наблюдаете за результатом:

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

P.s. Постоянные читатели, наверное, заметили, что я уроки WordPress стал давать немного реже. Возникла небольшая проблема со временем. До какого периода это продлиться? Честно, не знаю. Но минимум раз в неделю буду стараться писать уроки (по возможности – чаще). Поэтому лучше Вам, уважаемый читатель, для удобства подписаться на RSS блога Новичка.

P.s.s. Открыл новый раздел Ученики. Новички, которые создают блог с нуля, это отличная возможность “засветиться”!

_____________________________________________

Следующий урок: Урок 51 Регистрация в поисковиках.

Подпишитесь на бесплатные уроки

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

wpnew.ru

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

Что такое Фавикон (Favicon)?

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

В переводе с иностранного обозначает «иконка для избранного»

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

Фавикон необходим:

  1. Для создания респектабельного вида.
  2. Для возможности выделиться из общей массы пользователей.
  3. Для придания узнаваемого облика своему сервису.
  4. Для преимущественного выбора конкретного сайта. При вводе пользователем поискового запроса, выдается информация в поисковой системе множество результатов. Обычно пользователями выбирается не только первые по рейтингу сайты, но и привлекательные по фавикону.

В каком формате я получу Favicon?

Для сайта используется Фавикон размерами 16х16 пикселей, с расширением ico. Такое расширение обычно используется для хранения «иконок».

Online генераторы и коллекции favicon

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

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

Ведь так важно, чтобы он был оригинальным и не встречался в свободном доступе сетей интернета. Для этого можно воспользоваться предоставляемой информацией на сайте .http://favicon.ru/

Коллекции и галереи Фавикон

На просторах интернета имеется немало ресурсов с расположенными на них коллекциями и галереями Фавиконов, как в бесплатном доступе, так и в платном.

Наиболее распространенные сервисы галерей Фавиконов будут предоставлены ниже:

  1. http://www.thefavicongallery.com/. Сервис небольших размеров, ограниченный выбор, однако тематика разнообразная. Отличается простотой скачивания и дальнейшего использования фавиков. 
  2. http://www.iconj.com/ . В сервисе присутствуют Фавиконы с анимацией. Неудобством использования сайта является разбитие общего количества картинок на множество страниц, поэтому, чтобы выбрать понравившийся, необходимо потратить достаточно времени для поиска.
  3. http://www.favicon.cc/. Хороший выбор неанимированных Фавиконов. 
  4. http://www.favicon.co.uk/. Крупный сервис, для скачивания, достаточно нажать на картинку Фавикона и указать адрес скачивания на свое устройство. 
  5. http://favicon-generator.org/. Небольшой сайт, маленькая коллекция, но присутствует множество тем. Предоставляется возможность не просто воспользоваться готовым Фавиконом, а и самостоятельно создать собственный шедевр.


Лучший генератор Фавиконов

Ссылка на генератор: www.xiconeditor.com

При помощи рассматриваемого генератора Фавиконов можно запросто его создать из любого изображения или из фотографии. Для этого необходимо:

  1. Зайти на сайт xiconeditor.com
  2. Произвести выбор шаблона 16х16:
  3. Импортировать файл:
  4. Нажать на кнопку «загрузить»:
  5. Загрузить файл.
  6. Произвести редактирование изображения путем его обрезки. Нажатием кнопки «ОК» подтверждаем согласие с окончанием создания фавикона:
  7. Посмотреть на готовый Фавикон путем нажатия кнопки «предварительный просмотр»:

Проблемы с прозрачностью у сервиса генератор фавикон

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

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

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

Я уже смог сделать фавикон онлайн. Что мне с ним дальше делать?

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

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

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

Для этого можно воспользоваться:

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

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

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

  • Генератор Amichurin.Appspot.com. С его помощью  можно самостоятельно создавать картинки путем рисования. Из изображения в данном сервисе не удастся создать Фавиконы.
    Выглядит он следующим образом:
  • Генератор Favicon-Generator.org. Он позволяет оформлять различную цветовую гамму фона. Основной принцип работы с ним мало чем отличается от остальных видов генераторов.


Favicon из готового изображения

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

  1. Загрузить изображение на сервер.
  2. В случае необходимости проведения обрезки картинки, провести ее.
  3. Если в сервисе предусмотрены дополнительные функции в плане оформления дизайна Фавикона, задействовать их по желанию.
  4. Сохранить получившийся Фавикон в формате ico.

Сервис Favicon.ru

При помощи рассматриваемого сервиса предоставляется возможным:

  1. Самостоятельно изготовить Фавикон по подготовленному заранее шаблону.
    • Из готового изображения;
    • Рисуя по пикселем картинку.
  2. Заказать Фавикон у профессионалов. В такой ситуации они помогут создать неповторимый уникальный образ.

Сервис Favicon.cc

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

После обработки картинки, обрезки ее, придания прозрачности, или еще каких – либо ей дополнительных параметров, Фавикон сохраняется в формате ico.

Как добавить favicon на блог WordPress?

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

Шаг второй. Загрузка файла в корневой каталог на сервере. Для этого необходимо:

  1. Открыть корневую карту сайта.
  2. Открыть файл php и вставить туда код:
  3. Обновить страницу, при этом не используя кеш.

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

stasmatveev.ru

Favicon для сайта. Создать favicon и установить на сайт

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

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

Подпишись на рассылку и получи книгу в подарок!

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

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

Фавикон не просто привлекает внимание посетителя, а имеет свои положительные стороны:

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

 

Favicon для сайта: принцип работы поисковых роботов

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

Как сделать иконку более яркой?

Для этого необходимо следующее:

  • Если вы не собираетесь использовать логотип в качестве иконки сайта, то постарайтесь просто сделать иконку эксклюзивной. Для того чтобы пользователь обратил свое внимание на изображение и запомнил его, старайтесь менять его к праздникам. Например, приближается Новый Год: используйте в изображении сочную елку, яркого Деда Мороза или Снегурочку и т.д.
  • Иконка должна соответствовать тематике интернет-ресурса. Согласитесь, если у вас на продвижении сайт медицинской тематики, то изображать танк в виде иконки неестественно.
  • Вдохновитесь фавиконами зарубежных сайтов со схожей тематикой. Выберите идею, преобразите ее и создайте свою, уникальную иконку.

 

Как сделать favicon

Способ 1. Скачать готовые favicon на сайте

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

Способ 2. Создать уникальную иконку сайта favicon в Фотошопе

  1. Чтобы сохранить favicon в формате ico, надо скачать плагин.
  2. После того как вы успешно перешли по ссылке и скачали файл, разархивируйте его в папку «File Formats». Найти ее можно по адресу С:\Program Files\Adobe\Photoshop\Plug-Ins\File Formats.
  3. На время установки, закройте программу Photoshop.

Если это покажется вам слишком хлопотным, то вам помогут онлайн-сервисы по генерации картинок из форматов jpg, png и gif в ico.

Способ 3. Онлайн-сервисы

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

Порядок создания:

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

 

Примеры онлайн-сервисов:

favicon.cc

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

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

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

favicon.ru

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

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

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

 

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

 

semantica.in

Сервис с 308 000 иконок (Favicon) для сайта

Всем привет !

При создании этого блога, я озадачился такими мелочами как логотип сайта и фавикон (картинка в вкладке браузера). Как говориться вся жизнь в мелочах, итак мне пришлось рисовать фавикон ручками, а логотип сделал уже другим способом. Ну начнём с того, что с фотошопом я не очень дружу, а иногда очень надо вот и приходится потихоньку учиться. Недавно в инете нашёл очень полезные и интересный сервис с коллекцией Favicon (иконок) — Findicons.com.

Кто не знает вот где отображается favicon 

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

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

  • Обзор — тут публикуются наборы иконок, их авторы, и что само главное картинки одного стиля.

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

Как скачать понравившуюся картинку ?

Для начала нам надо выбрать картинку, щёлкаем на неё, выбираем расширение (ico icns png) там же есть вкладка другие размеры в которой можно выбрать удовлетворяющий вам размер. Далее нажимаем скачать PNG или Ico смотря, что вам нужно, после этого пойдёт загрузка картинки. Где расположены кнопки Скачать в правом столбце есть кнопка преобразовать, в нужный формат.

Ну впрочем и всё

P.S читайте статью про создание логотипа без знаний Photoshop. Также смотрите видео про парня, отлично владеющим своим телом.

cms-all.ru

Как сделать Favicon для сайта

Что такое Favicon?

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

Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):

И для сравнения, отображение иконки в браузере Internet Explorer:

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

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

Рисуем Favicon с помощью веб-сервиса

Самый простой способ сделать фавикон – воспользоваться сервисом www.favicon.cc. Выглядит он так:

Чтобы нарисовать иконку, нужно просто выбрать нужный цвет, прозрачность и нарисовать нужные контуры. При создании иконки сразу есть возможность предпросмотра:

Создаем Favicon из готового изображения

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

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

Когда иконка будет готова, вы сможете ее скачать в формате .ico. Чтобы добавить favicon на сайт, поместите файл favicon.ico в корневой каталог сайта и добавьте между тегами <head></head> строчку:

<link rel="icon" href="favicon.ico"; type="image/x-icon" />

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

Также рекомендуется добавлять строку:

<link rel="shortcut icon" href="favicon.ico"; type="image/x-icon" />

(для Internet Explorer).

Размер фавикона может быть 16×16, 32×32.

Полезное замечание

Файл иконки может иметь не только расширение .ico, но и .png, причем рекомендуется использовать последний вариант. Это связано с тем, что устройства с высоким разрешением дисплея (например, iPhone, iPad, iPod) по умолчанию имеют размер иконки 57×57. Для этого лучше делать второй вариант иконки (в более высоком разрешении) и прописывать дополнительно строку:

<link rel="apple-touch-icon" href="apple-favicon.png" />

Но стоит отметить, что в таком случае иконка будет скруглена по углам и на нее будет наложен блик (это делается автоматически самим устройством). Для того, чтобы этого избежать, вместо apple-touch-icon нужно написать apple-touch-icon-precomposed.

nubex.ru