Почему каждому сайту нужен фавикон, а фавикону
Содержание:
- Устанавливаем Favicon на сайт
- Как создать фавикон онлайн
- Скачивание готовых фавиконок для сайта
- Создание favicon.ico
- Создание
- Основные способы создание favicon для сайта:
- Как установить фавикон на WordPress?
- Способы создания Фавикон для сайта
- Создание фавикона
- Зачем нужен favicon?
- Где демонстрируется favicon (фавикон):
- Как добавить фавикон на сайт
- Онлайн-сервисы для создания фавикон
- Сделать фавикон онлайн: ТОП-3 генератора
Устанавливаем Favicon на сайт
Есть несколько способов установить созданную иконку в качестве фавикона на вебсайт. Процедура установки может варьироваться от того на какой платформе у вас сделан сайт.
Разберем наиболее популярные варианты установки favicon.
Плагин — простейшее решение
Если у Вас сайт на наиболее популярной для блоггеров платформе WordPress, все очень просто, для этого можно воспользоваться одноименным плагином. Данный способ наиболее простой, не требуется знаний кода html.
Для этого необходимо установить плагин Favicons и далее в настройках плагина можно выбрать один из трех вариантов установки фавикона:
- Использовать свой граватар (gravatar), для этого у Вас должен быть настроен глобально распознаваемый аватар. Как правило это фото владельца блога. Не рекомендую использовать данную опцию, после установки Вы сами поймете почему.
- Заранее подготовленный файл с изображением. Для этого необходимо указать внешний URL картинки.
- Готовые фавиконы зашитые в плагин по умолчанию, коих ровно 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
Как создать фавикон онлайн
Веб-редакторы иконок в большинстве своем предлагают все необходимые инструменты для создания значков Favicon. При этом необязательно рисовать картинку с нуля — можно воспользоваться уже готовым изображением.
Способ 1: Favicon.by
Русскоязычный онлайн-генератор фавиконок: простой и наглядный. Позволяет нарисовать значок самостоятельно, пользуясь встроенным холстом 16×16 и минимальным перечнем инструментов, таких как карандаш, ластик, пипетка и заливка. Имеется палитра со всеми RGB-цветами и поддержкой прозрачности.
При желании вы можете загрузить в генератор готовое изображение — с компьютера или стороннего веб-ресурса. Импортированная картинка также будет помещена на холст и станет доступной для редактирования.
- Все функции, необходимые для создания фавиконки, находятся на главной странице сайта. Слева расположен холст и инструменты для рисования, а справа — формы для импорта файлов. Чтобы загрузить картинку с компьютера, щелкните по кнопке «Выберите файл» и откройте нужное изображение в окне Проводника.
- Если необходимо, выделите на картинке желаемую область, после чего нажмите «Загрузить».
- В разделе «Ваш результат», прямо во время работы с изображением, можно наблюдать, как будет выглядеть итоговая иконка в адресной строке браузера. Здесь же размещена кнопка «Скачать фавиконку» для сохранения готового значка в память компьютера.
На выходе вы получаете графический ICO-файл с названием favicon и разрешением 16×16 пикселей. Этот значок уже готов для использования в качестве иконки вашего сайта.
Способ 2: X-Icon Editor
Браузерное HTML5-приложение, позволяющее создавать детализированные значки размером вплоть до 64×64 пикселей. В отличие от предыдущего сервиса, X-Icon Editor имеет больше инструментов для рисования и каждый из них может быть гибко настроен.
Как и в Favicon.by, здесь вы можете загрузить готовую картинку на сайт и конвертировать ее в фавиконку, при необходимости должным образом отредактировав.
- Чтобы импортировать изображение, воспользуйтесь кнопкой «Import» в панели меню справа.
- Загрузите картинку с компьютера, нажав «Upload», после чего во всплывающем окне выделите нужную область изображения, выберите один или несколько размеров будущей фавиконки и щелкните «Ок».
- Для перехода к скачиванию результата работы в сервисе воспользуйтесь кнопкой «Export» — последний пункт меню справа.
- Нажмите «Export your icon» во всплывающем окне и готовый favicon.ico будет загружен в память вашего компьютера.
Если вы хотите сохранить детали изображения, которое намерены превратить в фавиконку, X-Icon Editor отлично для этого подойдет. Именно возможность генерации значков с разрешением 64×64 пикселей и является главным преимуществом этого сервиса.
Как видите, для создания фавиконок совсем не нужен узкоспециализированный софт. Более того, сгенерировать качественный Favicon можно, имея под рукой всего лишь браузер и доступ в сеть.
Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.
Скачивание готовых фавиконок для сайта
Самый простой вариант для начинающих – это скачать уже готовую фавиконку в интернете. Более того, в большинстве случаев, это выглядит ее более красиво, чем самостоятельное творчество. Так как рисуется профессиональными дизайнерами.
Сайтов, которые предоставляют такую возможность бесплатно, достаточно много. В некоторых сервисах можно даже скачать иконки в векторном формате для последующего редактирования в Adobe Illustrator или аналогичных редакторах. Я не буду перечислять все, приведу только несколько ресурсов, где можно их скачать в PNG или SVG-форматах, которыми пользуюсь сам.
- IconFinder.com
- FlatIcon.com
- FreePik.com
Если погуглите, то без особого труда найдете еще целую кучу подобных ресурсов. Кстати, на FreePik можно скачать не только иконки, но и векторные изображения, которые можно также использовать как иконку. На таких сайтах есть как бесплатные варианты в большом количестве, так и платные.
Создание favicon.ico
Самые распространенные способы – это с помощью онлайн сервисов или знаменитого растрового редактора – Adobe Photoshop.
Онлайн-сервисы
Интерфейс сервиса состоит из следующих разделов:
- Нарисовать самостоятельно – в этом разделе есть все что необходимо для самостоятельно рисования фавиконки (карандаш, ластик, пипетка, заливка, переместить).
- Импорт из файла – выбираете любой рисунок и сервис сам создает фавикон.
- Импорт с сайта – создаст favicon.ico на основе импорта фавиконки с сайта.
- Область для рисования.
- Готовый результат – сразу можете оценить, как будет выглядеть favicon.
- Скачать готовую фавиконку.
Вот такой простой, не сложный сервис поможет создать красивую и уникальную фавиконку.
Adobe Photoshop
Я выбираю именно фотошоп, потому что редактирую в нем все картинки для блога. Если у Вас нет опыта работы с Adobe Photoshop, не переживайте, я все подробно покажу.
Открывает программу, создаем документ с размером 32×32 пикселей.
Далее с помощью инструментов можно:
- сделать заливку;
- написать текст;
- создать фигуру.
Или загрузить картинку, например, свой логотип и его уменьшить до необходимых размеров.
- Для этого открываем меню Файл -> Открыть, далее выбираем свою картинку и нажимаем кнопку Открыть.
- После, инструментом выделение, отмечаем нужную часть логотипа, далее меню Редактирование -> Копировать.
- Закрываем логотип, открываем документ с нашей будущей фавиконкой, нажимаем меню Редактирование -> Вставить.
- Далее на клавиатуре нажимаем сочетание клавиш Ctrl+T (eng), подгоняем картинку под наши размеры. Готово.
Фавиконку сохраняем, выбрав меню Файл -> Сохранить как…, указываем имя favicon и выбираем расширение .png или .jpeg или .jpg.
После сохранения можно устанавливать, но рекомендуется файл с расширением .ico. Поэтому наш favicon.png конвертируем в favicon.ico.
Далее нажимаем кнопку Конвертировать, ждем и можем скачивать готовую фавиконку.
Вот теперь можно поставить фавикон на сайт.
Создание
Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16×16, 32×32 или 64×64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.
При создании изображения следует обращать внимание на следующие нюансы:
- Фавикон должен быть выполнен в том же стиле, что и сайт, так как он является своего рода визитной карточкой вашего проекта.
- Изображение, которое вы хотите использовать в качестве фавикона, должно быть предельно простым для понимания, лучше используйте всего несколько элементов.
- Следите за тем, что бы фавикон, максимально передавал суть вашего сайта, бизнеса, проекта.
- Создавать картинку лучше так, что бы она вызывала у посетителей вашего сайта ассоциации. Например, иконка телефона, для салона мобильных телефонов.
В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.
Основные способы создание favicon для сайта:
- Ручная подгонка рисунка самостоятельно;
- Заказ создания у фрилансеров;
- Автоматическое создания с имеющимися картинками с помощью онлайн сервисов.
Первый способ создания фавикон требует достаточных знаний работы в графических редакторах, таких как фотошоп или paint.
Рассмотрим способ создания фавикон для сайта с помощью программы фотошоп, а также покажу как сделать фавикон онлайн. Первым этапом мы открываем программу, далее создаем новый проект и задаем размеры изображения 16х16 пикселей, кстати, это основной размер для нашей иконки независимо на каком движке делается или был сделан сайт.
Используя инструмент ластик (кстати, можно не использовать, если фон должен быть белым). После обработки фона, заходим в вкладку файл и выбираем поместить, далее выбираем нашу картинку и вставляем. Сохраняем нашу картинку в формате .ico. Сохранять наш файл требуется исключительно в данном расширении.
В стандартной версии программы Фотошоп сохранить картинку в расширении ICO не получится, для этого нужно скачать сторонний плагин.
Скачать плагин для сохранения картинок ICO. (.zip)
Инструкция по установке плагина:
- Установка плагина:
- закрыть программу фотошоп;
- разархивировать и запустить плагин;
- скопировать плагин в папку с установленной программой в папку C:……Plug-InsFile Formats.
Теперь мы можем сохранять нашу картинку в формате .ico.
Раньше чтобы вставить наш фавикон на сайт требовалось в шапке сайта прописывать путь к данному файлу, сейчас это делать больше не нужно, все браузеры сами находят этот файл и после нескольких апов баз поисковиков, выдают ее напротив вашего сайта с левой стороны.
Также Вы можете заказать создание иконки у фрилансеров. Но подумайте сами, стоит ли это того?
- Во-первых, если Вы неопытный пользователь, то Вас раскрутят по полной программе и навешают лапшу на уши;
- Во-вторых, прочитав данную статью, Вы сами сможете быстро создать фавикон за 1 минуту и совершенно бесплатно.
Ну и наконец, предлагаю Вашему вниманию быстрый и удобный способ создания фавикон с помощью сервиса favicon.ru.
Как установить фавикон на WordPress?
Загрузите ваш фавикон (favicon.ico) в основной (корневой) каталог сайта. Корневой каталог — это главная папка, в которой находятся все ваши WP-файлы, такие как index.php и папки wp-admin, wp-content + wp-includes. Обязательно разместите favicon.ico на одном уровне с этими папками и index.php.
1) На WordPress откройте “Административную панель”.
2) Войдите в раздел “Appearance”
3) Нажмите на “Theme Editor”.
4) Нажмите на файл, который называется “Header” или “Header.php”, чтобы редактировать.
5) Найдите строку кода, которая начинается с <link rel=»shortcut icon» и заканчивается на /favicon.ico «/>. Измените его, если он существует, или добавьте следующий код под HTML-тегом <head>. В примере мы используем название фавикона как “favicon.ico”. Вы же можете назвать ваш фавикон как угодно.
Код: <link rel=»shortcut icon» href=»<?php echo get_stylesheet_directory_uri();?>/favicon.ico»/>;
6) Сохраните изменения.
Выводы:При разработке вашего сайта вы должны быть уверенны, что не упустили важные детали, даже такие мелкие как фавикон. Добавить иконку действительно не сложно. Но эта крошечная вещь показывает, что вы продумали свой дизайн и позаботились о деталях. У вас остались вопросы, или вы хотите поделиться опытом создания фавикона для вашего сайта? Добро пожаловать в комментарии.
Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.
Способы создания Фавикон для сайта
Способов изготовить иконку для фавикона несколько, давайте рассмотрим самые простые и популярные.
Готовые коллекции Фавикон
Если Вы не хотите заморачиваться с изготовлением изображения для иконки favicon, в помощь Вам готовые коллекции изображений.
Что касается выбора изображения, то здесь следует руководствоваться тематическим содержанием вебсайта. Так, например, для портала об автомобилях можно поставить иконку в виде авто, на сайт о бизнесе и финансах – фавикон в виде доллара и так далее.
Если же нет идей по поводу картинки, то можно попросту сделать рисунок с изображением одной или нескольких букв, по которым можно было бы узнать название или тематическое содержание сайта. Например, на сайте Одноклассники.ру на фавиконе размещены буквы «OK», по которым можно сразу узнать, что это за социальная сеть.
Ресурсы с иконками:
- //www.thefavicongallery.com/ — небольшая коллекция изображений разных тематик. Всего в коллекции около 300 иконок. Каждую будущую фавиконку можно просмотреть в увеличенном виде, а затем сохранить на свой компьютер
- //www.iconj.com/ — содержит более 3 тысяч изображений для фавикон. Сервис позволяет сохранять изображения в разных графических форматах.
- //www.favicon.cc/ — огромнейший банк favicons, количество которых на момент написания статьи 228 839 штук. Единственный минус, что на одной странице находится 20 иконок, и чтобы выбрать понравившуюся придется долго листать.
- //www.favicon.by/ — не знаю количество, но очень много готовых иконок, при нажатии на понравившуюся, фавиконка сразу скачивается на компьютер.
- //www.flaticon.com — ресурс с огромным количеством готовых иконок, на все случаи жизни, которых на момент написания статьи более 384 тыс. сгруппированных по 7 тыс. группам. Иконки можно скачать в разных форматах с необходимым разрешением.
Я думаю, что этих сервисов за глаза хватит, чтобы выбрать нужный Вам готовый фавикон для веб-сайта.
Графические редакторы
Если Вам хочется сделать уникальный favicon для своего сайта, в помощь Вам графические редакторы. Фавикон на начальном этапе это обычный графический файл, который в дальнейшем превращается в иконку нужного размера.
Будущий фавикон для своего сайта я создавал в любимом всеми редакторе Adobe Photoshop. Сделал нужную мне картинку размером 800×800 пикселей, с последующей конвертацией в необходимый формат — 16×16 pix.
Картинки в поисковых системах
Самый простой, но довольно эффективный способ для поиска будущего фавикона соответствующего тематике Вашего веб-сайта.
В поисковой строке в разделе Картинки набираете тематический запрос включающий слово «иконка» и получаете обширную выдачу изображений. Одна из которых в дальнейшем будет служить фавиконом для Вашего сайта.
Изображения надо искать с прозрачным фоном (расширение PNG), размер не имеет значения. В последующем преобразуем выбранную картинку в нужный нам формат.
Иконки в Яндекс.Картинках
Онлайн сервисы создания Favicon
Для создания фавикона можно использовать специальные онлайн-сервисы, которые предоставляют такую возможность каждому желающему, причем абсолютно бесплатно. Достаточно загрузить приготовленное для иконки изображение, чтобы сервис превратил его в фавикон, то есть файл с расширением .ico.
Как вариант, с помощью этих сервисов можно вручную создавать свой фавикон для сайта, подбирая цвета в каждую ячейку, но сразу предупрежу, что занятие это неблагодарное. Лично у меня фавикон на выходе получался некрасивым, здесь нужен особый талант, а времени было потрачено вагон.
Вот список наиболее популярных сервисов для онлайн создания фавикон:
- //www.favicon.cc/ — англоязычный сервис создания Favicon
- //favicon.ru/ — русскоязычный аналог, есть один минус, при сохранении конечной картинки изначальный прозрачный фон получается черным, хотя может я не до конца разобрался с настройками.
- //www.favicon.by/ — имеет два интерфейса, русский и английский. Очень мне понравился этот сервис, рекомендую и Вам.
Создание фавикона
Онлайн-сервисы
Нарисовать фавикон можно в онлайн-сервисах. Достаточно просто ввести в поисковик соответствующий запрос, после чего вашему вниманию будет представлен целый перечень сайтов, которые могут помочь вам реализовать задуманное.
Например, Favicon.by. Он позволяет вам нарисовать логотип при помощи простых инструментов. Сервис создает иконку в формате ICO.
Как видите, здесь все интуитивно понятно. Выбираем карандаш, настраиваем цвет и рисуем. Если вашему логотипу нужна какая-то основа, то вы можете воспользоваться “Импортом из файла” и “Импортом с сайта”.
Как только мы закончим наши художества, прокручиваем страницу вниз и скачиваем нашу картинку.
Обратите внимание на левую часть окна “Ваш результат”. Там вы посмотрите, как будет выглядеть ваша иконка во вкладке браузера
Все остальные генераторы работают по схожему сценарию. Точно так же выбираем цвет, рисуем при помощи простых инструментов, а после – скачиваем к себе на жесткий диск.
Adobe Photoshop
Если у вас есть данный графический редактор, то создание логотипа можно вывести на более качественный уровень. В основном, конечно, все и делают иконки через фотошоп или аналогичные редакторы. Предыдущими вариантами пользуются новички. Крупные порталы и сайты больших компаний вряд ли будут использовать картинку, нарисованную в онлайн-генераторе.
Итак, у нас есть два варианта:
- Сделать фавикон из картинки (логотипа компании или других).
- Просто выбрать шрифт и сделать его в виде буквы.
Второй вариант используется наиболее часто. Наверное, больше половины сайтов просто создают квадрат размером 16 на 16 или 32 на 32, выбирают шрифт (как правило, Roboto или Open Sans), цвет, соответствующий гамме проекта. И все – favicon готов.
Открываем Фотошоп, после чего сразу идем в “Меню” – “Создать”.
Тут мы можем выбрать размер – в пикселях или любой другой метрический системе. Здесь же – содержимое фона. Рекомендую выбирать прозрачный фон, который в случае чего может быть залит абсолютно любым цветом.
Размер должен быть 16 x 16 или 32 x 32 (в пикселях). Все остальное – по вашему усмотрению, но я бы советовал выставить так, как показано на скриншоте.
Нажимаем кнопку “Создать”, после чего у нас перед глазами появляется область с заданным размером. Сейчас мы будем творить.
Разберу самый популярный вариант. Как я уже и говорил, это фавикон в виде буквы. Обычно первой из названия проекта. Кликаем на “Т” в панели инструментов, после чего в любой участок внутри квадрата.
Теперь вводим любую букву с клавиатуры. Мы можем уменьшить или увеличить ее, поменять цвет, добавить тени или расположить в любой части созданного нами квадрата. Давайте сделаем лого в виде буквы “А”.
Цвет я регулировал при помощи специального инструмента в правом верхнем углу. Здесь вы можете выбрать абсолютно любой вариант при помощи мыши. В верхней панели также есть инструменты для выбора шрифта и размера. На картинке 32 x 32 оптимальным размером буквы будет 8 – 10 Пт.
Если зажать левую кнопку мыши на букве, то можно передвигать букву относительно границ квадрата. Когда вы разместите ее в центре, программа покажет вам соответствующее уведомление в виду перекрестия внутри квадрата. Как только вы отпустите кнопку, оно пропадет.
Если вы хотите добавить в свой фавикон что-то особенное, то можно воспользоваться инструментом “Стили”. Для этого перейдите в соответствующий раздел, как это показано на скриншоте.
Тут можно придать своей букве интересный вид. Например, настроить тени, сделать обводку или же градиентный цвет.
Кстати говоря, не пугайтесь, если при приближении ваша буква будет выглядеть как квадратное нечто. Если вы уменьшите масштаб до 100 % она примет свой естественный, четкий вид. Во вкладке картинка тоже будет выглядеть хорошо.
Далее нам нужно сохранить наше творение. Идем в “Файл” – “Сохранить как”. Выбираем нужный формат (PNG, GIF или JPEG) и название – favicon, нажимаем “Сохранить”.
Зачем нужен favicon?
Установка таких значков позволяет ускорить визуальный поиск нужной вкладки, особенно в том случае, если их открыто много. Увидеть узнаваемую картинку куда проще и быстрее, чем пересматривать названия страниц.
Так выглядят фавиконы в браузере.
Если поисковые системы показывают в результатах выдачи фавикон вашего проекта, это положительно скажется на росте его позиций
Красивый, стильный и в то же время простой логотип привлечет внимание целевой аудитории и будет побуждать пользователя перейти на ваш сайт, а не соседней. Все это поспособствует повышению кликабельности и, соответственно увеличению поведенческих факторов
Более того, значок будет запоминаться пользователям, и через какое-то время он станет узнаваемым для широкой аудитории, что также станет дополнительным привлечением посетителей.
На заметку. Favicon лучше устанавливать уже на оптимизированный веб-ресурс.
Например, у поисковика Яндекс есть специальные роботы YandexFavicons, занимающиеся индексом фавиконов. Они посещают сайты для сбора и обновления значков приблизительно раз в месяц.
В связи с этим апдейты, после которых и стоит проверять наличие измененного или нового значка для сайта, происходят редко. Поэтому после установки нового изображения, изменения в выдаче относительного вашего ресурса следует подождать не менее двух недель (это минимум).
Поисковой машине после того, как она найдет иконку, нужно будет переконвертировать ее в формат PNG (если она сделана в формате ICO). После этого вы сможете найти favicon своего ресурса по адресу (на примере Яндекса): http://favicon.yandex.net/favicon/URL-адрес-вашего-сайта.
Где демонстрируется favicon (фавикон):
- В верхней части браузера — переходя на какую-либо страницу сайта, в верхней части браузера, пользователь всегда наблюдает картинку, под которой подразумевается favicon. Именно она в какой-то степени позволяет не ошибиться с веб-ресурсом при большом скопе открытых в браузере вкладок.
- В закладках/истории браузера — современные версии браузеров демонстрируют в своей истории и закладках не только названия сайтов и их страниц, но и favicon.
- На экране приложений в смартфоне — favicon отображаются не только в браузере и поисковой выдачи, но и на экранах смартфонов. Так если, при сохранении сайта в качестве приложения в своем смартфоне (что сегодня является нормой), пользователь вместе с его названием будет видеть favicon. Это в свою очередь облегчает сортировку интересных сайтов.
- На внутреннем домашнем столе компьютера — когда пользователь сохраняет сайт на рабочем столе, он создает иконку, представляющую собой какое-либо изображение, под которым подразумевается favicon.
Из всего вышеперечисленного можно сказать одно, фавикон является важной составляющей любого интернет-проекта, а также мобильного и компьютерного приложения. Он представляет собой ту основу, которая выделяет оригинальность и уникальность сайта, приложения, ресурса
Как добавить фавикон на сайт
Процесс установки иконки favicon на сайт, как правило, начинается с её создания. Из-за того что требования к разрешению и формату иконки favicon на различных устройствах разные лучше её сначала подготовить в векторном формате svg (масштабируемой векторной графике). Это действие позволит, используя одно изображение (svg), получить в отличном качестве значок favicon как с разрешением 16×16 пикселей, так и с 512×512.
В качестве инструмента для работы с графикой svg можно использовать профессиональный свободный векторный редактор как Inkscape.
Подготовка изображения для favicon
Рассмотрим основные действия по подготовке изображения в формате svg для favicon.
Изображение, которое будет использоваться в качестве иконки favicon сайта, можно нарисовать, или получить через поиск картинок сервиса Google или Yandex. Поиск изображения (значка) желательно осуществлять в формате svg. Но если найти подходящей иконки в формате svg не удаётся, то можно выбрать и другой формат (например, png или jpg). А потом в программе Inkscape с помощью специального инструмента перевести её в векторную графику (векторизовать растр).
Например, рассмотрим, как с помощью программы Inkscape можно подготовить изображение (иконку двери) в формате svg для фавикон.
- Используя сервис «Google Картинки» находим подходящие изображение двери и сохраняем его на компьютер.
- Открываем программу Inkscape и создаём в ней новый файл.
- Устанавливаем странице любой размер в пикселях с одинаковыми значениями по ширине и высоте (например, 260×260).
- Импортируем найденное изображение двери. Если картинка имеет растровый формат (png, jpg), то дополнительно выполняем её преобразование в вектор (правая кнопка мыши на изображении -> Векторизовать растр).
- Размещаем изображение по центру области содержимого страницы (высоту изображения устанавливаем равной 260 пикселей с сохранением пропорций изображения). В горизонтальном направлении (если ширина изображения меньше 260 пикселей) выравниваем её по центру.
- Сохраняем файл (например, под именем ).
Примеры, подготовленных изображений (красная стрелка, лампочка, бабочка, часы, сердце и книга) для фавикон (для скачивания — в контекстном меню картинки выбрать пункт «Сохранить картинку как…»):
Генерация иконки favicon для всех платформ
Генерацию иконки фавикон для всех платформ (iOS, Android, PC, MAC и др.) осуществим онлайн на сайте http://realfavicongenerator.net/.
Для этого необходимо нажать на кнопку «Select your Favicon picture» и выбрать в диалоговом окне подготовленное изображение (door.svg).
После этого необходимо настроить цвета фона и ввести название приложения для операционной системы Android (Chrome).
После этого выбираем опцию «I will place …», которая говорит о том, что полученные файлы фавикон необходимо положить в корень сайта. Это действие обеспечит её поддержку в большинстве браузеров.
Далее нажимаем на кнопку «Generate your Favicons and HTML code».
После этого действия сервис realfavicongenerator.net осуществит генерацию иконки favicon и HTML-кода. Результат данной операции будет выведен на экран.
Установка фавиконки на сайт
После выполнения подготовительных операций приступим к подключению favicon на сайт. Все основные действия по добавлению иконки на веб-сайт приведены на странице «Install your favicon».
Основные шаги:
- Скачивание сгенерированного пакета (favicons.zip).
- Распаковка его в корень сайта
- Вставка HTML-кода представленного на странице в секцию head ваших страниц:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="theme-color" content="#ffffff">
Например, на CMF MODX подключение favicon (HTML-кода) к страницам обычно осуществляется в чанке, с помощью которого выполняется формирование раздела head документа.
Онлайн-сервисы для создания фавикон
Долго останавливаться на них не будем, т.к. эти сервисы морально устарели. Их принцип достаточно прост. Вам доступно поле для рисования, размером 16х16 квадратиков, каждый из которых символизирует пиксель. И самый простой набор инструментов в виде карандаша, ластика и т.д. Где вы, притворившись художником, начинаете рисовать свой favicon.
Скриншот сервиса favicon.by для созания фавиконки
Как правило, эти сервисы позволяют не только рисовать, но и конвертировать графический файл в стандарт ICO. Вот несколько еще существующих онлайн сервисов:
- Favicon.cc – англоязычный сервис.
- Favicon.by – русскоязычный сервис.
Устарели эти сервисы потому, что ограничены малым разрешением – 16х16 пикселей. А также из-за того, что сохраняют иконку в уходящем потихоньку на покой формате ICO.
Сделать фавикон онлайн: ТОП-3 генератора
Сегодня уже многие сервисы, проводящие анализ сайтов имеют встроенные генераторы иконок, а также рассмотрим разные сервисы. Многие предлагают заказать создание данную картинку за деньги, но это пустая трата денег. Вы просто берете любую нарисованную картинку и с помощью генераторов создаете ее.
Favicon.by
Интересный онлайн-сервис, имеющий банально простой и понятный для каждого пользователя интерфейс. В сервисе, как и многих других, имеется два способа создания готовой картинки:
- Нарисовать ее самостоятельно;
- Загрузить файл готовой картинки (png. jpg).
Картинки вы можете брать любые через поиск картинок в Яндексе. Просто водим запрос типа скачать иконку для сайта и жмем на раздел картинки как показано на скриншоте:
Далее выбираем самый маленький размер после того как вы кликнули на понравившееся изображение и сохраняем к себе на ПК.
Но я бы советовал искать картинки со следующими параметрами:
- Изображения, не нарушающие авторских прав владельцев;
- Не имеющая много элементов (так как картинка маленькая и ее будет плохо разобрать);
- Не имеющие текстовых надписей в составе изображения;
- Минимум цветов, а лучше однотонные картинки;
- Не имеющие больших размеров и пропорциональность сторон фото.
После того как мы имеем картинку, которую хотим сделать в онлайн генераторе, нам необходимо перейти на страницу сервиса и загрузить ее с компьютера.
После вставки картинки, если ее фон не белого цвета лучше всего пройтись ластиком по наружной части. Также можно внести корректировки и сделать заливку различными цветами любой из элементов.
В нижней части сервиса будет показан готовый фавикон, а также как он будет отображаться в поисковой строке
Далее остается просто нажать сохранить и скачать favicon к себе на компьютер.
Еще имеется интересный способ получения уже готовой иконки с любого сайта. Для этого в поле импорт с сайта вставляем ссылку на любой сайт и получаем готовую картинку для скачивания.
Также, сервис предлагает бесплатно взять одну из понравившихся иконок.
На этом создание иконки готово.
Favicon.ru
Практически полностью аналогичный вышеописанному генератору, но имеется также возможность найти дизайнера иконки и дать ему задание.
Скачиваем любую картинку и также загружаем в сервис, где останется только отредактировать ее под свои нужды.
Pr-cy.ru
Сервис в основном предназначен для поискового анализа сайтов, но также предлагает различные услуги и имеется встроенный онлайн генератор фавикон.
Достаточно просто выбрать изображение и нажать создать. После чего просто сохраняем готовый проект. Делает все в пару кликов. Но нельзя редактировать как в предыдущих сервисах. Все получается очень просто и быстро.
Помимо данных сервисов имеется еще куча подобных, но суть этого не меняет. Выбирайте любой из вышеперечисленных способов и делайте красивые иконки для своего сайта.
Как установить favicon на сайт
Установка не представляет никаких сложностей. Если у вас имеется самописный сайт, то просто загружаете фавикон в корень вашего сайта на хостинге.
Для установки favicon на такие популярные движки как Joomla или WordPress необходимо зайти в корень вашего шаблона сайта и заменить стандартную иконку с названием favicon.ico и заменить на новую картинку.
На моем блоге путь выглядит следующим образом: firelinks.ru/templates/шаблон/favicon.ico
На этом заканчиваю и надеюсь, обновленный материал будет полезен и поможет получить больше переходов из поиска. Всех благ -))).
