Favicon для блога на WordPress

WordPress, Интересное

Теги : , , ,

Недавно захотелось мне сделать для своего блога фавикон. Кто не в курсе, фавикон (favicon) — это маленькая иконка с логотипом сайта, которая появляется в адресной строке, если зайти на сайт. Также фавикон выводится слева от названия сайта в результатах поиска в поисковиках и при использовании закладок.

Как выглядит favicon моего блога можно увидеть в адресной строке браузера… ну или на строку ниже: 🙂

Как выглядит фавикон

Значит теперь… как сделать favicon для своего блога. Рылся в интернете и наткнулся на отличный сервис favicon.cc, который позволяет самому рисовать иконки.

На мой взгляд сервис просто супер. Рисуешь иконку, и сразу видно как она отображается в адресной строке… или снизу можно просмотреть в preview. Еще очень понравилось то, что можно делать анимированные иконки, добавляя новые фреймы или копируя предыдущий и изменяя его. Опять же снизу, в preview, сразу можно увидеть как выглядит анимированный фавикон. После этого иконку можно скачать к себе на компьютер в формате .ico, кликнув по ссылке «Download Favicon». Ну и, собственно, вот как выглядит этот сервис:

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

Также можно легко и просто сделать favicon из любой картинки или фото, используя сервис favicon.co.uk. Для этого необходимо загрузить нужное изображение. Рекомендуется выбрать размер фавикона 16х16 пикселей — именно такой размер нужен для адресной строки в браузере. Далее следует нажать кнопку «Generate Favicon». После всего этого можно посмотреть что получилось и, если понравилось, скачать иконку к себе на компьютер. Выглядит все это вот так:

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

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

После того, как фавикон готов, заливаем его в корневую директорию блога. В заголовке (header.php) вставляем указанный код между тегами <head> и </head>:

<link rel=»shortcut icon» href=»<?php bloginfo(‘home’); ?>/favicon.ico» />

Все готово! Теперь фавиконка должна отображаться в адресной строке браузера.

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

Комментарии:

Оставить комментарий