Favicon.ico для сайта - как создать favicon и установить, коллекция фавиконов
Опубликовано: 01.09.2018
Всем привет! Рад видеть вас на страницах своего блога! Сегодняшняя статья целиком и полностью посвящена иконке favicon . Разберемся, что такое favicon.ico, как создать и установить его на сайт. По ходу дела научимся пользоваться двумя самыми популярными онлайн генераторами и узнаем, откуда можно скачать целые коллекции фавиконов.
*** Фавикон (favicon). Как создать и установить на блог? ***
Что такое Favicon
Слово favicon произошло от сокращения английского словосочетания FAVorites ICON, что буквально переводится как «иконка для избранного». Под «избранным» понимается папка в браузере для закладок. Фактически, это небольшая картинка размером 16*16 пикселей в формате ico, расположенная на сервере в корневом каталоге сайта под именем favicon.ico. Это своего рода маленькое лицо сайта, которое, как и логотип, делает его неповторимым и узнаваемым.
Favicon.ico - его создание и установка
Где favicon можно увидеть?
1. В закладках браузера.
2. В браузере на каждой вкладке рядом с заголовком страницы сайта.
3. Яндекс отображает иконку в результат поиска. У него даже есть специальный поисковый бот для их нахождения и индексации, поэтому фавикон отображается в поисковой выдаче не сразу, а через какое-то время.
Проверить, проиндексировал яндекс ваш фавикон или нет, можно перейдя по адресу:
| http : //favicon.yandex.net/favicon/fairheart.ru |
Только не забудьте в конце строки подставить адрес своего интернет ресурса.
Создание фавикона для сайта, online генераторы
Основная проблема в создании фавикона кроется в его маленьких размерах. Как на картинке размером 16*16 пикселей отобразить что-то интересное, уникальное, что передавало бы суть и тематику сайта? Зачастую за основу берется логотип, но не каждый логотип можно будет разглядеть и узнать при таких малых размерах. Так что голову придется поломать.
Дело облегчает тот факт, что его можно очень легко и быстро создать с помощью специальных онлайн генераторов. При этом имеется возможность взять за основу любую картинку или просто нарисовать его самому.
На мой взгляд, самым простым и удобным онлайн генератором фавиконов в рунете является сервис .
Если у вас есть воображение, терпение и минимальные навыки рисования, значок можно своять самому. В центре имеется поле размером 16 на 16 квадратиков. Каждый квадрат — пиксель. Слева выбираем цвет, в который можно закрасить тот или иной квадратик. При смене цвета предыдущий запоминается, что очень удобно.
Функциональные кнопки расположены чуть ниже, всего их пять:
рисовать (кисточка); прозрачный (ластик); пипетка; переместить; заливка.Кроме этого, обратите внимание на две стрелки под полем выбора цвета. Они позволяют перемещаться по истории действий — в случае ошибки всегда можно откатиться на шаг назад.
Создаваемый фавикон сразу отображается в окне предпросмотра. И то что на большом поле выглядит как клякса, в уменьшенном виде может приобрести вполне понятные очертания. 
Как видите, все продумано и очень удобно сделано. Когда значок готов, нажмите на большую оранжевую кнопку «СКАЧАТЬ FAVICON» и загрузите его себе на компьютер.
Если рисовать фавикон не хочется, можно попробовать сделать его из какого-нибудь изображения. Например, из логотипа сайта. Для это воспользуйтесь разделом «Сделать favicon из изображения».
Нажимаем «Обзор» и выбираем картинку, которая станет прототипом для будущего фавикона. Она должна быть по возможности квадратная.
На следующем шаге необходимо задать область изображения, которая потом будет преобразована в favicon. Если выбрана опция «Сохранить пропорции», то область будет квадратная, если «Не сохранять пропорции», то область можно задать прямоугольной формы, но в процессе преобразования, пропорции картинки будут не соблюдены.
Жмем Далее и попадаем вновь на главную страницу сервиса, где видим, что получилось из нашей картинки после преобразования. Если все устраивает, то сохраняем значок себе на компьютер.
Что касается англоязычного интернета, то там имеется свой замечательный сервис — . По функционалу он похож на рассмотренный выше favicon.ru. Также имеется поле размером 16 на 16 квадратов, представляющее собой иконку в увеличенном вида. Справа выбираем цвет, задаем прозрачность и начинаем творить.
Снизу имеется предпросмотр, который сразу наглядно показывает наше детище в уменьшенном виде. Когда иконка готова, наживаем «Download Favicon» и скачиваем ее на свой компьютер.
Отличительной фишкой является возможность создать анимированный фавикон . В этом случае придется нарисовать несколько иконок, которые будут плавно сменять друг друга подобно кадрам в кино, создавая эффект анимации. Это не сложно, но придется проявить терпение и усидчивость.
Функциональные кнопки следующие:
Clear Frame — очистить текущее поле для рисования; Copy Previous Frame — скопировать текущий кадр; Append New Frame — создать новый кадр; Delete Frame — удалить кадр.Кроме этого, задаем скорость смены кадров и количество итераций (повторений). К сведению, loop forever — бесконечный цикл. В этом случае анимация будет повторятся вновь и вновь.
Имеется уже знакомая нам функция получения иконки из любой картинки. Она значится в левом меню под именем «Import Image».
Наживаем «Обзор» и выбираем изображение размером не больше 5 МВ. Поддерживаются следующие форматы: jpg, jpeg, gif, png, bmp, ico, cur. Далее выбираем одну из опций:
Keep dimensions — сохранять пропорции; Shrink to square icon — преобразовывать в квадратный значок без сохранения пропорций.Жмем Upload, и favicon.ico для сайта готов.
В качестве бонуса имеется большая коллекция уже готовых фавиконов, упорядоченная по времени создания (Latest Favicons) и по рейтингу (Top Rated Favicons).
Коллекции фавиконов
Если не получается создать иконку самому, можно найти в интернете большие коллекции фавиконов различной тематики. Один из таких сервисов рассмотренный чуть выше . На момент написания статьи там уже было более 155 тысяч готовых иконок. Гигантское количество, столько даже просмотреть трудно.
— в коллекции насчитывается более 1500 иконок. От такого многообразия даже глаза разбегаются.
— еще одна англоязычная галерея. Количество значков в ней перевалило уже за 3 тысячи.
— данная коллекция фавиконов насчитывает более 2000 экземпляров.
Пожалуй, этого должно хватить.
Установка favicon.ico на сайт
Фавикон получен, и не важно через онлайн генератор или просто из коллекции иконок, главное что он у вас на компьютере. Остается добавить его на сайт. По умолчанию его достаточно закинуть в корневой каталог сайта, и бот яндекса самостоятельно его отыщет и проиндексирует. Но есть и тонкости, связанные с использованием современных CMS .
WordPress.
Берем иконку и загружаем в корневой каталог, используя ftp клиент, например FileZilla . Открываем свой сайт в новом браузере (не тот, что вы используете по умолчанию) и смотрим, появился значок на закладке рядом с заголовком страницы или нет. Если нет, то возможен такой вариант, что в используемой теме WordPress прописан свой путь до файла favicon.ico. Такое встречается редко, но все же встречается.
Где его искать? Открываем на редактирование шаблон header.php и ищем следующую строчку кода:
| < link rel = "shortcut icon" type = "image/ico" href = "http:.../favicon.ico" /> |
В атрибуте href указан путь до папки, в которой должна храниться наша иконка. Туда-то ее и переносим.
Joomla.
В Joomla я загружаю фавикон в корневой каталог сайта и в папку с используемым шаблоном Joomla . Один из вариантов должен сработать. Если иконка никак не хочет отображаться, то придется опять искать код, определяющий ее местоположение. На этот раз он должен быть расположен в заголовке файла index.php активного шаблоны Joomla.
Drupal 7.
Проще всего дела обстоят в Drupal 7. В отличие от WP и Joomla, фавикон устанавливается для определенной темы через админку Drupal. Заходим в раздел «Оформление» и переходим в настройки активной темы. Находим в самом низу пункт «Настройка значка» и убираем галочку напротив «Использовать стандартный значок». Теперь можно загрузить свой значок с компьютера, используя кнопку «Обзор».
На этом все! Не поленитесь создать уникальный favicon для сайт, он хоть и маленький, но играет большую роль. Спасибо за внимание! До скорых встреч.
Лучший способ выразить благодарность автору - поделиться с друзьями!
Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:
Следите за обновлениями в Twitter и RSS.