Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

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

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

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

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

Опубликовано: 02.09.2018

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

Как установить favicon - Константин Хмелев

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



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

Favicon — это небольшое изображение (размером 16х16 пикселей) и имеющее расширение .ico.  Его можно наблюдать в левой части вкладки в браузере и в выдаче поисковой системы Яндекс (читайте также про фильтры Яндекса тут ). Покажу на фото ниже, что я имею ввиду. Вид фавикона в поисковой выдаче Яндекса: Иконка как бы казалось очень маленькая и особой пользы принести не сможет. Но это совсем не так. Наличие фавикона на сайте повышает кликабельность Вашего сайта, а соответственно увеличивает трафик и улучшает позиции Вашего сайта в поисковой выдаче . Помимо этого, иконка — это как логотип компании, только это логотип Вашего сайта. Не секрет, что все люди запоминают зрительно и ассоциациями. Так вот, если создать уникальный и интересный favicon, то люди больше будут запоминать Ваш сайт и соответственно больше ставить ссылок на него и чаще заходить. У Яндекса даже есть свой бот, который выкачивает фавиконы. Апдейты происходят не часто, но где-то раз в месяц бывают (что такое апдейты читайте здесь ). Создать его можно в Фотошопе, правда есть небольшие трудности. Photoshop не может сохранять фото с расширением .ico. Для того, что б он научился это делать, нужно ставить специальный плагин. Для создания иконки сайта есть онлайн-генераторы и целые галереи фавиконов. Это намного проще. Скачал галерею и выбрал для себя лучший и никаких проблем. Рассмотрим эти варианты подробнее.



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

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

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

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

Favicon.ru -  очень удобный сервис. Тут Вы можете закачать любую картинку со своего компьютера и подредактировать ее, можно заказать разработку иконки у дизайнеров, а можно нарисовать самому.   Как по мне, то самый лучший вариант — загрузить красивое фото и отредактировать ее в этом сервисе. Быстро, просто и красиво. Внизу есть просмотр того, что Вы нарисовали (или закачали). И большая кнопка «Скачать» с помощью который, Вы сможете сохранить иконку на свой компьютер. Favicon.cc  -  тут тоже можно загрузить фото и его редактировать онлайн. Соответственно можно и с нуля нарисовать собственный. Очень удобный онлайн генераторов фавиконов. Так же есть возможность предпросмотра Вашего творения   Внизу есть кнопка «Download Favicon» с помощью которой можете скачать Вашу иконку. В приципе это 2 самых удобных и популярных онлайн генератора фавиконов. Существует еще больше их количество, некоторые из них приведу ниже с очень кратким описанием.


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

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

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

Chami — простой онлайн сервис. Загружаешь фотку и потом ее сервис преобразует в формат .ico. Есть возможность создать фотку из аккаунта Twitter, но сколько я не пробовал у меня не получалось Попробуйте, может у Вас получится.

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

Галереи и коллекции фавиконов

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

Favicon.cc  - да, Вы правильно заметили. Этот сервис мы выше рассматривали как генератор, а теперь я говорю, что он галерея. Так и есть. У сайт имеется раздел (ссылку я поставил) в котором представлено более 205 тыс. различных иконок и даже есть анимированные. Правда фавикон-анимация будет Вам видна только в браузере Firefox (читайте так же как убрать рекламу в Firefox здесь ). Iconj.com  - очень большая галерея favicons. Скачать favicon можно как в формате .ico так и в .gif. Существует возможность получить html-код любого favicon. Favicon.co.uk  - тоже достаточно большая галерея. 58 страниц на каждой из которых более 120 иконок.

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

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

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

После загрузки, favicon нужно подключить. Это делается так:

Заходим в админку и идем по такому адресу: Внешний вид -> Редактор -> Находим файл header.php

 

Затем, после тега <head> нужно вставить такие строчки:

 <link rel=»icon» href=»Путь_к_Вашему_фавикону/favicon.ico» type=»image/x-icon» />

<link rel=»shortcut icon» href=»Путь_к_Вашему_фавикону/favicon.ico» type=»image/x-icon» />

Обновляем файл (внизу кнопка «Обновить файл») вот в принципе и все. Как видите процесс установки фавикона на сайт WordPress очень простой. Ничего заумного и сильно хитрого тут нету. Со временем Яндекс бот проиндексирует картинку и посмотреть ее можно будет по такому адресу:

http://favicon.yandex.net/favicon/loleknbolek.com

Кто знаете какие-то прикольные штуки связанные с фавиконами (к примеру особенности работы с ними для Apple устройств и другое) пишите в комментарии и я дополню статью Вашим опытом и советами

rss